make apply button to be sticky to bottom

daostack · Dec 18, 2023 · 062f022 · 062f022
1 parent e1d52a8
commit 062f022
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 12 deletions.
diff --git a/...common/components/DiscussionFeedCard/components/LinkSpaceModal/LinkSpaceModal.module.scss b/...common/components/DiscussionFeedCard/components/LinkSpaceModal/LinkSpaceModal.module.scss
@@ -48,16 +48,23 @@
   }
 }
 
+.submitButtonWrapper {
+  padding: 1.5rem 0;
+  display: flex;
+  justify-content: flex-end;
+
+  @include tablet {
+    padding-bottom: 0;
+  }
+}
+
 .submitButton {
   --btn-w: 100%;
 
   max-width: 9.75rem;
-  margin-top: auto;
-  align-self: flex-end;
 
   @include tablet {
     max-width: 100%;
-    align-self: unset;
   }
 }
 

diff --git a/src/pages/common/components/DiscussionFeedCard/components/LinkSpaceModal/LinkSpaceModal.tsx b/src/pages/common/components/DiscussionFeedCard/components/LinkSpaceModal/LinkSpaceModal.tsx
@@ -1,7 +1,7 @@
 import React, { FC, ReactElement, useEffect, useState } from "react";
 import { useSelector } from "react-redux";
 import { selectUser } from "@/pages/Auth/store/selectors";
-import { Modal } from "@/shared/components";
+import { Modal, ModalFooter } from "@/shared/components";
 import { useNotification } from "@/shared/hooks";
 import { useStreamLinking } from "@/shared/hooks/useCases";
 import { Button, ButtonVariant, Loader } from "@/shared/ui-kit";
@@ -65,14 +65,18 @@ const LinkSpaceModal: FC<DirectMessageModalProps> = (props) => {
           originalCommonId={originalCommonId}
           linkedCommonIds={linkedCommonIds}
         />
-        <Button
-          className={styles.submitButton}
-          variant={ButtonVariant.PrimaryPink}
-          disabled={!activeItemId}
-          onClick={handleSubmit}
-        >
-          Apply
-        </Button>
+        <ModalFooter sticky>
+          <div className={styles.submitButtonWrapper}>
+            <Button
+              className={styles.submitButton}
+              variant={ButtonVariant.PrimaryPink}
+              disabled={!activeItemId}
+              onClick={handleSubmit}
+            >
+              Apply
+            </Button>
+          </div>
+        </ModalFooter>
       </>
     );
   };