Blocked list inaccessiable on smaller screens

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/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/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

@@ -6,57 +6,42 @@ import { useSet } from '../../hooks/useSet';
 import { ToastUtils } from '../../session/utils';
 import { BlockedNumberController } from '../../util';
 import { SessionButton, SessionButtonColor } from '../basic/SessionButton';
-import { SpacerLG } from '../basic/Text';
+import { SpacerLG, SpacerSM } from '../basic/Text';
 import { SessionIconButton } from '../icon';
 import { MemberListItem } from '../MemberListItem';
-import { SettingsTitleAndDescription } from './SessionSettingListItem';
+import { SessionSettingsItemWrapper, SettingsTitleAndDescription } from './SessionSettingListItem';
 
 const BlockedEntriesContainer = styled.div`
-  flex-shrink: 1;
-  overflow: auto;
-  min-height: 40px;
-  max-height: 100%;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  width: 100%;
 `;
 
 const BlockedEntriesRoundedContainer = styled.div`
-  overflow: hidden;
   background: var(--background-secondary-color);
   border: 1px solid var(--border-color);
   border-radius: 16px;
   padding: var(--margins-lg);
   margin: 0 var(--margins-lg);
 `;
 
-const BlockedContactsSection = styled.div`
-  display: flex;
-  flex-direction: column;
-  min-height: 80px;
-
-  background: var(--settings-tab-background-color);
-  color: var(--settings-tab-text-color);
-  border-top: 1px solid var(--border-color);
-  border-bottom: 1px solid var(--border-color);
-
-  margin-bottom: var(--margins-lg);
-`;
-
 const BlockedContactListTitle = styled.div`
   display: flex;
   justify-content: space-between;
-  min-height: 45px;
   align-items: center;
 `;
 
 const BlockedContactListTitleButtons = styled.div`
   display: flex;
   align-items: center;
+  min-height: 34px; // height of the unblock button
 `;
 
-export const StyledBlockedSettingItem = styled.div<{ clickable: boolean }>`
+export const StyledBlockedSettingItem = styled.div<{ clickable: boolean; expanded: boolean }>`
   font-size: var(--font-size-md);
-  padding: var(--margins-lg);
-
   cursor: ${props => (props.clickable ? 'pointer' : 'unset')};
+  ${props => props.expanded && 'padding-bottom: var(--margins-lg);'}
 `;
 
 const BlockedEntries = (props: {
@@ -121,8 +106,11 @@ export const BlockedContactsList = () => {
   }
 
   return (
-    <BlockedContactsSection>
-      <StyledBlockedSettingItem clickable={!noBlockedNumbers}>
+    <SessionSettingsItemWrapper inline={false}>
+      <StyledBlockedSettingItem
+        clickable={!noBlockedNumbers}
+        expanded={!noBlockedNumbers && expanded}
+      >
         <BlockedContactListTitle onClick={toggleUnblockList}>
           <SettingsTitleAndDescription title={window.i18n('blockedSettingsTitle')} />
           {noBlockedNumbers ? (
@@ -157,9 +145,9 @@ export const BlockedContactsList = () => {
             addToSelected={addToSelected}
             removeFromSelected={removeFromSelected}
           />
-          <SpacerLG />
+          <SpacerSM />
         </>
       ) : null}
-    </BlockedContactsSection>
+    </SessionSettingsItemWrapper>
   );
 };

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).