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

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>