From e281a277f364b71d001891bc5d184aff3ef21635 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Wed, 4 Mar 2026 11:14:50 -0600
Subject: [PATCH] collapsible settings sidebar

use the preexisting control available with shadcn's sidebar (cmd/ctrl-B) to give users more space to set masks/zones on smaller screens
---
 .../config-form/sections/BaseSection.tsx          |  2 +-
 web/src/pages/Settings.tsx                        | 15 ++++-----------
 web/src/views/settings/UiSettingsView.tsx         |  2 +-
 3 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/web/src/components/config-form/sections/BaseSection.tsx b/web/src/components/config-form/sections/BaseSection.tsx
index 6340691ce..047edd449 100644
--- a/web/src/components/config-form/sections/BaseSection.tsx
+++ b/web/src/components/config-form/sections/BaseSection.tsx
@@ -831,7 +831,7 @@ export function ConfigSection({
 
       <div
         className={cn(
-          "w-full border-t border-secondary bg-background pb-5 pt-0",
+          "w-full border-t border-secondary bg-background pt-0",
           !noStickyButtons && "sticky bottom-0 z-50",
         )}
       >
diff --git a/web/src/pages/Settings.tsx b/web/src/pages/Settings.tsx
index e686ea241..cdf0caa68 100644
--- a/web/src/pages/Settings.tsx
+++ b/web/src/pages/Settings.tsx
@@ -475,12 +475,6 @@ const CAMERA_SELECT_BUTTON_PAGES = [
 
 const ALLOWED_VIEWS_FOR_VIEWER = ["ui", "debug", "notifications"];
 
-const LARGE_BOTTOM_MARGIN_PAGES = [
-  "masksAndZones",
-  "motionTuner",
-  "maintenance",
-];
-
 // keys for camera sections
 const CAMERA_SECTION_MAPPING: Record<string, SettingsType> = {
   detect: "cameraDetect",
@@ -1355,9 +1349,9 @@ export default function Settings() {
           )}
         </div>
       </div>
-      <SidebarProvider>
-        <Sidebar variant="inset" className="relative mb-8 pl-0 pt-0">
-          <SidebarContent className="scrollbar-container mb-24 overflow-y-auto border-r-[1px] border-secondary bg-background py-2">
+      <SidebarProvider className="relative h-full min-h-0 flex-1">
+        <Sidebar variant="inset" className="absolute h-full pl-0 pt-0">
+          <SidebarContent className="scrollbar-container overflow-y-auto border-r-[1px] border-secondary bg-background py-2">
             <SidebarMenu>
               {settingsGroups.map((group) => {
                 const filteredItems = group.items.filter((item) =>
@@ -1445,8 +1439,7 @@ export default function Settings() {
         <SidebarInset>
           <div
             className={cn(
-              "scrollbar-container mb-16 flex-1 overflow-y-auto p-2 pr-0",
-              LARGE_BOTTOM_MARGIN_PAGES.includes(pageToggle) && "mb-24",
+              "scrollbar-container flex-1 overflow-y-auto pl-2 pr-0 pt-2",
             )}
           >
             {(() => {
diff --git a/web/src/views/settings/UiSettingsView.tsx b/web/src/views/settings/UiSettingsView.tsx
index 5b04aa0fe..60aaffabf 100644
--- a/web/src/views/settings/UiSettingsView.tsx
+++ b/web/src/views/settings/UiSettingsView.tsx
@@ -210,7 +210,7 @@ export default function UiSettingsView() {
   ];
 
   return (
-    <div className="flex size-full flex-col md:pb-8">
+    <div className="flex size-full flex-col">
       <Toaster position="top-center" closeButton={true} />
       <Heading as="h4" className="mb-3">
         {t("general.title")}