From d267e7ccdc145548f5198d10e449d5d2343f4d74 Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Thu, 28 Mar 2024 14:50:27 +1100
Subject: [PATCH] fix: minor ui fixes

---
 ts/components/basic/YourSessionIDPill.tsx         |  1 +
 ts/components/leftpane/LeftPaneSectionHeader.tsx  | 13 ++++++++-----
 ts/components/leftpane/overlay/OverlayMessage.tsx |  2 +-
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/ts/components/basic/YourSessionIDPill.tsx b/ts/components/basic/YourSessionIDPill.tsx
index 54dd01adc..0d2fdaddb 100644
--- a/ts/components/basic/YourSessionIDPill.tsx
+++ b/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 = () => {
diff --git a/ts/components/leftpane/LeftPaneSectionHeader.tsx b/ts/components/leftpane/LeftPaneSectionHeader.tsx
index 88a5f74fb..78a807474 100644
--- a/ts/components/leftpane/LeftPaneSectionHeader.tsx
+++ b/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
-        text={window.i18n('recoveryPhraseRevealButtonText')}
-        onClick={showRecoveryPhraseModal}
-        dataTestId="reveal-recovery-phrase"
-      />
+      <Flex container={true} alignItems="center" justifyContent="center">
+        <SessionButton
+          text={window.i18n('recoveryPhraseRevealButtonText')}
+          onClick={showRecoveryPhraseModal}
+          dataTestId="reveal-recovery-phrase"
+        />
+      </Flex>
     </StyledBannerInner>
   );
 };
diff --git a/ts/components/leftpane/overlay/OverlayMessage.tsx b/ts/components/leftpane/overlay/OverlayMessage.tsx
index 59f113574..779bfb8b2 100644
--- a/ts/components/leftpane/overlay/OverlayMessage.tsx
+++ b/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} />