From 638c9186dee206698b86446029d0b17d8f82354b Mon Sep 17 00:00:00 2001
From: "andy.lee" <andy.lee@suse.com>
Date: Wed, 8 May 2024 11:24:50 +0800
Subject: [PATCH] fix: fine tune the save button layout

Signed-off-by: andy.lee <andy.lee@suse.com>
---
 src/routes/setting/setting.js   | 32 +++++++++---------
 src/routes/setting/setting.less | 57 ++++++++++++++++++---------------
 2 files changed, 49 insertions(+), 40 deletions(-)

diff --git a/src/routes/setting/setting.js b/src/routes/setting/setting.js
index 67e16095..cf60175b 100644
--- 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
index 26845d2c..0bbbbf0c 100644
--- 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;
+    }
   }
 }
+