Refactor Settings UI (#20392)

* refactor with sidebar and mobile page

* sidebar spacing and color tweaks

* layout tweaks

* move camera switch button to header

* improve mobile

* remove back button on mobile page header

* mobile fixes

* remove debug

* don't use mobilepage

* more mobile tweaks

* use mobile page for components

* add optional actions to mobile page header for top right buttons

* fix alignment

* use page toggle

* tweaks

* sidebar inset tweaks

* move triggers to notifications sub menu

* consistency

* fix padding

* more padding fixes

* navigate history

web/src/views/settings/MasksAndZonesView.tsx

@@ -433,7 +433,7 @@ export default function MasksAndZonesView({
       {cameraConfig && editingPolygons && (
         <div className="flex size-full flex-col md:flex-row">
           <Toaster position="top-center" closeButton={true} />
-          <div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mb-0 md:mr-2 md:mt-0 md:w-3/12">
+          <div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mr-2 md:mt-0 md:w-3/12">
             {editPane == "zone" && (
               <ZoneEditPane
                 polygons={editingPolygons}
@@ -482,7 +482,7 @@ export default function MasksAndZonesView({
             )}
             {editPane === undefined && (
               <>
-                <Heading as="h3" className="my-2">
+                <Heading as="h4" className="mb-2">
                   {t("menu.masksAndZones")}
                 </Heading>
                 <div className="flex w-full flex-col">