Merge pull request #1142 from Mikunj/height-fix

Update minimum height to 600px

main.js

@@ -206,19 +206,33 @@ function captureClicks(window) {
   window.webContents.on('new-window', handleUrl);
 }
 
-const DEFAULT_WIDTH = 880;
-// add contact button needs to be visible (on HiDpi screens?)
-// otherwise integration test fail
-const DEFAULT_HEIGHT = 820;
-const MIN_WIDTH = 880;
-const MIN_HEIGHT = 820;
-const BOUNDS_BUFFER = 100;
+const WINDOW_SIZE = Object.freeze({
+  defaultWidth: 880,
+  defaultHeight: 820,
+  minWidth: 880,
+  minHeight: 600,
+});
+
+function getWindowSize() {
+  const { screen } = electron;
+  const screenSize = screen.getPrimaryDisplay().workAreaSize;
+  const { minWidth, minHeight, defaultWidth, defaultHeight } = WINDOW_SIZE;
+  // Ensure that the screen can fit within the default size
+  const width = Math.min(defaultWidth, Math.max(minWidth, screenSize.width));
+  const height = Math.min(
+    defaultHeight,
+    Math.max(minHeight, screenSize.height)
+  );
+
+  return { width, height, minWidth, minHeight };
+}
 
 function isVisible(window, bounds) {
   const boundsX = _.get(bounds, 'x') || 0;
   const boundsY = _.get(bounds, 'y') || 0;
-  const boundsWidth = _.get(bounds, 'width') || DEFAULT_WIDTH;
-  const boundsHeight = _.get(bounds, 'height') || DEFAULT_HEIGHT;
+  const boundsWidth = _.get(bounds, 'width') || WINDOW_SIZE.defaultWidth;
+  const boundsHeight = _.get(bounds, 'height') || WINDOW_SIZE.defaultHeight;
+  const BOUNDS_BUFFER = 100;
 
   // requiring BOUNDS_BUFFER pixels on the left or right side
   const rightSideClearOfLeftBound =
@@ -241,13 +255,14 @@ function isVisible(window, bounds) {
 
 async function createWindow() {
   const { screen } = electron;
+  const { minWidth, minHeight, width, height } = getWindowSize();
   const windowOptions = Object.assign(
     {
       show: !startInTray, // allow to start minimised in tray
-      width: DEFAULT_WIDTH,
-      height: DEFAULT_HEIGHT,
-      minWidth: MIN_WIDTH,
-      minHeight: MIN_HEIGHT,
+      width,
+      height,
+      minWidth,
+      minHeight,
       autoHideMenuBar: false,
       backgroundColor: '#fff',
       webPreferences: {
@@ -270,11 +285,11 @@ async function createWindow() {
     ])
   );
 
-  if (!_.isNumber(windowOptions.width) || windowOptions.width < MIN_WIDTH) {
-    windowOptions.width = DEFAULT_WIDTH;
+  if (!_.isNumber(windowOptions.width) || windowOptions.width < minWidth) {
+    windowOptions.width = Math.max(minWidth, width);
   }
-  if (!_.isNumber(windowOptions.height) || windowOptions.height < MIN_HEIGHT) {
-    windowOptions.height = DEFAULT_HEIGHT;
+  if (!_.isNumber(windowOptions.height) || windowOptions.height < minHeight) {
+    windowOptions.height = Math.max(minHeight, height);
   }
   if (!_.isBoolean(windowOptions.maximized)) {
     delete windowOptions.maximized;
@@ -516,13 +531,13 @@ function showPasswordWindow() {
     passwordWindow.show();
     return;
   }
-
+  const { minWidth, minHeight, width, height } = getWindowSize();
   const windowOptions = {
     show: true, // allow to start minimised in tray
-    width: DEFAULT_WIDTH,
-    height: DEFAULT_HEIGHT,
-    minWidth: MIN_WIDTH,
-    minHeight: MIN_HEIGHT,
+    width,
+    height,
+    minWidth,
+    minHeight,
     autoHideMenuBar: false,
     webPreferences: {
       nodeIntegration: false,
@@ -631,8 +646,8 @@ async function showDebugLogWindow() {
   const theme = await getThemeFromMainWindow();
   const size = mainWindow.getSize();
   const options = {
-    width: Math.max(size[0] - 100, MIN_WIDTH),
-    height: Math.max(size[1] - 100, MIN_HEIGHT),
+    width: Math.max(size[0] - 100, WINDOW_SIZE.minWidth),
+    height: Math.max(size[1] - 100, WINDOW_SIZE.minHeight),
     resizable: false,
     title: locale.messages.signalDesktopPreferences.message,
     autoHideMenuBar: true,

stylesheets/_session.scss

@@ -558,7 +558,9 @@ label {
   max-width: 70vw;
   background-color: $session-shade-4;
   border: 1px solid $session-shade-8;
-  padding-bottom: $session-margin-lg;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
 
   &__header {
     display: flex;
@@ -609,6 +611,8 @@ label {
     font-family: $session-font-accent;
     line-height: $session-font-md;
     font-size: $session-font-sm;
+    overflow-y: auto;
+    overflow-x: hidden;
 
     .message {
       text-align: center;
@@ -1061,7 +1065,8 @@ label {
   flex-direction: column;
 
   &-list {
-    overflow-y: scroll;
+    overflow-y: auto;
+    overflow-x: hidden;
   }
 
   &-header {
@@ -1131,6 +1136,7 @@ label {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
+    overflow: hidden;
   }
 
   &__version-info {
@@ -1566,6 +1572,13 @@ input {
     text-align: center;
     padding: 20px;
   }
+
+  // Height at which scroll bar appears on the group member list
+  @media (max-height: 804px) {
+    &__container {
+      overflow-y: visible;
+    }
+  }
 }
 .create-group-name-input {
   .session-id-editable {

stylesheets/_session_left_pane.scss

@@ -239,7 +239,8 @@ $session-compose-margin: 20px;
     display: flex;
     flex-direction: column;
     align-items: center;
-    height: -webkit-fill-available;
+    overflow-y: auto;
+    overflow-x: hidden;
     .session-icon .exit {
       padding: 13px;
     }
@@ -339,7 +340,8 @@ $session-compose-margin: 20px;
 .session-left-pane-section-content {
   display: flex;
   flex-direction: column;
-  flex-grow: 1;
+  flex: 1;
+  overflow: hidden;
 }
 
 .user-search-dropdown {
@@ -404,8 +406,6 @@ $session-compose-margin: 20px;
 @mixin bottom-buttons() {
   display: flex;
   flex-direction: row;
-  position: absolute;
-  bottom: 2px;
   width: 100%;
 
   @at-root .light-theme #{&} {
@@ -471,7 +471,8 @@ $session-compose-margin: 20px;
   &-content {
     display: flex;
     flex-direction: column;
-    flex-grow: 1;
+    overflow: hidden;
+    flex: 1;
 
     .module-conversation-list-item {
       background-color: $session-shade-4;

stylesheets/_session_signin.scss

@@ -10,6 +10,7 @@
     height: 100%;
     display: flex;
     align-items: center;
+    flex-direction: column;
 
     &-accent {
       flex-grow: 1;
@@ -28,21 +29,32 @@
     }
 
     &-registration {
-      height: 45%;
       padding-right: 128px;
     }
 
+    &-header {
+      display: flex;
+      flex-direction: row;
+      width: 100%;
+      justify-content: space-between;
+      padding: 17px 20px;
+    }
+
+    &-body {
+      display: flex;
+      flex-direction: row;
+      flex: 1;
+      align-items: center;
+      width: 100%;
+      padding-bottom: 20px;
+    }
+
     &-close-button {
-      position: absolute;
-      top: 17px;
-      left: 20px;
+      display: flex;
+      align-items: center;
     }
 
     &-session-button {
-      position: absolute;
-      top: 17px;
-      right: 20px;
-
       img {
         width: 30px;
       }
@@ -246,6 +258,8 @@
       display: inline-block;
       font-family: $session-font-mono;
       user-select: all;
+      overflow: hidden;
+      resize: none;
     }
   }
 }

ts/components/session/SessionRegistrationView.tsx

@@ -8,24 +8,27 @@ export const SessionRegistrationView: React.FC = () => (
   <div className="session-content">
     <div id="session-toast-container" />
     <div id="error" className="collapse" />
-    <div className="session-content-close-button">
-      <SessionIconButton
-        iconSize={SessionIconSize.Medium}
-        iconType={SessionIconType.Exit}
-        onClick={() => {
-          window.close();
-        }}
-      />
+    <div className="session-content-header">
+      <div className="session-content-close-button">
+        <SessionIconButton
+          iconSize={SessionIconSize.Medium}
+          iconType={SessionIconType.Exit}
+          onClick={() => {
+            window.close();
+          }}
+        />
+      </div>
+      <div className="session-content-session-button">
+        <img alt="brand" src="./images/session/brand.svg" />
+      </div>
     </div>
-
-    <div className="session-content-accent">
-      <AccentText />
-    </div>
-    <div className="session-content-registration">
-      <RegistrationTabs />
-    </div>
-    <div className="session-content-session-button">
-      <img alt="brand" src="./images/session/brand.svg" />
+    <div className="session-content-body">
+      <div className="session-content-accent">
+        <AccentText />
+      </div>
+      <div className="session-content-registration">
+        <RegistrationTabs />
+      </div>
     </div>
   </div>
 );