fix: fine tune the save button layout

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

Hide file tree

Showing 2 changed files with 24 additions and 16 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.formWrapper}>
+        <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,5 +1,5 @@
 .setting {
-  max-height: 78vh;
+  max-height: fit-content;
   overflow-y: auto;
 
   :global .ant-input-group-addon {
@@ -28,3 +28,9 @@
     border: 1px solid #f15354;
   }
 }
+
+.formWrapper{
+  display: flex;
+  flex-direction: column;
+  max-height: calc(100vh - 200px);
+}