fix: scrollbar colors and some UI issues found by QA

stylesheets/_global.scss

@@ -19,20 +19,20 @@ body {
 
 // scrollbars
 ::-webkit-scrollbar {
-  width: 9px;
-  height: 9px;
+  width: 6px;
+  height: 6px;
 }
 
 ::-webkit-scrollbar-thumb {
   background: var(--color-scroll-bar-thumb);
-  border: solid 2px var(--color-text-opposite);
+  border-radius: 20px;
 
   &:hover {
     background: $color-light-45;
   }
 }
 ::-webkit-scrollbar-track {
-  background: var(--color-scroll-bar-track);
+  background: none;
 }
 
 audio {

stylesheets/_session_left_pane.scss

@@ -89,6 +89,7 @@ $session-compose-margin: 20px;
     height: $main-view-header-height;
     padding-inline-end: 7px;
     transition: $session-transition-duration;
+    margin-bottom: var(--margins-md);
 
     .session-button {
       margin-inline-start: auto;

ts/components/MemberListItem.tsx

@@ -45,12 +45,16 @@ const StyledSessionMemberItem = styled.div<{
 const StyledInfo = styled.div`
   display: flex;
   align-items: center;
+  min-width: 0;
 `;
 
 const StyledName = styled.span`
   font-weight: bold;
   margin-inline-start: var(--margins-md);
   margin-inline-end: var(--margins-md);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 `;
 
 const StyledCheckContainer = styled.div`

ts/components/basic/Text.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled, { CSSProperties } from 'styled-components';
 
 type TextProps = {
   text: string;
@@ -28,6 +28,7 @@ export const Text = (props: TextProps) => {
 
 type SpacerProps = {
   size: 'lg' | 'md' | 'sm' | 'xs';
+  style?: CSSProperties;
 };
 
 const SpacerStyled = styled.div<SpacerProps>`
@@ -54,19 +55,19 @@ const Spacer = (props: SpacerProps) => {
   return <SpacerStyled {...props} />;
 };
 
-export const SpacerLG = () => {
-  return <Spacer size="lg" />;
+export const SpacerLG = (props: { style?: CSSProperties }) => {
+  return <Spacer size="lg" style={props.style} />;
 };
 
-export const SpacerMD = () => {
-  return <Spacer size="md" />;
+export const SpacerMD = (props: { style?: CSSProperties }) => {
+  return <Spacer size="md" style={props.style} />;
 };
-export const SpacerSM = () => {
-  return <Spacer size="sm" />;
+export const SpacerSM = (props: { style?: CSSProperties }) => {
+  return <Spacer size="sm" style={props.style} />;
 };
 
-export const SpacerXS = () => {
-  return <Spacer size="xs" />;
+export const SpacerXS = (props: { style?: CSSProperties }) => {
+  return <Spacer size="xs" style={props.style} />;
 };
 
 type H3Props = {

ts/components/basic/YourSessionIDPill.tsx

@@ -35,23 +35,22 @@ export const YourSessionIDPill = () => {
 };
 
 const StyledYourSessionIDSelectable = styled.p`
-  user-select: text;
+  user-select: none;
   text-align: center;
   word-break: break-all;
 
-  padding: 0px var(--margins-lg);
   font-weight: 100;
   color: var(--color-text);
-
   font-size: var(--font-size-sm);
-  padding: 0px var(--margins-md);
 `;
 
 export const YourSessionIDSelectable = () => {
   const ourSessionID = UserUtils.getOurPubKeyStrFromCache();
   return (
     <StyledYourSessionIDSelectable data-testid="your-session-id">
-      {ourSessionID}
+      {ourSessionID.slice(0, 33)}
+      <br />
+      {ourSessionID.slice(33)}
     </StyledYourSessionIDSelectable>
   );
 };

ts/components/leftpane/overlay/OverlayClosedGroup.tsx

@@ -144,7 +144,7 @@ export const OverlayClosedGroup = () => {
         )}
       </StyledGroupMemberListContainer>
 
-      <SpacerLG />
+      <SpacerLG style={{ flexShrink: 0 }} />
 
       <SessionButton
         buttonColor={SessionButtonColor.Green}

ts/components/leftpane/overlay/OverlayMessage.tsx

@@ -118,7 +118,8 @@ export const OverlayMessage = () => {
         container={true}
         justifyContent="space-between"
         alignItems="center"
-        padding="0 15px 0 0 " // YourSessionIDSelectable already has a left margin of 15px
+        width="100%"
+        padding="0 var(--margins-md)  " // YourSessionIDSelectable already has a left margin of 15px
       >
         <YourSessionIDSelectable />
         <SessionIconButton iconSize="small" iconType="copy" onClick={copyOurSessionID} />

ts/components/leftpane/overlay/choose-action/ContactRow.tsx

@@ -64,7 +64,7 @@ const StyledBreak = styled.div`
   padding: 0 var(--margins-lg);
   color: var(--color-text-subtle);
   font-size: var(--font-size-md);
-  height: 25px; // should also be changed in rowHeight
+  height: 30px; // should also be changed in rowHeight
 
   border-bottom: 1px var(--color-session-border) solid;
 `;

ts/components/leftpane/overlay/choose-action/ContactsListWithBreaks.tsx

@@ -93,7 +93,7 @@ const ContactListItemSection = () => {
               rowCount={length}
               rowHeight={
                 (params: Index) =>
-                  isString(directContactsByNameWithBreaks[params.index]) ? 25 : 64 // should also be changed in `ContactRowBreak`
+                  isString(directContactsByNameWithBreaks[params.index]) ? 30 : 64 // should also be changed in `ContactRowBreak`
               }
               directContactsByNameWithBreaks={directContactsByNameWithBreaks}
               rowRenderer={renderRow}

ts/state/ducks/SessionTheme.tsx

@@ -41,8 +41,7 @@ const darkInputBackground = darkColorCellBackground;
 const darkFilterSessionText = 'none';
 const darkUnreadBorder = `4px solid ${accentDarkTheme}`;
 
-const darkScrollbarThumb = '#474646';
-const darkScrollbarTrack = '#1b1b1b';
+const darkScrollbarThumb = '#767676';
 const darkFakeChatBubbleBg = '#212121';
 
 const darkInboxBackground = '#171717';
@@ -116,7 +115,6 @@ export const switchHtmlToDarkTheme = () => {
   document.documentElement.style.setProperty('--border-unread', darkUnreadBorder);
 
   document.documentElement.style.setProperty('--color-scroll-bar-thumb', darkScrollbarThumb);
-  document.documentElement.style.setProperty('--color-scroll-bar-track', darkScrollbarTrack);
   document.documentElement.style.setProperty(
     '--color-fake-chat-bubble-background',
     darkFakeChatBubbleBg
@@ -188,8 +186,7 @@ const lightInputBackground = '#efefef';
 const lightFilterSessionText = 'brightness(0) saturate(100%)';
 const lightUnreadBorder = `4px solid ${accentLightTheme}`;
 
-const lightScrollbarThumb = '#474646';
-const lightScrollbarTrack = '#fcfcfc';
+const lightScrollbarThumb = '#6D6D6D';
 const lightFakeChatBubbleBg = '#f5f5f5';
 
 const lightInboxBackground = white;
@@ -269,7 +266,6 @@ export const switchHtmlToLightTheme = () => {
   document.documentElement.style.setProperty('--border-unread', lightUnreadBorder);
 
   document.documentElement.style.setProperty('--color-scroll-bar-thumb', lightScrollbarThumb);
-  document.documentElement.style.setProperty('--color-scroll-bar-track', lightScrollbarTrack);
   document.documentElement.style.setProperty(
     '--color-fake-chat-bubble-background',
     lightFakeChatBubbleBg
@@ -374,7 +370,6 @@ export const SessionGlobalStyles = createGlobalStyle`
     --color-pill-divider-text:  ${lightColorPillDividerText};
     --color-input-background: ${lightInputBackground};
     --color-scroll-bar-thumb: ${lightScrollbarThumb};
-    --color-scroll-bar-track: ${lightScrollbarTrack};
     --color-fake-chat-bubble-background: ${lightFakeChatBubbleBg};
     --color-inbox-background: ${lightInboxBackground};
     --color-left-pane-overlay-background: ${lightLeftPaneOverlayBg};