feat(console): sticky footer in details page (#486)

packages/console/src/pages/ApiResourceDetails/index.module.scss

@@ -1,12 +1,6 @@
 @use '@/scss/underscore' as _;
 
-.container {
-  > *:not(:first-child) {
-    margin-top: _.unit(4);
-  }
-}
-
-.container .backButton {
+.backButton {
   display: flex;
   align-items: center;
 
@@ -15,7 +9,7 @@
   }
 }
 
-.container .header {
+.header {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -46,7 +40,9 @@
   }
 }
 
-.container .body {
+.body {
+  padding-bottom: 0;
+
   > :first-child {
     margin-top: 0;
   }
@@ -56,16 +52,10 @@
   }
 
   .fields {
-    padding-bottom: _.unit(16);
-    border-bottom: 1px solid var(--color-border);
+    padding-bottom: _.unit(10);
   }
 
   .textField {
     @include _.form-text-field;
   }
-
-  .submit {
-    margin-top: _.unit(6);
-    text-align: right;
-  }
 }

packages/console/src/pages/ApiResourceDetails/index.tsx

@@ -20,6 +20,7 @@ import TextInput from '@/components/TextInput';
 import useApi, { RequestError } from '@/hooks/use-api';
 import Delete from '@/icons/Delete';
 import More from '@/icons/More';
+import * as detailsStyles from '@/scss/details.module.scss';
 import * as modalStyles from '@/scss/modal.module.scss';
 
 import DeleteForm from './components/DeleteForm';
@@ -72,7 +73,7 @@ const ApiResourceDetails = () => {
   });
 
   return (
-    <div className={styles.container}>
+    <div className={detailsStyles.container}>
       <BackLink to="/api-resources">{t('api_resource_details.back_to_api_resources')}</BackLink>
 
       {isLoading && <div>loading</div>}
@@ -155,7 +156,7 @@ const ApiResourceDetails = () => {
                   />
                 </FormField>
               </div>
-              <div className={styles.submit}>
+              <div className={detailsStyles.footer}>
                 <Button
                   disabled={isSubmitting}
                   htmlType="submit"

packages/console/src/pages/ApplicationDetails/index.module.scss

@@ -1,16 +1,26 @@
 @use '@/scss/underscore' as _;
 
-.container {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
+.body {
+  padding-bottom: 0;
 
-  > :not(:first-child) {
-    margin-top: _.unit(4);
+  > :first-child {
+    margin-top: 0;
+  }
+
+  .form {
+    margin-top: _.unit(8);
+  }
+
+  .fields {
+    padding-bottom: _.unit(10);
+  }
+
+  .textField {
+    @include _.form-text-field;
   }
 }
 
-.container .header {
+.header {
   flex: 0;
   display: flex;
   align-items: center;
@@ -70,48 +80,3 @@
     }
   }
 }
-
-.container .body {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-
-  .form {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    overflow: auto;
-
-    > *:not(:first-child) {
-      margin-top: _.unit(6);
-    }
-
-    .fields {
-      flex: 1;
-      border-bottom: 1px solid var(--color-border);
-      padding: _.unit(6) 0;
-      overflow: auto;
-
-      > div {
-        @include _.form-text-field;
-      }
-
-      .textField {
-        @include _.form-text-field;
-      }
-
-      .listFields {
-        > *:not(:first-child) {
-          margin-top: _.unit(1);
-        }
-      }
-    }
-
-    .submit {
-      flex: 0;
-      text-align: right;
-    }
-  }
-}

packages/console/src/pages/ApplicationDetails/index.tsx

@@ -22,6 +22,7 @@ import TextInput from '@/components/TextInput';
 import useApi, { RequestError } from '@/hooks/use-api';
 import Delete from '@/icons/Delete';
 import More from '@/icons/More';
+import * as detailsStyles from '@/scss/details.module.scss';
 import * as modalStyles from '@/scss/modal.module.scss';
 import { applicationTypeI18nKey } from '@/types/applications';
 import { noSpaceRegex } from '@/utilities/regex';
@@ -166,7 +167,7 @@ const ApplicationDetails = () => {
   );
 
   return (
-    <div className={styles.container}>
+    <div className={detailsStyles.container}>
       <BackLink to="/applications">{t('application_details.back_to_applications')}</BackLink>
       {isLoading && <div>loading</div>}
       {error && <div>{`error occurred: ${error.body.message}`}</div>}
@@ -241,7 +242,7 @@ const ApplicationDetails = () => {
               <div className={styles.fields}>
                 {isAdvancedSettings ? AdvancedSettingsPage : SettingsPage}
               </div>
-              <div className={styles.submit}>
+              <div className={detailsStyles.footer}>
                 <Button
                   disabled={isSubmitting}
                   htmlType="submit"

packages/console/src/pages/ConnectorDetails/index.module.scss

@@ -1,12 +1,6 @@
 @use '@/scss/underscore' as _;
 
-.container {
-  > *:not(:first-child) {
-    margin-top: _.unit(4);
-  }
-}
-
-.container .header {
+.header {
   padding: _.unit(8);
   display: flex;
   align-items: center;
@@ -59,16 +53,8 @@
   }
 }
 
-.container .body {
+.body {
   > :not(:first-child) {
     margin-top: _.unit(4);
   }
 }
-
-.actions {
-  border-top: 1px solid var(--color-border);
-  display: flex;
-  justify-content: right;
-  padding: _.unit(4) 0;
-  margin-top: _.unit(6);
-}

packages/console/src/pages/ConnectorDetails/index.tsx

@@ -20,6 +20,7 @@ import useApi, { RequestError } from '@/hooks/use-api';
 import Delete from '@/icons/Delete';
 import More from '@/icons/More';
 import Reset from '@/icons/Reset';
+import * as detailsStyles from '@/scss/details.module.scss';
 
 import SetupModal from '../Connectors/components/SetupModal';
 import SenderTester from './components/SenderTester';
@@ -95,7 +96,7 @@ const ConnectorDetails = () => {
   };
 
   return (
-    <div className={styles.container}>
+    <div className={detailsStyles.container}>
       <BackLink to="/connectors">{t('connector_details.back_to_connectors')}</BackLink>
       {isLoading && <div>loading</div>}
       {error && <div>{`error occurred: ${error.body.message}`}</div>}
@@ -186,7 +187,7 @@ const ConnectorDetails = () => {
             <SenderTester connectorType={data.metadata.type} />
           )}
           {saveError && <div>{saveError}</div>}
-          <div className={styles.actions}>
+          <div className={detailsStyles.footer}>
             <Button
               type="primary"
               title="admin_console.connector_details.save_changes"

packages/console/src/pages/UserDetails/index.module.scss

@@ -1,12 +1,6 @@
 @use '@/scss/underscore' as _;
 
-.container {
-  > *:not(:first-child) {
-    margin-top: _.unit(4);
-  }
-}
-
-.container .backButton {
+.backButton {
   display: flex;
   align-items: center;
 
@@ -15,7 +9,7 @@
   }
 }
 
-.container .header {
+.header {
   padding: _.unit(8);
   display: flex;
   align-items: center;
@@ -69,7 +63,9 @@
   }
 }
 
-.container .body {
+.body {
+  padding-bottom: 0;
+
   > :first-child {
     margin-top: 0;
   }
@@ -79,16 +75,10 @@
   }
 
   .fields {
-    padding-bottom: _.unit(16);
-    border-bottom: 1px solid var(--color-border);
+    padding-bottom: _.unit(10);
   }
 
   .textField {
     @include _.form-text-field;
   }
-
-  .submit {
-    margin-top: _.unit(6);
-    text-align: right;
-  }
 }

packages/console/src/pages/UserDetails/index.tsx

@@ -22,6 +22,7 @@ import useApi, { RequestError } from '@/hooks/use-api';
 import Delete from '@/icons/Delete';
 import More from '@/icons/More';
 import Reset from '@/icons/Reset';
+import * as detailsStyles from '@/scss/details.module.scss';
 import * as modalStyles from '@/scss/modal.module.scss';
 import { safeParseJson } from '@/utilities/json';
 
@@ -99,7 +100,7 @@ const UserDetails = () => {
   });
 
   return (
-    <div className={styles.container}>
+    <div className={detailsStyles.container}>
       <BackLink to="/users">{t('user_details.back_to_users')}</BackLink>
 
       {isLoading && <div>loading</div>}
@@ -226,7 +227,7 @@ const UserDetails = () => {
                   <CodeEditor height="200px" language="json" value={value} onChange={onChange} />
                 </FormField>
               </div>
-              <div className={styles.submit}>
+              <div className={detailsStyles.footer}>
                 <Button
                   disabled={isSubmitting}
                   htmlType="submit"

packages/console/src/scss/details.module.scss

@@ -0,0 +1,19 @@
+@use '@/scss/underscore' as _;
+
+.container {
+  position: relative;
+
+  > *:not(:first-child) {
+    margin-top: _.unit(4);
+  }
+
+  .footer {
+    border-top: 1px solid var(--color-border);
+    margin-top: _.unit(6);
+    padding: _.unit(6) 0;
+    text-align: right;
+    position: sticky;
+    bottom: 0;
+    background: var(--color-on-primary);
+  }
+}