From 4b0b813362df7e6db0657b8a0022e581c6e1d33b Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@getsession.org>
Date: Mon, 29 Jul 2024 10:55:54 +1000
Subject: [PATCH] fix: blocked list overflow by setting parent width correctly

---
 stylesheets/_modules.scss                         |  2 +-
 stylesheets/_session.scss                         |  2 +-
 stylesheets/_session_conversation.scss            |  2 +-
 ts/components/MemberListItem.tsx                  |  4 +---
 ts/components/SessionInboxView.tsx                |  2 +-
 .../leftpane/LeftPaneSectionContainer.tsx         |  2 +-
 ts/components/settings/BlockedList.tsx            |  1 -
 ts/themes/globals.tsx                             | 15 ++++++++++++++-
 8 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index c37d708bd..744121653 100644
--- a/stylesheets/_modules.scss
+++ b/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%;
 }
 
diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss
index b8278f858..0924a9392 100644
--- a/stylesheets/_session.scss
+++ b/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;
diff --git a/stylesheets/_session_conversation.scss b/stylesheets/_session_conversation.scss
index d0cf549a3..5f35c9b34 100644
--- a/stylesheets/_session_conversation.scss
+++ b/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 {
diff --git a/ts/components/MemberListItem.tsx b/ts/components/MemberListItem.tsx
index c6bef22fd..503532328 100644
--- a/ts/components/MemberListItem.tsx
+++ b/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 && (
diff --git a/ts/components/SessionInboxView.tsx b/ts/components/SessionInboxView.tsx
index b4ff71b00..63b33018c 100644
--- a/ts/components/SessionInboxView.tsx
+++ b/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;
 `;
 
diff --git a/ts/components/leftpane/LeftPaneSectionContainer.tsx b/ts/components/leftpane/LeftPaneSectionContainer.tsx
index 263d33288..beb3d1cde 100644
--- a/ts/components/leftpane/LeftPaneSectionContainer.tsx
+++ b/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;
diff --git a/ts/components/settings/BlockedList.tsx b/ts/components/settings/BlockedList.tsx
index bb4b051a4..588362d74 100644
--- a/ts/components/settings/BlockedList.tsx
+++ b/ts/components/settings/BlockedList.tsx
@@ -63,7 +63,6 @@ const BlockedEntries = (props: {
               onSelect={addToSelected}
               onUnselect={removeFromSelected}
               disableBg={true}
-              maxNameWidth={'33vw'}
             />
           );
         })}
diff --git a/ts/themes/globals.tsx b/ts/themes/globals.tsx
index d0743586c..2662d5bd4 100644
--- a/ts/themes/globals.tsx
+++ b/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).