[MM-36347] Force max window width of 700px (#1720)

src/common/utils/constants.ts

@@ -16,3 +16,8 @@ export const BACK_BAR_HEIGHT = 36;
 export const THREE_DOT_MENU_WIDTH = 40;
 export const THREE_DOT_MENU_WIDTH_MAC = 80;
 export const MENU_SHADOW_WIDTH = 24;
+
+export const DEFAULT_WINDOW_WIDTH = 1000;
+export const DEFAULT_WINDOW_HEIGHT = 700;
+export const MINIMUM_WINDOW_WIDTH = 700;
+export const MINIMUM_WINDOW_HEIGHT = 240;

src/main/preload/dropdown.js

@@ -52,6 +52,6 @@ window.addEventListener('message', async (event) => {
     }
 });
 
-ipcRenderer.on(UPDATE_TEAMS_DROPDOWN, (event, teams, activeTeam, darkMode, enableServerManagement, hasGPOTeams, expired, mentions, unreads) => {
-    window.postMessage({type: UPDATE_TEAMS_DROPDOWN, data: {teams, activeTeam, darkMode, enableServerManagement, hasGPOTeams, expired, mentions, unreads}}, window.location.href);
+ipcRenderer.on(UPDATE_TEAMS_DROPDOWN, (event, teams, activeTeam, darkMode, enableServerManagement, hasGPOTeams, expired, mentions, unreads, windowBounds) => {
+    window.postMessage({type: UPDATE_TEAMS_DROPDOWN, data: {teams, activeTeam, darkMode, enableServerManagement, hasGPOTeams, expired, mentions, unreads, windowBounds}}, window.location.href);
 });

src/main/views/teamDropdownView.ts

@@ -31,6 +31,7 @@ export default class TeamDropdownView {
     mentions?: Map<string, number>;
     expired?: Map<string, boolean>;
     window: BrowserWindow;
+    windowBounds: Electron.Rectangle;
 
     constructor(window: BrowserWindow, teams: TeamWithTabs[], darkMode: boolean, enableServerManagement: boolean) {
         this.teams = teams;
@@ -38,6 +39,8 @@ export default class TeamDropdownView {
         this.darkMode = darkMode;
         this.enableServerManagement = enableServerManagement;
 
+        this.windowBounds = this.window.getContentBounds();
+
         const preload = getLocalPreload('dropdown.js');
         this.view = new BrowserView({webPreferences: {
             contextIsolation: process.env.NODE_ENV !== 'test',
@@ -77,6 +80,11 @@ export default class TeamDropdownView {
         this.updateDropdown();
     }
 
+    updateWindowBounds = () => {
+        this.windowBounds = this.window.getContentBounds();
+        this.updateDropdown();
+    }
+
     updateDropdown = () => {
         this.view.webContents.send(
             UPDATE_TEAMS_DROPDOWN,
@@ -88,6 +96,7 @@ export default class TeamDropdownView {
             this.expired,
             this.mentions,
             this.unreads,
+            this.windowBounds,
         );
     }
 

src/main/windows/mainWindow.ts

@@ -13,6 +13,7 @@ import {CombinedConfig} from 'types/config';
 import {SavedWindowState} from 'types/mainWindow';
 
 import {SELECT_NEXT_TAB, SELECT_PREVIOUS_TAB, GET_FULL_SCREEN_STATUS} from 'common/communication';
+import {DEFAULT_WINDOW_HEIGHT, DEFAULT_WINDOW_WIDTH, MINIMUM_WINDOW_HEIGHT, MINIMUM_WINDOW_WIDTH} from 'common/utils/constants';
 
 import * as Validator from '../Validator';
 import ContextMenu from '../contextMenu';
@@ -37,11 +38,6 @@ function isFramelessWindow() {
 }
 
 function createMainWindow(config: CombinedConfig, options: {linuxAppIcon: string}) {
-    const defaultWindowWidth = 1000;
-    const defaultWindowHeight = 700;
-    const minimumWindowWidth = 400;
-    const minimumWindowHeight = 240;
-
     // Create the browser window.
     const preload = getLocalPreload('mainWindow.js');
     const boundsInfoPath = path.join(app.getPath('userData'), 'bounds-info.json');
@@ -54,7 +50,7 @@ function createMainWindow(config: CombinedConfig, options: {linuxAppIcon: string
         }
     } catch (e) {
     // Follow Electron's defaults, except for window dimensions which targets 1024x768 screen resolution.
-        savedWindowState = {width: defaultWindowWidth, height: defaultWindowHeight};
+        savedWindowState = {width: DEFAULT_WINDOW_WIDTH, height: DEFAULT_WINDOW_HEIGHT};
     }
 
     const {maximized: windowIsMaximized} = savedWindowState;
@@ -66,8 +62,8 @@ function createMainWindow(config: CombinedConfig, options: {linuxAppIcon: string
         fullscreenable: true,
         show: false, // don't start the window until it is ready and only if it isn't hidden
         paintWhenInitiallyHidden: true, // we want it to start painting to get info from the webapp
-        minWidth: minimumWindowWidth,
-        minHeight: minimumWindowHeight,
+        minWidth: MINIMUM_WINDOW_WIDTH,
+        minHeight: MINIMUM_WINDOW_HEIGHT,
         frame: !isFramelessWindow(),
         fullscreen: savedWindowState.fullscreen,
         titleBarStyle: 'hidden' as const,

src/main/windows/windowManager.ts

@@ -184,6 +184,7 @@ function handleResizeMainWindow() {
         setBoundsFunction();
     }
     status.viewManager.setLoadingScreenBounds();
+    status.teamDropdown?.updateWindowBounds();
 }
 
 export function sendToRenderer(channel: string, ...args: any[]) {

src/renderer/css/components/TeamDropdownButton.scss

@@ -6,6 +6,7 @@
     display: flex;
     align-items: center;
     font-family: Open Sans;
+    overflow: hidden;
 
     &.disabled {
         opacity: 0.5;
@@ -33,6 +34,9 @@
         font-size: 12px;
         line-height: 16px;
         margin-left: 8px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
     }
 
     i {

src/renderer/css/dropdown.scss

@@ -26,6 +26,11 @@ body {
 
 .TeamDropdown__droppable {
     width: 100%;
+    overflow-y: scroll;
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
 
     > button {
         border: none;
@@ -122,6 +127,7 @@ body {
 .TeamDropdown__draggable-handle {
     cursor: pointer !important;
     display: flex;
+    overflow: hidden;
     
     &.dragging {
         cursor: grabbing !important;
@@ -136,6 +142,11 @@ body {
             font-size: 14px;
         }
     }
+
+    > span {
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
 }
 
 .TeamDropdown__badge {

src/renderer/dropdown.tsx

@@ -18,8 +18,8 @@ import {
     SWITCH_SERVER, UPDATE_TEAMS,
     UPDATE_TEAMS_DROPDOWN,
 } from 'common/communication';
-
 import {getTabViewName} from 'common/tabs/TabView';
+import {TAB_BAR_HEIGHT, THREE_DOT_MENU_WIDTH_MAC} from 'common/utils/constants';
 
 import './css/dropdown.scss';
 import './css/compass-icons.css';
@@ -35,6 +35,7 @@ type State = {
     expired?: Map<string, boolean>;
     hasGPOTeams?: boolean;
     isAnyDragging: boolean;
+    windowBounds?: Electron.Rectangle;
 }
 
 function getStyle(style?: DraggingStyle | NotDraggingStyle) {
@@ -66,7 +67,7 @@ class TeamDropdown extends React.PureComponent<Record<string, never>, State> {
 
     handleMessageEvent = (event: MessageEvent) => {
         if (event.data.type === UPDATE_TEAMS_DROPDOWN) {
-            const {teams, activeTeam, darkMode, enableServerManagement, hasGPOTeams, unreads, mentions, expired} = event.data.data;
+            const {teams, activeTeam, darkMode, enableServerManagement, hasGPOTeams, unreads, mentions, expired, windowBounds} = event.data.data;
             this.setState({
                 teams,
                 orderedTeams: teams.concat().sort((a: TeamWithTabs, b: TeamWithTabs) => a.order - b.order),
@@ -77,6 +78,7 @@ class TeamDropdown extends React.PureComponent<Record<string, never>, State> {
                 unreads,
                 mentions,
                 expired,
+                windowBounds,
             });
         }
     }
@@ -231,6 +233,10 @@ class TeamDropdown extends React.PureComponent<Record<string, never>, State> {
                 className={classNames('TeamDropdown', {
                     darkMode: this.state.darkMode,
                 })}
+                style={{
+                    maxHeight: this.state.windowBounds ? (this.state.windowBounds.height - TAB_BAR_HEIGHT - 16) : undefined,
+                    maxWidth: this.state.windowBounds ? (this.state.windowBounds.width - THREE_DOT_MENU_WIDTH_MAC) : undefined,
+                }}
             >
                 <div className='TeamDropdown__header'>
                     <span>{'Servers'}</span>