rework live dashboard grid layout and add natural mode

web/src/components/overlay/ImageShadowOverlay.tsx

@@ -12,13 +12,13 @@ export function ImageShadowOverlay({
     <>
       <div
         className={cn(
-          "pointer-events-none absolute inset-x-0 top-0 z-10 h-[30%] w-full rounded-lg bg-gradient-to-b from-black/20 to-transparent",
+          "pointer-events-none absolute inset-x-0 top-0 z-10 h-[30%] w-full bg-gradient-to-b from-black/20 to-transparent",
           upperClassName,
         )}
       />
       <div
         className={cn(
-          "pointer-events-none absolute inset-x-0 bottom-0 z-10 h-[10%] w-full rounded-lg bg-gradient-to-t from-black/20 to-transparent",
+          "pointer-events-none absolute inset-x-0 bottom-0 z-10 h-[10%] w-full bg-gradient-to-t from-black/20 to-transparent",
           lowerClassName,
         )}
       />

web/src/components/overlay/dialog/ImportUiSettingsDialog.tsx

@@ -10,10 +10,11 @@ import {
 } from "@/components/ui/dialog";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
-import { LuTriangleAlert } from "react-icons/lu";
+import { LuInfo, LuTriangleAlert } from "react-icons/lu";
 import FilterSwitch from "@/components/filter/FilterSwitch";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
 import {
+  importedLayoutsNaturalAspect,
   ImportSummary,
   TransferSection,
   UiSettingsFile,
@@ -25,6 +26,7 @@ type ImportUiSettingsDialogProps = {
   fileName: string;
   file: UiSettingsFile;
   summary: ImportSummary;
+  currentNaturalAspect: boolean;
   onConfirm: (sections: Record<TransferSection, boolean>) => Promise<void>;
 };
 
@@ -34,6 +36,7 @@ export default function ImportUiSettingsDialog({
   fileName,
   file,
   summary,
+  currentNaturalAspect,
   onConfirm,
 }: ImportUiSettingsDialogProps) {
   const { t } = useTranslation(["views/settings", "common"]);
@@ -90,6 +93,16 @@ export default function ImportUiSettingsDialog({
     [sections.streaming, summary.unknownCameras],
   );
 
+  // importing layouts also applies the tile-sizing mode they were built for
+  const layoutsModeChange = useMemo(() => {
+    if (!sections.layouts) {
+      return null;
+    }
+
+    const mode = importedLayoutsNaturalAspect(file);
+    return mode === null || mode === currentNaturalAspect ? null : mode;
+  }, [sections.layouts, file, currentNaturalAspect]);
+
   const handleConfirm = useCallback(async () => {
     setIsImporting(true);
     await onConfirm(sections);
@@ -156,6 +169,19 @@ export default function ImportUiSettingsDialog({
           />
         </div>
 
+        {layoutsModeChange !== null && (
+          <Alert variant="info">
+            <LuInfo className="size-5" />
+            <AlertDescription>
+              {t(
+                layoutsModeChange
+                  ? "general.backupRestore.importDialog.layoutsModeOn"
+                  : "general.backupRestore.importDialog.layoutsModeOff",
+              )}
+            </AlertDescription>
+          </Alert>
+        )}
+
         {(visibleUnknownGroups.length > 0 ||
           visibleUnknownCameras.length > 0) && (
           <Alert variant="warning">