From a8a564b4fe82f79cb184fa95eb63cf1637860fdf Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Mon, 12 Feb 2024 12:01:01 +1100
Subject: [PATCH] fix: make the Set disappearing msg button sticky

---
 .../OverlayDisappearingMessages.tsx           | 45 ++++++++++---------
 1 file changed, 25 insertions(+), 20 deletions(-)

diff --git a/ts/components/conversation/right-panel/overlay/disappearing-messages/OverlayDisappearingMessages.tsx b/ts/components/conversation/right-panel/overlay/disappearing-messages/OverlayDisappearingMessages.tsx
index 44e63aab0..d68f7d544 100644
--- a/ts/components/conversation/right-panel/overlay/disappearing-messages/OverlayDisappearingMessages.tsx
+++ b/ts/components/conversation/right-panel/overlay/disappearing-messages/OverlayDisappearingMessages.tsx
@@ -18,17 +18,22 @@ import {
 import { ReleasedFeatures } from '../../../../../util/releaseFeature';
 import { Flex } from '../../../../basic/Flex';
 import { SessionButton } from '../../../../basic/SessionButton';
-import { SpacerLG, SpacerXL } from '../../../../basic/Text';
+import { SpacerLG } from '../../../../basic/Text';
 import { Header, HeaderSubtitle, HeaderTitle, StyledScrollContainer } from '../components';
 import { DisappearingModes } from './DisappearingModes';
 import { TimeOptions } from './TimeOptions';
 
-const StyledContainer = styled(Flex)`
+const StyledButtonContainer = styled.div`
+  background: linear-gradient(0deg, black, transparent);
+  position: sticky;
+  width: 100%;
+  bottom: 0px;
+
   .session-button {
     font-weight: 500;
     min-width: 90px;
     width: fit-content;
-    margin: 35px auto 0;
+    margin: 35px auto 10px;
   }
 `;
 
@@ -160,7 +165,7 @@ export const OverlayDisappearingMessages = () => {
 
   return (
     <StyledScrollContainer>
-      <StyledContainer container={true} flexDirection={'column'} alignItems={'center'}>
+      <Flex container={true} flexDirection={'column'} alignItems={'center'}>
         <Header>
           <HeaderTitle>{window.i18n('disappearingMessages')}</HeaderTitle>
           <HeaderSubtitle>
@@ -205,22 +210,22 @@ export const OverlayDisappearingMessages = () => {
             </StyledNonAdminDescription>
           </>
         )}
-        <SessionButton
-          onClick={handleSetMode}
-          disabled={
-            singleMode
-              ? disappearingModeOptions[singleMode]
-              : modeSelected
-              ? disappearingModeOptions[modeSelected]
-              : undefined
-          }
-          dataTestId={'disappear-set-button'}
-        >
-          {window.i18n('set')}
-        </SessionButton>
-        <SpacerLG />
-        <SpacerXL />
-      </StyledContainer>
+        <StyledButtonContainer>
+          <SessionButton
+            onClick={handleSetMode}
+            disabled={
+              singleMode
+                ? disappearingModeOptions[singleMode]
+                : modeSelected
+                ? disappearingModeOptions[modeSelected]
+                : undefined
+            }
+            dataTestId={'disappear-set-button'}
+          >
+            {window.i18n('set')}
+          </SessionButton>
+        </StyledButtonContainer>
+      </Flex>
     </StyledScrollContainer>
   );
 };