fix: minor ui fixes

ts/components/basic/YourSessionIDPill.tsx

@@ -41,6 +41,7 @@ const StyledYourSessionIDSelectable = styled.p`
   font-weight: 300;
   font-size: var(--font-size-sm);
   color: var(--text-primary-color);
+  flex-shrink: 0;
 `;
 
 export const YourSessionIDSelectable = () => {

ts/components/leftpane/LeftPaneSectionHeader.tsx

@@ -61,6 +61,7 @@ const StyledBannerInner = styled.div`
 
   .session-button {
     margin-top: var(--margins-md);
+    flex-grow: 1;
   }
 `;
 
@@ -75,11 +76,13 @@ const BannerInner = () => {
   return (
     <StyledBannerInner>
       <p>{window.i18n('recoveryPhraseRevealMessage')}</p>
-      <SessionButton
+      <Flex container={true} alignItems="center" justifyContent="center">
-        text={window.i18n('recoveryPhraseRevealButtonText')}
+        <SessionButton
-        onClick={showRecoveryPhraseModal}
+          text={window.i18n('recoveryPhraseRevealButtonText')}
-        dataTestId="reveal-recovery-phrase"
+          onClick={showRecoveryPhraseModal}
-      />
+          dataTestId="reveal-recovery-phrase"
+        />
+      </Flex>
     </StyledBannerInner>
   );
 };

ts/components/leftpane/overlay/OverlayMessage.tsx

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