From c2986aa3f1863994130432a4eadf87ff462fc7cc Mon Sep 17 00:00:00 2001
From: Adam Shiervani <adam.shiervani@gmail.com>
Date: Tue, 20 May 2025 14:23:09 +0200
Subject: [PATCH] refactor(ui): enhance Modal and network settings components

- Add stable scrollbar gutter to Modal component
- Refactor custom domain input handling and layout adjustments
---
 ui/src/components/Modal.tsx                   |  4 +-
 .../routes/devices.$id.settings.network.tsx   | 39 +++++++++----------
 2 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/ui/src/components/Modal.tsx b/ui/src/components/Modal.tsx
index 1772011..d9433df 100644
--- a/ui/src/components/Modal.tsx
+++ b/ui/src/components/Modal.tsx
@@ -20,7 +20,9 @@ const Modal = React.memo(function Modal({
         transition
         className="fixed inset-0 bg-gray-500/75 transition-opacity data-closed:opacity-0 data-enter:duration-500 data-leave:duration-200 data-enter:ease-out data-leave:ease-in dark:bg-slate-900/90"
       />
-      <div className="fixed inset-0 z-20 w-screen overflow-y-auto">
+      <div className="fixed inset-0 z-20 w-screen overflow-y-auto" style={{
+        scrollbarGutter: 'stable'
+      }}>
         {/* TODO: This doesn't work well with other-sessions */}
         <div className="flex min-h-full items-end justify-center p-4 text-center md:items-baseline md:p-4">
           <DialogPanel
diff --git a/ui/src/routes/devices.$id.settings.network.tsx b/ui/src/routes/devices.$id.settings.network.tsx
index b15b029..167cf0b 100644
--- a/ui/src/routes/devices.$id.settings.network.tsx
+++ b/ui/src/routes/devices.$id.settings.network.tsx
@@ -16,7 +16,7 @@ import {
 import { useJsonRpc } from "@/hooks/useJsonRpc";
 import { Button } from "@components/Button";
 import { GridCard } from "@components/Card";
-import InputField from "@components/InputField";
+import InputField, { InputFieldWithLabel } from "@components/InputField";
 import { SelectMenuBasic } from "@/components/SelectMenuBasic";
 import { SettingsPageHeader } from "@/components/SettingsPageheader";
 import Fieldset from "@/components/Fieldset";
@@ -115,6 +115,14 @@ export default function SettingsNetworkRoute() {
     });
   }, [send]);
 
+  const getNetworkState = useCallback(() => {
+    send("getNetworkState", {}, resp => {
+      if ("error" in resp) return;
+      console.log(resp.result);
+      setNetworkState(resp.result as NetworkState);
+    });
+  }, [send, setNetworkState]);
+
   const setNetworkSettingsRemote = useCallback(
     (settings: NetworkSettings) => {
       setNetworkSettingsLoaded(false);
@@ -130,21 +138,14 @@ export default function SettingsNetworkRoute() {
         // We need to update the firstNetworkSettings ref to the new settings so we can use it to determine if the settings have changed
         firstNetworkSettings.current = resp.result as NetworkSettings;
         setNetworkSettings(resp.result as NetworkSettings);
+        getNetworkState();
         setNetworkSettingsLoaded(true);
         notifications.success("Network settings saved");
       });
     },
-    [send],
+    [getNetworkState, send],
   );
 
-  const getNetworkState = useCallback(() => {
-    send("getNetworkState", {}, resp => {
-      if ("error" in resp) return;
-      console.log(resp.result);
-      setNetworkState(resp.result as NetworkState);
-    });
-  }, [send, setNetworkState]);
-
   const handleRenewLease = useCallback(() => {
     send("renewDHCPLease", {}, resp => {
       if ("error" in resp) {
@@ -255,7 +256,7 @@ export default function SettingsNetworkRoute() {
         </div>
 
         <div className="space-y-4">
-          <div className="space-y-4">
+          <div className="space-y-1">
             <SettingsItem
               title="Domain"
               description="Network domain suffix for the device"
@@ -274,19 +275,17 @@ export default function SettingsNetworkRoute() {
               </div>
             </SettingsItem>
             {selectedDomainOption === "custom" && (
-              <div className="flex items-center justify-between gap-x-2">
-                <InputField
+              <div className="mt-2 w-1/3 border-l border-slate-800/10 pl-4 dark:border-slate-300/20">
+                <InputFieldWithLabel
                   size="SM"
                   type="text"
+                  label="Custom Domain"
                   placeholder="home"
                   value={customDomain}
-                  onChange={e => setCustomDomain(e.target.value)}
-                />
-                <Button
-                  size="SM"
-                  theme="primary"
-                  text="Set"
-                  onClick={() => handleCustomDomainChange(customDomain)}
+                  onChange={e => {
+                    setCustomDomain(e.target.value);
+                    handleCustomDomainChange(e.target.value);
+                  }}
                 />
               </div>
             )}