fix: blocked list overflow by setting parent width correctly

stylesheets/_modules.scss

@@ -952,7 +952,7 @@
 .module-left-pane {
   display: inline-flex;
   flex-direction: column;
-  width: 380px;
+  width: var(--left-panel-width);
   height: 100%;
 }
 

stylesheets/_session.scss

@@ -503,7 +503,7 @@ label {
 }
 
 .session-settings {
-  width: 100%;
+  width: var(--main-panel-content-width);
   height: 100%;
   display: flex;
   flex-direction: column;

stylesheets/_session_conversation.scss

@@ -53,7 +53,7 @@
   flex-grow: 1;
   display: flex;
   flex-direction: column;
-  max-width: calc(100vw - 380px);
+  width: var(--main-panel-content-width);
   height: 100%;
 
   .selection-mode {

ts/components/MemberListItem.tsx

@@ -76,7 +76,6 @@ export const MemberListItem = (props: {
   isZombie?: boolean;
   inMentions?: boolean; // set to true if we are rendering members but in the Mentions picker
   disableBg?: boolean;
-  maxNameWidth?: string;
   isAdmin?: boolean; // if true,  we add a small crown on top of their avatar
   onSelect?: (pubkey: string) => void;
   onUnselect?: (pubkey: string) => void;
@@ -91,7 +90,6 @@ export const MemberListItem = (props: {
     onUnselect,
     inMentions,
     disableBg,
-    maxNameWidth,
     dataTestId,
   } = props;
 
@@ -118,7 +116,7 @@ export const MemberListItem = (props: {
     >
       <StyledInfo>
         <AvatarItem memberPubkey={pubkey} isAdmin={isAdmin || false} />
-        <StyledName maxWidth={maxNameWidth}>{memberName}</StyledName>
+        <StyledName>{memberName}</StyledName>
       </StyledInfo>
 
       {!inMentions && (

ts/components/SessionInboxView.tsx

@@ -52,7 +52,7 @@ function makeLookup<T>(items: Array<T>, key: string): { [key: string]: T } {
 moment.locale((window.i18n as any).getLocale());
 
 const StyledGutter = styled.div`
-  width: 380px !important;
+  width: var(--left-panel-width) !important;
   transition: none;
 `;
 

ts/components/leftpane/LeftPaneSectionContainer.tsx

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 export const LeftPaneSectionContainer = styled.div`
-  width: 80px;
+  width: var(--actions-panel-width);
   display: flex;
   flex-direction: column;
   align-items: center;

ts/components/settings/BlockedList.tsx

@@ -63,7 +63,6 @@ const BlockedEntries = (props: {
               onSelect={addToSelected}
               onUnselect={removeFromSelected}
               disableBg={true}
-              maxNameWidth={'33vw'}
             />
           );
         })}

ts/themes/globals.tsx

@@ -3,7 +3,7 @@ import { hexColorToRGB } from '../util/hexColorToRGB';
 import { COLORS } from './constants/colors';
 
 // These variables are independent of the current theme
-export type ThemeGlobals = {
+type ThemeGlobals = {
   /* Fonts */
   '--font-default': string;
   '--font-accent': string;
@@ -92,6 +92,15 @@ export type ThemeGlobals = {
   '--right-panel-height': string;
   '--right-panel-attachment-width': string;
   '--right-panel-attachment-height': string;
+
+  /* Left Panel */
+  '--left-panel-width': string;
+
+  /* Actions panel (the 80px of the 380px of the left pane) */
+  '--actions-panel-width': string;
+
+  /* Main panel */
+  '--main-panel-content-width': string;
 };
 
 // These are only set once in the global style (at root).
@@ -166,6 +175,10 @@ export const THEME_GLOBALS: ThemeGlobals = {
   '--right-panel-attachment-width': 'calc(var(--right-panel-width) - 2 * var(--margins-2xl) - 7px)',
   '--right-panel-attachment-height':
     'calc(var(--right-panel-height) - 2 * var(--margins-2xl) -7px)',
+
+  '--left-panel-width': '380px',
+  '--actions-panel-width': '80px',
+  '--main-panel-content-width': 'calc(100vw - var(--left-panel-width))',
 };
 
 // These should only be needed for the global style (at root).