fix: fine tune the save button layout

Signed-off-by: andy.lee <andy.lee@suse.com>
longhorn · May 9, 2024 · 638c918 · 638c918
1 parent 26fb6b4
commit 638c918
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 40 deletions.
diff --git a/src/routes/setting/setting.js b/src/routes/setting/setting.js
@@ -150,21 +150,23 @@ const form = ({
 
   return (
     <Spin spinning={saving || loading} style={{ height: '100vh' }}>
-      <Form className={styles.setting}>
-        {settings}
-      </Form>
-       {settings.length > 0 && (
-          <div style={{ textAlign: 'center', position: 'sticky', marginTop: '1rem' }}>
-            <Button
-              onClick={handleOnSubmit}
-              loading={saving}
-              type="primary"
-              htmlType="submit"
-            >
-              Save
-            </Button>
-          </div>
-       )}
+      <div className={styles.wrapper}>
+        <Form className={styles.setting}>
+          {settings}
+        </Form>
+        {settings.length > 0 && (
+            <div style={{ textAlign: 'center', position: 'sticky', marginTop: '1rem' }}>
+              <Button
+                onClick={handleOnSubmit}
+                loading={saving}
+                type="primary"
+                htmlType="submit"
+              >
+                Save
+              </Button>
+            </div>
+        )}
+       </div>
     </Spin>
   )
 }

diff --git a/src/routes/setting/setting.less b/src/routes/setting/setting.less
@@ -1,30 +1,37 @@
-.setting {
-  max-height: 78vh;
-  overflow-y: auto;
+.wrapper{
+  display: flex;
+  flex-direction: column;
+  max-height: calc(100vh - 200px);
 
-  :global .ant-input-group-addon {
-    text-transform: capitalize;
-  }
-  .fieldset {
-    border: 1px solid #f2f4f5;
-    position: relative;
-    margin: 24px 0px;
-    padding: 16px 16px 0 16px;
-    > .fieldsetLabel {
-      position: absolute;
-      transform: translateY(-120%);
+  .setting {
+    max-height: fit-content;
+    overflow-y: auto;
+
+    :global .ant-input-group-addon {
       text-transform: capitalize;
-      display: inline-block;
-      padding: 0 24px;
-      white-space: nowrap;
-      text-align: center;
-      font-weight: 700;
-      color: rgb(173, 172, 172);
-      font-size: 18px;
-      background-color: #ffffff;
     }
-  }
-  .dangerZone {
-    border: 1px solid #f15354;
+    .fieldset {
+      border: 1px solid #f2f4f5;
+      position: relative;
+      margin: 24px 0px;
+      padding: 16px 16px 0 16px;
+      > .fieldsetLabel {
+        position: absolute;
+        transform: translateY(-120%);
+        text-transform: capitalize;
+        display: inline-block;
+        padding: 0 24px;
+        white-space: nowrap;
+        text-align: center;
+        font-weight: 700;
+        color: rgb(173, 172, 172);
+        font-size: 18px;
+        background-color: #ffffff;
+      }
+    }
+    .dangerZone {
+      border: 1px solid #f15354;
+    }
   }
 }
+