Merge pull request #3131 from yougotwill/fix/ses-2426/block_contacts_height

stylesheets/_modules.scss

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

stylesheets/_session.scss

@@ -382,7 +382,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/SessionInboxView.tsx

@@ -54,7 +54,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/basic/SessionRadioGroup.tsx

@@ -57,6 +57,7 @@ export const SessionRadioGroup = (props: Props) => {
             }}
             beforeMargins={'0 var(--margins-sm) 0 0 '}
             radioPosition={radioPosition}
+            style={{ textAlign: 'start' }}
           />
         );
       })}

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

@@ -126,6 +126,15 @@ type ThemeGlobals = {
   '--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;
+
   /* Contact Row */
   '--contact-row-height': string;
   '--contact-row-break-height': string;
@@ -239,6 +248,10 @@ export const THEME_GLOBALS: ThemeGlobals = {
   '--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))',
+
   '--contact-row-height': '60px',
   '--contact-row-break-height': '20px',
 };