From 38e1b621353262186c46779bbe6bee4d862e30ca Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Sat, 7 Feb 2026 10:06:08 -0600
Subject: [PATCH] make buttons sticky at bottom of sections

---
 .../config-form/sections/BaseSection.tsx      | 115 ++++++++++--------
 web/src/pages/Settings.tsx                    |   2 +-
 2 files changed, 65 insertions(+), 52 deletions(-)

diff --git a/web/src/components/config-form/sections/BaseSection.tsx b/web/src/components/config-form/sections/BaseSection.tsx
index 4a417f85b..6a76f358c 100644
--- a/web/src/components/config-form/sections/BaseSection.tsx
+++ b/web/src/components/config-form/sections/BaseSection.tsx
@@ -47,7 +47,7 @@ import {
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
 import { applySchemaDefaults } from "@/lib/config-schema";
-import { isJsonObject } from "@/lib/utils";
+import { cn, isJsonObject } from "@/lib/utils";
 import { ConfigSectionData, JsonObject, JsonValue } from "@/types/configForm";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
 import RestartDialog from "@/components/overlay/dialog/RestartDialog";
@@ -849,65 +849,72 @@ export function ConfigSection({
       />
 
       {/* Save button */}
-      <div className="flex items-center justify-between pt-2">
-        <div className="flex items-center gap-2">
-          {hasChanges && (
-            <span className="text-sm text-danger">
-              {t("unsavedChanges", {
-                ns: "views/settings",
-                defaultValue: "You have unsaved changes",
-              })}
-            </span>
+      <div className="sticky bottom-0 z-50 w-full border-t border-secondary bg-background pb-5 pt-0">
+        <div
+          className={cn(
+            "flex flex-col items-center gap-4 pt-2 md:flex-row",
+            hasChanges ? "justify-between" : "justify-end",
           )}
-        </div>
-        <div className="flex items-center gap-2">
-          {((level === "camera" && isOverridden) || level === "global") &&
-            !hasChanges && (
+        >
+          {hasChanges && (
+            <div className="flex items-center gap-2">
+              <span className="text-sm text-danger">
+                {t("unsavedChanges", {
+                  ns: "views/settings",
+                  defaultValue: "You have unsaved changes",
+                })}
+              </span>
+            </div>
+          )}
+          <div className="flex w-full items-center gap-2 md:w-auto">
+            {((level === "camera" && isOverridden) || level === "global") &&
+              !hasChanges && (
+                <Button
+                  onClick={() => setIsResetDialogOpen(true)}
+                  variant="outline"
+                  disabled={isSaving || disabled}
+                  className="flex flex-1 gap-2"
+                >
+                  {level === "global"
+                    ? t("button.resetToDefault", {
+                        ns: "common",
+                        defaultValue: "Reset to Default",
+                      })
+                    : t("button.resetToGlobal", {
+                        ns: "common",
+                        defaultValue: "Reset to Global",
+                      })}
+                </Button>
+              )}
+            {hasChanges && (
               <Button
-                onClick={() => setIsResetDialogOpen(true)}
+                onClick={handleReset}
                 variant="outline"
                 disabled={isSaving || disabled}
-                className="flex flex-1 gap-2"
+                className="flex min-w-36 flex-1 gap-2"
               >
-                {level === "global"
-                  ? t("button.resetToDefault", {
-                      ns: "common",
-                      defaultValue: "Reset to Default",
-                    })
-                  : t("button.resetToGlobal", {
-                      ns: "common",
-                      defaultValue: "Reset to Global",
-                    })}
+                {t("undo", { ns: "common", defaultValue: "Undo" })}
               </Button>
             )}
-          {hasChanges && (
             <Button
-              onClick={handleReset}
-              variant="outline"
-              disabled={isSaving || disabled}
+              onClick={handleSave}
+              variant="select"
+              disabled={!hasChanges || isSaving || disabled}
               className="flex min-w-36 flex-1 gap-2"
             >
-              {t("undo", { ns: "common", defaultValue: "Undo" })}
+              {isSaving ? (
+                <>
+                  <ActivityIndicator className="h-4 w-4" />
+                  {t("button.saving", {
+                    ns: "common",
+                    defaultValue: "Saving...",
+                  })}
+                </>
+              ) : (
+                <>{t("button.save", { ns: "common", defaultValue: "Save" })}</>
+              )}
             </Button>
-          )}
-          <Button
-            onClick={handleSave}
-            variant="select"
-            disabled={!hasChanges || isSaving || disabled}
-            className="flex min-w-36 flex-1 gap-2"
-          >
-            {isSaving ? (
-              <>
-                <ActivityIndicator className="h-4 w-4" />
-                {t("button.saving", {
-                  ns: "common",
-                  defaultValue: "Saving...",
-                })}
-              </>
-            ) : (
-              <>{t("button.save", { ns: "common", defaultValue: "Save" })}</>
-            )}
-          </Button>
+          </div>
         </div>
       </div>
 
@@ -1005,7 +1012,10 @@ export function ConfigSection({
                 {showOverrideIndicator &&
                   level === "camera" &&
                   isOverridden && (
-                    <Badge variant="secondary" className="text-xs">
+                    <Badge
+                      variant="secondary"
+                      className="cursor-default border-2 border-selected text-xs text-primary-variant"
+                    >
                       {t("button.overridden", {
                         ns: "common",
                         defaultValue: "Overridden",
@@ -1013,7 +1023,10 @@ export function ConfigSection({
                     </Badge>
                   )}
                 {hasChanges && (
-                  <Badge variant="outline" className="text-xs">
+                  <Badge
+                    variant="secondary"
+                    className="cursor-default bg-danger text-xs text-white hover:bg-danger"
+                  >
                     {t("modified", { ns: "common", defaultValue: "Modified" })}
                   </Badge>
                 )}
diff --git a/web/src/pages/Settings.tsx b/web/src/pages/Settings.tsx
index 4c1225ca9..dbf268eed 100644
--- a/web/src/pages/Settings.tsx
+++ b/web/src/pages/Settings.tsx
@@ -1031,7 +1031,7 @@ export default function Settings() {
           </SidebarContent>
         </Sidebar>
         <SidebarInset>
-          <div className="scrollbar-container mb-24 flex-1 overflow-y-auto p-2 pr-0">
+          <div className="scrollbar-container mb-16 flex-1 overflow-y-auto p-2 pr-0">
             {(() => {
               const CurrentComponent = getCurrentComponent(page);
               if (!CurrentComponent) return null;