Theme scrollbars with tailwind-scrollbar (#11723)

web/src/views/live/LiveCameraView.tsx

@@ -610,7 +610,7 @@ function PtzControlPanel({
               <BsThreeDotsVertical />
             </Button>
           </DropdownMenuTrigger>
-          <DropdownMenuContent className="max-h-[40dvh] overflow-y-auto">
+          <DropdownMenuContent className="scrollbar-container max-h-[40dvh] overflow-y-auto">
             {ptz?.presets.map((preset) => {
               return (
                 <DropdownMenuItem

web/src/views/live/LiveDashboardView.tsx

@@ -163,7 +163,7 @@ export default function LiveDashboardView({
 
   return (
     <div
-      className="size-full overflow-y-auto px-1 pt-2 md:p-2"
+      className="scrollbar-container size-full overflow-y-auto px-1 pt-2 md:p-2"
       ref={containerRef}
     >
       {isMobile && (

web/src/views/settings/AuthenticationView.tsx

@@ -88,7 +88,7 @@ export default function AuthenticationView() {
   return (
     <div className="flex size-full flex-col md:flex-row">
       <Toaster position="top-center" closeButton={true} />
-      <div className="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">
+      <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">
         <div className="flex flex-row items-center justify-between gap-2">
           <Heading as="h3" className="my-2">
             Users

web/src/views/settings/GeneralSettingsView.tsx

@@ -58,7 +58,7 @@ export default function GeneralSettingsView() {
     <>
       <div className="flex size-full flex-col md:flex-row">
         <Toaster position="top-center" closeButton={true} />
-        <div className="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">
+        <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">
           <Heading as="h3" className="my-2">
             General Settings
           </Heading>

web/src/views/settings/MasksAndZonesView.tsx

@@ -379,7 +379,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="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:mb-0 md:mr-2 md:mt-0 md:w-3/12">
             {editPane == "zone" && (
               <ZoneEditPane
                 polygons={editingPolygons}

web/src/views/settings/MotionTunerView.tsx

@@ -177,7 +177,7 @@ export default function MotionTunerView({
   return (
     <div className="flex size-full flex-col md:flex-row">
       <Toaster position="top-center" closeButton={true} />
-      <div className="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:mb-0 md:mr-2 md:mt-0 md:w-3/12">
         <Heading as="h3" className="my-2">
           Motion Detection Tuner
         </Heading>

web/src/views/settings/ObjectSettingsView.tsx

@@ -113,7 +113,7 @@ export default function ObjectSettingsView({
   return (
     <div className="flex size-full flex-col md:flex-row">
       <Toaster position="top-center" closeButton={true} />
-      <div className="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:mb-0 md:mr-2 md:mt-0 md:w-3/12">
         <Heading as="h3" className="my-2">
           Debug
         </Heading>
@@ -162,12 +162,10 @@ export default function ObjectSettingsView({
                         </div>
                       </div>
                       <Switch
-                        key={`${param}-${optionsLoaded}`}
+                        key={`${param}-${selectedCamera}`}
                         className="ml-1"
                         id={param}
-                        checked={
-                          optionsLoaded ? options && options[param] : false
-                        }
+                        checked={options && options[param]}
                         onCheckedChange={(isChecked) => {
                           handleSetOption(param, isChecked);
                         }}
@@ -224,7 +222,7 @@ function ObjectList(objects?: ObjectType[]) {
   );
 
   return (
-    <div className="flex w-full flex-col overflow-y-auto">
+    <div className="scrollbar-container flex w-full flex-col overflow-y-auto">
       {objects && objects.length > 0 ? (
         objects.map((obj) => {
           return (

web/src/views/system/CameraMetrics.tsx

@@ -204,7 +204,7 @@ export default function CameraMetrics({
   }, [statsHistory]);
 
   return (
-    <div className="mt-4 flex size-full flex-col gap-3 overflow-y-auto">
+    <div className="scrollbar-container mt-4 flex size-full flex-col gap-3 overflow-y-auto">
       <div className="text-sm font-medium text-muted-foreground">Overview</div>
       <div className="grid grid-cols-1 md:grid-cols-3">
         {statsHistory.length != 0 ? (

web/src/views/system/GeneralMetrics.tsx

@@ -344,7 +344,7 @@ export default function GeneralMetrics({
     <>
       <VainfoDialog showVainfo={showVainfo} setShowVainfo={setShowVainfo} />
 
-      <div className="mt-4 flex size-full flex-col overflow-y-auto">
+      <div className="scrollbar-container mt-4 flex size-full flex-col overflow-y-auto">
         <div className="text-sm font-medium text-muted-foreground">
           Detectors
         </div>

web/src/views/system/StorageMetrics.tsx

@@ -42,7 +42,7 @@ export default function StorageMetrics({
   }
 
   return (
-    <div className="mt-4 flex size-full flex-col overflow-y-auto">
+    <div className="scrollbar-container mt-4 flex size-full flex-col overflow-y-auto">
       <div className="text-sm font-medium text-muted-foreground">Overview</div>
       <div className="mt-4 grid grid-cols-1 gap-2 sm:grid-cols-3">
         <div className="flex-col rounded-lg bg-background_alt p-2.5 md:rounded-2xl">