Merge 8f6e083420 into 6fdd65ddb5

UI tweaks (#23346 )
* remove redundant per-view toasters in settings * add variants to standardize dialog footer button layouts * remove text-md this class name compiles to nothing in tailwind. we used to add it to prevent iOS from zooming when focusing on an input, but that is now solved via the viewport meta in index.html * make wizard footers consistent with dialog footers * consistent destructive button style remove text-white from individual buttons and add it to the variant
2026-06-29 08:31:27 +03:00 · 2026-05-29 23:26:30 -05:00 · 2026-05-29 16:00:30 -06:00 · 2026-05-24 07:45:04 +03:00 · 2026-05-23 22:20:04 +03:00 · 2026-05-23 21:32:02 +03:00
94 changed files with 702 additions and 638 deletions
--- a/.devcontainer/devcontainer.json
+++ b/.devcontainer/devcontainer.json
@ -6,19 +6,8 @@
  "initializeCommand": ".devcontainer/initialize.sh",
  "postCreateCommand": ".devcontainer/post_create.sh",
  "overrideCommand": false,
-  "remoteUser": "vscode",
-  "features": {
-    "ghcr.io/devcontainers/features/common-utils:2": {}
-    // Uncomment the following lines to use ONNX Runtime with CUDA support
-    // "ghcr.io/devcontainers/features/nvidia-cuda:1": {
-    //   "installCudnn": true,
-    //   "installNvtx": true,
-    //   "installToolkit": true,
-    //   "cudaVersion": "12.5",
-    //   "cudnnVersion": "9.4.0.58"
-    // },
-    // "./features/onnxruntime-gpu": {}
-  },
+  "remoteUser": "root",
+  "features": {},
  "forwardPorts": [
    8971,
    5000,
--- a/.devcontainer/post_create.sh
+++ b/.devcontainer/post_create.sh
@ -13,8 +13,12 @@ fi
 # Frigate normal container runs as root, so it have permission to create
 # the folders. But the devcontainer runs as the host user, so we need to
 # create the folders and give the host user permission to write to them.
-sudo mkdir -p /media/frigate
-sudo chown -R "$(id -u):$(id -g)" /media/frigate
+SUDO=""
+if [[ $EUID -ne 0 ]]; then
+  SUDO="sudo"
+fi
+$SUDO mkdir -p /media/frigate
+$SUDO chown -R "$(id -u):$(id -g)" /media/frigate

 # When started as a service, LIBAVFORMAT_VERSION_MAJOR is defined in the
 # s6 service file. For dev, where frigate is started from an interactive
--- a/web/public/locales/en/common.json
+++ b/web/public/locales/en/common.json
@ -21,6 +21,7 @@
    "1hour": "1 hour",
    "12hours": "12 hours",
    "24hours": "24 hours",
+    "custom": "Custom...",
    "pm": "pm",
    "am": "am",
    "yr": "{{time}}yr",
--- a/web/public/locales/en/views/settings.json
+++ b/web/public/locales/en/views/settings.json
@ -1186,8 +1186,15 @@
      "1hour": "Suspend for 1 hour",
      "12hours": "Suspend for 12 hours",
      "24hours": "Suspend for 24 hours",
+      "custom": "Suspend until...",
      "untilRestart": "Suspend until restart"
    },
+    "customSuspension": {
+      "title": "Custom suspension time",
+      "description": "Suspend notifications for this camera until the selected time.",
+      "untilLabel": "Suspend until",
+      "invalidTime": "Pick a time in the future."
+    },
    "cancelSuspension": "Cancel Suspension",
    "toast": {
      "success": {
--- a/web/src/components/auth/AuthForm.tsx
+++ b/web/src/components/auth/AuthForm.tsx
@ -107,7 +107,7 @@ export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
                <FormLabel>{t("form.user")}</FormLabel>
                <FormControl>
                  <Input
-                    className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                    className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
                    autoFocus
                    autoCapitalize="off"
                    autoCorrect="off"
@ -125,7 +125,7 @@ export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
                <FormLabel>{t("form.password")}</FormLabel>
                <FormControl>
                  <Input
-                    className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                    className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
                    type="password"
                    {...field}
                  />
--- a/web/src/components/card/ExportCard.tsx
+++ b/web/src/components/card/ExportCard.tsx
@ -257,7 +257,7 @@ export function ExportCard({
          {editName && (
            <>
              <Input
-                className="text-md mt-3"
+                className="mt-3"
                type="search"
                placeholder={editName?.original}
                value={
@ -275,7 +275,6 @@ export function ExportCard({
              <DialogFooter>
                <Button
                  aria-label={t("editExport.saveExport")}
-                  size="sm"
                  variant="select"
                  disabled={(editName?.update?.length ?? 0) == 0}
                  onClick={() => submitRename()}
--- a/web/src/components/card/SettingsGroupCard.tsx
+++ b/web/src/components/card/SettingsGroupCard.tsx
@ -14,7 +14,7 @@ type SettingsGroupCardProps = {
 export function SettingsGroupCard({ title, children }: SettingsGroupCardProps) {
  return (
    <div className="space-y-4 rounded-lg border border-border/70 bg-card/30 p-4">
-      <div className="text-md border-b border-border/60 pb-4 font-semibold text-primary-variant">
+      <div className="border-b border-border/60 pb-4 font-semibold text-primary-variant">
        {title}
      </div>
      {children}
--- a/web/src/components/chat/ChatSettings.tsx
+++ b/web/src/components/chat/ChatSettings.tsx
@ -48,7 +48,7 @@ export default function ChatSettings({
    <div className="my-3 space-y-5 py-3 md:mt-0 md:py-0">
      <div className="space-y-3">
        <div className="space-y-0.5">
-          <div className="text-md">{t("settings.show_stats.title")}</div>
+          <div>{t("settings.show_stats.title")}</div>
          <div className="text-xs text-muted-foreground">
            {t("settings.show_stats.desc")}
          </div>
@ -77,7 +77,7 @@ export default function ChatSettings({
      <DropdownMenuSeparator />
      <div className="flex items-center justify-between gap-3">
        <div className="space-y-0.5">
-          <Label htmlFor="auto-scroll" className="text-md cursor-pointer">
+          <Label htmlFor="auto-scroll" className="cursor-pointer">
            {t("settings.auto_scroll.title")}
          </Label>
          <div className="text-xs text-muted-foreground">
--- a/web/src/components/classification/ClassificationModelEditDialog.tsx
+++ b/web/src/components/classification/ClassificationModelEditDialog.tsx
@ -485,7 +485,7 @@ export default function ClassificationModelEditDialog({
                            <FormControl>
                              <div className="flex items-center gap-2">
                                <Input
-                                  className="text-md h-8"
+                                  className="h-8"
                                  placeholder={t(
                                    "wizard.step1.classPlaceholder",
                                  )}
--- a/web/src/components/classification/wizard/Step1NameAndDefine.tsx
+++ b/web/src/components/classification/wizard/Step1NameAndDefine.tsx
@ -214,7 +214,7 @@ export default function Step1NameAndDefine({
                </FormLabel>
                <FormControl>
                  <Input
-                    className="text-md h-8"
+                    className="h-8"
                    placeholder={t("wizard.step1.namePlaceholder")}
                    {...field}
                  />
@ -457,7 +457,7 @@ export default function Step1NameAndDefine({
                      <FormControl>
                        <div className="flex items-center gap-2">
                          <Input
-                            className="text-md h-8"
+                            className="h-8"
                            placeholder={t("wizard.step1.classPlaceholder")}
                            {...field}
                          />
@ -489,7 +489,7 @@ export default function Step1NameAndDefine({
        </form>
      </Form>

-      <div className="flex flex-col gap-3 pt-3 sm:flex-row sm:justify-end sm:gap-4">
+      <div className="flex flex-col-reverse gap-2 pt-3 sm:flex-row sm:justify-end">
        <Button type="button" onClick={onCancel} className="sm:flex-1">
          {t("button.cancel", { ns: "common" })}
        </Button>
--- a/web/src/components/classification/wizard/Step2StateArea.tsx
+++ b/web/src/components/classification/wizard/Step2StateArea.tsx
@ -458,7 +458,7 @@ export default function Step2StateArea({
        </div>
      </div>

-      <div className="flex flex-col gap-3 pt-3 sm:flex-row sm:justify-end sm:gap-4">
+      <div className="flex flex-col-reverse gap-2 pt-3 sm:flex-row sm:justify-end">
        <Button type="button" onClick={onBack} className="sm:flex-1">
          {t("button.back", { ns: "common" })}
        </Button>
--- a/web/src/components/classification/wizard/Step3ChooseExamples.tsx
+++ b/web/src/components/classification/wizard/Step3ChooseExamples.tsx
@ -1,4 +1,4 @@
-import { Button } from "@/components/ui/button";
+import { Button, buttonVariants } from "@/components/ui/button";
 import { useTranslation } from "react-i18next";
 import { useState, useEffect, useCallback, useMemo } from "react";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
@ -540,7 +540,7 @@ export default function Step3ChooseExamples({
            </AlertDialogCancel>
            <AlertDialogAction
              onClick={doRefresh}
-              className="bg-destructive text-white hover:bg-destructive/90"
+              className={cn(buttonVariants({ variant: "destructive" }))}
            >
              {t("button.continue", { ns: "common" })}
            </AlertDialogAction>
@ -693,7 +693,7 @@ export default function Step3ChooseExamples({
      )}

      {!isTraining && (
-        <div className="flex flex-col gap-3 pt-3 sm:flex-row sm:justify-end sm:gap-4">
+        <div className="flex flex-col-reverse gap-2 pt-3 sm:flex-row sm:justify-end">
          <Button type="button" onClick={handleBack} className="sm:flex-1">
            {t("button.back", { ns: "common" })}
          </Button>
--- a/web/src/components/config-form/sectionExtras/NotificationsSettingsExtras.tsx
+++ b/web/src/components/config-form/sectionExtras/NotificationsSettingsExtras.tsx
@ -10,7 +10,6 @@ import {
  FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { Toaster } from "@/components/ui/sonner";
 import { StatusBarMessagesContext } from "@/context/statusbar-provider";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { zodResolver } from "@hookform/resolvers/zod";
@ -24,7 +23,7 @@ import {
  useState,
 } from "react";
 import { useForm } from "react-hook-form";
-import { LuCheck, LuExternalLink, LuX } from "react-icons/lu";
+import { LuCheck, LuChevronDown, LuExternalLink, LuX } from "react-icons/lu";
 import { CiCircleAlert } from "react-icons/ci";
 import { Link } from "react-router-dom";
 import { toast } from "sonner";
@ -36,12 +35,12 @@ import {
  useNotificationTest,
 } from "@/api/ws";
 import {
-  Select,
-  SelectTrigger,
-  SelectValue,
-  SelectContent,
-  SelectItem,
-} from "@/components/ui/select";
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
 import { use24HourTime } from "@/hooks/use-date-utils";
 import FilterSwitch from "@/components/filter/FilterSwitch";
@ -50,6 +49,7 @@ import { Trans, useTranslation } from "react-i18next";
 import { useDateLocale } from "@/hooks/use-date-locale";
 import { useDocDomain } from "@/hooks/use-doc-domain";
 import { CameraNameLabel } from "@/components/camera/FriendlyNameLabel";
+import CustomSuspensionDialog from "@/components/overlay/dialog/CustomSuspensionDialog";
 import { useIsAdmin } from "@/hooks/use-is-admin";
 import { cn } from "@/lib/utils";
 import cloneDeep from "lodash/cloneDeep";
@ -491,7 +491,6 @@ export default function NotificationsSettingsExtras({

  return (
    <div className="flex size-full flex-col md:flex-row">
-      <Toaster position="top-center" closeButton={true} />
      <div className="scrollbar-container order-last mb-2 mt-2 flex h-full w-full flex-col overflow-y-auto px-2 md:order-none">
        <div className={cn("w-full max-w-5xl space-y-6")}>
          {isAdmin && (
@ -521,7 +520,7 @@ export default function NotificationsSettingsExtras({
                            <FormControl>
                              <Input
                                id="notification-email"
-                                className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark] md:w-72"
+                                className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark] md:w-72"
                                placeholder={t(
                                  "notification.email.placeholder",
                                )}
@ -741,6 +740,8 @@ export function CameraNotificationSwitch({
    }
  }, [notificationSuspendUntil, notificationState]);

+  const [customDialogOpen, setCustomDialogOpen] = useState(false);
+
  const handleSuspend = (duration: string) => {
    setIsSuspended(true);
    if (duration == "off") {
@ -750,6 +751,11 @@ export function CameraNotificationSwitch({
    }
  };

+  const handleCustomSuspend = (totalMinutes: number) => {
+    setIsSuspended(true);
+    sendNotificationSuspend(totalMinutes);
+  };
+
  const handleCancelSuspension = () => {
    sendNotification("ON");
    sendNotificationSuspend(0);
@ -788,7 +794,7 @@ export function CameraNotificationSwitch({
          )}
          <div className="flex flex-col">
            <CameraNameLabel
-              className="text-md cursor-pointer text-primary smart-capitalize"
+              className="cursor-pointer text-primary smart-capitalize"
              htmlFor="camera"
              camera={camera}
            />
@ -809,34 +815,41 @@ export function CameraNotificationSwitch({
      </div>

      {!isSuspended ? (
-        <Select onValueChange={handleSuspend}>
-          <SelectTrigger className="w-auto">
-            <SelectValue placeholder={t("notification.suspendTime.suspend")} />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="5">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button size="sm" variant="outline" className="flex gap-2">
+              {t("notification.suspendTime.suspend")}
+              <LuChevronDown className="h-4 w-4 opacity-50" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem onClick={() => handleSuspend("5")}>
              {t("notification.suspendTime.5minutes")}
-            </SelectItem>
-            <SelectItem value="10">
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => handleSuspend("10")}>
              {t("notification.suspendTime.10minutes")}
-            </SelectItem>
-            <SelectItem value="30">
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => handleSuspend("30")}>
              {t("notification.suspendTime.30minutes")}
-            </SelectItem>
-            <SelectItem value="60">
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => handleSuspend("60")}>
              {t("notification.suspendTime.1hour")}
-            </SelectItem>
-            <SelectItem value="840">
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => handleSuspend("840")}>
              {t("notification.suspendTime.12hours")}
-            </SelectItem>
-            <SelectItem value="1440">
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => handleSuspend("1440")}>
              {t("notification.suspendTime.24hours")}
-            </SelectItem>
-            <SelectItem value="off">
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => handleSuspend("off")}>
              {t("notification.suspendTime.untilRestart")}
-            </SelectItem>
-          </SelectContent>
-        </Select>
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem onClick={() => setCustomDialogOpen(true)}>
+              {t("notification.suspendTime.custom")}
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
      ) : (
        <Button
          variant="destructive"
@ -846,6 +859,12 @@ export function CameraNotificationSwitch({
          {t("notification.cancelSuspension")}
        </Button>
      )}
+
+      <CustomSuspensionDialog
+        open={customDialogOpen}
+        onOpenChange={setCustomDialogOpen}
+        onConfirm={handleCustomSuspend}
+      />
    </div>
  );
 }
--- a/web/src/components/config-form/sections/BaseSection.tsx
+++ b/web/src/components/config-form/sections/BaseSection.tsx
@ -32,7 +32,7 @@ import { ProfileOverridesBadge } from "./ProfileOverridesBadge";
 import { useSectionSchema } from "@/hooks/use-config-schema";
 import type { FrigateConfig } from "@/types/frigateConfig";
 import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
+import { Button, buttonVariants } from "@/components/ui/button";
 import { LuChevronDown, LuChevronRight } from "react-icons/lu";
 import Heading from "@/components/ui/heading";
 import get from "lodash/get";
@ -1236,7 +1236,7 @@ export function ConfigSection({
              {t("button.cancel", { ns: "common" })}
            </AlertDialogCancel>
            <AlertDialogAction
-              className="bg-destructive text-white hover:bg-destructive/90"
+              className={cn(buttonVariants({ variant: "destructive" }))}
              onClick={() => {
                onDeleteProfileSection?.();
                setIsDeleteProfileDialogOpen(false);
--- a/web/src/components/config-form/theme/templates/ObjectFieldTemplate.tsx
+++ b/web/src/components/config-form/theme/templates/ObjectFieldTemplate.tsx
@ -371,7 +371,7 @@ export function ObjectFieldTemplate(props: ObjectFieldTemplateProps) {
            key={group.groupKey}
            className="space-y-4 rounded-lg border border-border/70 bg-card/30 p-4"
          >
-            <div className="text-md border-b border-border/60 pb-4 font-semibold text-primary-variant">
+            <div className="border-b border-border/60 pb-4 font-semibold text-primary-variant">
              {group.label}
            </div>
            <div className="space-y-6">
--- a/web/src/components/config-form/theme/widgets/ArrayAsTextWidget.tsx
+++ b/web/src/components/config-form/theme/widgets/ArrayAsTextWidget.tsx
@ -79,7 +79,7 @@ export function ArrayAsTextWidget(props: WidgetProps) {
    return (
      <Textarea
        id={id}
-        className={cn("text-md", fieldClassName)}
+        className={cn(fieldClassName)}
        value={text}
        disabled={disabled || readonly}
        rows={(options.rows as number) || 3}
--- a/web/src/components/config-form/theme/widgets/CameraPathWidget.tsx
+++ b/web/src/components/config-form/theme/widgets/CameraPathWidget.tsx
@ -124,7 +124,7 @@ export function CameraPathWidget(props: WidgetProps) {
    <div className={cn("relative", fieldClassName)}>
      <Input
        id={id}
-        className={cn("text-md", canToggle ? "pr-10" : undefined)}
+        className={cn(canToggle ? "pr-10" : undefined)}
        type="text"
        value={displayValue}
        disabled={disabled || readonly}
--- a/web/src/components/config-form/theme/widgets/TextWidget.tsx
+++ b/web/src/components/config-form/theme/widgets/TextWidget.tsx
@ -26,7 +26,7 @@ export function TextWidget(props: WidgetProps) {
  return (
    <Input
      id={id}
-      className={cn("text-md", fieldClassName)}
+      className={cn(fieldClassName)}
      type="text"
      value={value ?? ""}
      disabled={disabled || readonly}
--- a/web/src/components/config-form/theme/widgets/TextareaWidget.tsx
+++ b/web/src/components/config-form/theme/widgets/TextareaWidget.tsx
@ -26,7 +26,7 @@ export function TextareaWidget(props: WidgetProps) {
  return (
    <Textarea
      id={id}
-      className={cn("text-md", fieldClassName)}
+      className={cn(fieldClassName)}
      value={value ?? ""}
      disabled={disabled || readonly}
      placeholder={placeholder || (options.placeholder as string) || ""}
--- a/web/src/components/filter/CameraGroupSelector.tsx
+++ b/web/src/components/filter/CameraGroupSelector.tsx
@ -15,6 +15,7 @@ import {
  Dialog,
  DialogContent,
  DialogDescription,
+  DialogFooter,
  DialogHeader,
  DialogTitle,
 } from "../ui/dialog";
@ -847,7 +848,7 @@ export function CameraGroupEdit({
              <FormLabel>{t("group.name.label")}</FormLabel>
              <FormControl>
                <Input
-                  className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                  className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
                  placeholder={t("group.name.placeholder")}
                  {...field}
                />
@ -973,10 +974,9 @@ export function CameraGroupEdit({

        <Separator className="my-2 flex bg-secondary" />

-        <div className="flex flex-row gap-2 py-5 md:pb-0">
+        <DialogFooter className="py-5 md:pb-0">
          <Button
            type="button"
-            className="flex flex-1"
            aria-label={t("button.cancel", { ns: "common" })}
            onClick={onCancel}
          >
@ -985,7 +985,6 @@ export function CameraGroupEdit({
          <Button
            variant="select"
            disabled={isLoading}
-            className="flex flex-1"
            aria-label={t("button.save", { ns: "common" })}
            type="submit"
          >
@ -998,7 +997,7 @@ export function CameraGroupEdit({
              t("button.save", { ns: "common" })
            )}
          </Button>
-        </div>
+        </DialogFooter>
      </form>
    </Form>
  );
--- a/web/src/components/filter/LogSettingsButton.tsx
+++ b/web/src/components/filter/LogSettingsButton.tsx
@ -40,7 +40,7 @@ export function LogSettingsButton({
    <div className={cn("my-3 space-y-3 py-3 md:mt-0 md:py-0")}>
      <div className="space-y-4">
        <div className="space-y-0.5">
-          <div className="text-md">{t("filter")}</div>
+          <div>{t("filter")}</div>
          <div className="space-y-1 text-xs text-muted-foreground">
            {t("logSettings.filterBySeverity")}
          </div>
@ -53,7 +53,7 @@ export function LogSettingsButton({
      <DropdownMenuSeparator />
      <div className="space-y-4">
        <div className="space-y-0.5">
-          <div className="text-md">{t("logSettings.loading.title")}</div>
+          <div>{t("logSettings.loading.title")}</div>
          <div className="mt-2.5 flex flex-col gap-2.5">
            <div className="space-y-1 text-xs text-muted-foreground">
              {t("logSettings.loading.desc")}
--- a/web/src/components/icons/IconPicker.tsx
+++ b/web/src/components/icons/IconPicker.tsx
@ -119,7 +119,7 @@ export default function IconPicker({
            placeholder={t("iconPicker.search.placeholder", {
              ns: "components/icons",
            })}
-            className="text-md mb-3 md:text-sm"
+            className="mb-3 md:text-sm"
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
          />
--- a/web/src/components/input/InputWithTags.tsx
+++ b/web/src/components/input/InputWithTags.tsx
@ -696,7 +696,7 @@ export default function InputWithTags({
            onFocus={handleInputFocus}
            onBlur={handleInputBlur}
            onKeyDown={handleInputKeyDown}
-            className="text-md h-9 pr-32"
+            className="h-9 pr-32"
            placeholder={t("placeholder.search")}
          />
          <div className="absolute right-3 top-0 flex h-full flex-row items-center justify-center gap-5">
--- a/web/src/components/input/NameAndIdFields.tsx
+++ b/web/src/components/input/NameAndIdFields.tsx
@ -112,11 +112,7 @@ export default function NameAndIdFields<T extends FieldValues = FieldValues>({
              </span>
            </div>
            <FormControl>
-              <Input
-                className="text-md"
-                placeholder={placeholderName}
-                {...field}
-              />
+              <Input placeholder={placeholderName} {...field} />
            </FormControl>
            {nameDescription && (
              <FormDescription>{nameDescription}</FormDescription>
@ -134,7 +130,6 @@ export default function NameAndIdFields<T extends FieldValues = FieldValues>({
              <FormLabel>{idLabel ?? t("label.ID")}</FormLabel>
              <FormControl>
                <Input
-                  className="text-md"
                  placeholder={placeholderId}
                  disabled={idDisabled}
                  {...field}
--- a/web/src/components/input/SaveSearchDialog.tsx
+++ b/web/src/components/input/SaveSearchDialog.tsx
@ -69,7 +69,6 @@ export function SaveSearchDialog({
        </DialogHeader>
        <Input
          value={searchName}
-          className="text-md"
          onChange={(e) => setSearchName(e.target.value)}
          placeholder={t("search.saveSearch.placeholder")}
        />
@ -88,7 +87,6 @@ export function SaveSearchDialog({
          <Button
            onClick={handleSave}
            variant="select"
-            className="mb-2 md:mb-0"
            aria-label={t("search.saveSearch.button.save.label")}
          >
            {t("button.save", { ns: "common" })}
--- a/web/src/components/input/TextEntry.tsx
+++ b/web/src/components/input/TextEntry.tsx
@ -77,7 +77,7 @@ export default function TextEntry({
              <FormControl>
                <Input
                  {...field}
-                  className="text-md w-full"
+                  className="w-full"
                  placeholder={placeholder}
                  type="text"
                />
--- a/web/src/components/menu/LiveContextMenu.tsx
+++ b/web/src/components/menu/LiveContextMenu.tsx
@ -50,6 +50,7 @@ import { use24HourTime } from "@/hooks/use-date-utils";
 import { useIsAdmin } from "@/hooks/use-is-admin";
 import { CameraNameLabel } from "../camera/FriendlyNameLabel";
 import { LiveStreamMetadata } from "@/types/live";
+import CustomSuspensionDialog from "@/components/overlay/dialog/CustomSuspensionDialog";

 type LiveContextMenuProps = {
  className?: string;
@ -238,6 +239,8 @@ export default function LiveContextMenu({
    }
  }, [notificationSuspendUntil, notificationState]);

+  const [customDialogOpen, setCustomDialogOpen] = useState(false);
+
  const handleSuspend = (duration: string) => {
    if (duration === "off") {
      sendNotification("OFF");
@ -276,7 +279,7 @@ export default function LiveContextMenu({
        <ContextMenuTrigger>{children}</ContextMenuTrigger>
        <ContextMenuContent>
          <div className="flex flex-col items-start gap-1 py-1 pl-2">
-            <div className="text-md text-primary-variant smart-capitalize">
+            <div className="text-primary-variant smart-capitalize">
              <CameraNameLabel camera={camera} />
            </div>
            {preferredLiveMode == "jsmpeg" && isRestreamed && (
@ -534,6 +537,16 @@ export default function LiveContextMenu({
                            >
                              {t("time.24hours", { ns: "common" })}
                            </ContextMenuItem>
+                            <ContextMenuItem
+                              disabled={!isEnabled}
+                              onClick={
+                                isEnabled
+                                  ? () => setCustomDialogOpen(true)
+                                  : undefined
+                              }
+                            >
+                              {t("time.custom", { ns: "common" })}
+                            </ContextMenuItem>
                            <ContextMenuItem
                              disabled={!isEnabled}
                              onClick={
@ -566,6 +579,12 @@ export default function LiveContextMenu({
          streamMetadata={streamMetadata}
        />
      </Dialog>
+
+      <CustomSuspensionDialog
+        open={customDialogOpen}
+        onOpenChange={setCustomDialogOpen}
+        onConfirm={(minutes) => sendNotificationSuspend(minutes)}
+      />
    </div>
  );
 }
--- a/web/src/components/overlay/CreateRoleDialog.tsx
+++ b/web/src/components/overlay/CreateRoleDialog.tsx
@ -213,36 +213,30 @@ export default function CreateRoleDialog({
              <FormMessage />
            </div>

-            <DialogFooter className="flex gap-2 pt-2 sm:justify-end">
-              <div className="flex flex-1 flex-col justify-end">
-                <div className="flex flex-row gap-2 pt-5">
-                  <Button
-                    className="flex flex-1"
-                    aria-label={t("button.cancel", { ns: "common" })}
-                    disabled={isLoading}
-                    onClick={handleCancel}
-                    type="button"
-                  >
-                    {t("button.cancel", { ns: "common" })}
-                  </Button>
-                  <Button
-                    variant="select"
-                    aria-label={t("button.save", { ns: "common" })}
-                    disabled={isLoading || !form.formState.isValid}
-                    className="flex flex-1"
-                    type="submit"
-                  >
-                    {isLoading ? (
-                      <div className="flex flex-row items-center gap-2">
-                        <ActivityIndicator className="size-4" />
-                        <span>{t("button.saving", { ns: "common" })}</span>
-                      </div>
-                    ) : (
-                      t("button.save", { ns: "common" })
-                    )}
-                  </Button>
-                </div>
-              </div>
+            <DialogFooter className="pt-2">
+              <Button
+                aria-label={t("button.cancel", { ns: "common" })}
+                disabled={isLoading}
+                onClick={handleCancel}
+                type="button"
+              >
+                {t("button.cancel", { ns: "common" })}
+              </Button>
+              <Button
+                variant="select"
+                aria-label={t("button.save", { ns: "common" })}
+                disabled={isLoading || !form.formState.isValid}
+                type="submit"
+              >
+                {isLoading ? (
+                  <div className="flex flex-row items-center gap-2">
+                    <ActivityIndicator className="size-4" />
+                    <span>{t("button.saving", { ns: "common" })}</span>
+                  </div>
+                ) : (
+                  t("button.save", { ns: "common" })
+                )}
+              </Button>
            </DialogFooter>
          </form>
        </Form>
--- a/web/src/components/overlay/CreateTriggerDialog.tsx
+++ b/web/src/components/overlay/CreateTriggerDialog.tsx
@ -433,36 +433,30 @@ export default function CreateTriggerDialog({
              )}
            />

-            <DialogFooter className="flex gap-2 pt-2 sm:justify-end">
-              <div className="flex flex-1 flex-col justify-end">
-                <div className="flex flex-row gap-2 pt-5">
-                  <Button
-                    className="flex flex-1"
-                    aria-label={t("button.cancel", { ns: "common" })}
-                    disabled={isLoading}
-                    onClick={handleCancel}
-                    type="button"
-                  >
-                    {t("button.cancel", { ns: "common" })}
-                  </Button>
-                  <Button
-                    variant="select"
-                    aria-label={t("button.save", { ns: "common" })}
-                    disabled={isLoading || !form.formState.isValid}
-                    className="flex flex-1"
-                    type="submit"
-                  >
-                    {isLoading ? (
-                      <div className="flex flex-row items-center gap-2">
-                        <ActivityIndicator className="size-4" />
-                        <span>{t("button.saving", { ns: "common" })}</span>
-                      </div>
-                    ) : (
-                      t("button.save", { ns: "common" })
-                    )}
-                  </Button>
-                </div>
-              </div>
+            <DialogFooter className="pt-2">
+              <Button
+                aria-label={t("button.cancel", { ns: "common" })}
+                disabled={isLoading}
+                onClick={handleCancel}
+                type="button"
+              >
+                {t("button.cancel", { ns: "common" })}
+              </Button>
+              <Button
+                variant="select"
+                aria-label={t("button.save", { ns: "common" })}
+                disabled={isLoading || !form.formState.isValid}
+                type="submit"
+              >
+                {isLoading ? (
+                  <div className="flex flex-row items-center gap-2">
+                    <ActivityIndicator className="size-4" />
+                    <span>{t("button.saving", { ns: "common" })}</span>
+                  </div>
+                ) : (
+                  t("button.save", { ns: "common" })
+                )}
+              </Button>
            </DialogFooter>
          </form>
        </Form>
--- a/web/src/components/overlay/CreateUserDialog.tsx
+++ b/web/src/components/overlay/CreateUserDialog.tsx
@ -411,36 +411,30 @@ export default function CreateUserDialog({
              )}
            />

-            <DialogFooter className="flex gap-2 pt-2 sm:justify-end">
-              <div className="flex flex-1 flex-col justify-end">
-                <div className="flex flex-row gap-2 pt-5">
-                  <Button
-                    className="flex flex-1"
-                    aria-label={t("button.cancel", { ns: "common" })}
-                    disabled={isLoading}
-                    onClick={handleCancel}
-                    type="button"
-                  >
-                    {t("button.cancel", { ns: "common" })}
-                  </Button>
-                  <Button
-                    variant="select"
-                    aria-label={t("button.save", { ns: "common" })}
-                    disabled={isLoading || !form.formState.isValid}
-                    className="flex flex-1"
-                    type="submit"
-                  >
-                    {isLoading ? (
-                      <div className="flex flex-row items-center gap-2">
-                        <ActivityIndicator className="size-4" />
-                        <span>{t("button.saving", { ns: "common" })}</span>
-                      </div>
-                    ) : (
-                      t("button.save", { ns: "common" })
-                    )}
-                  </Button>
-                </div>
-              </div>
+            <DialogFooter className="pt-2">
+              <Button
+                aria-label={t("button.cancel", { ns: "common" })}
+                disabled={isLoading}
+                onClick={handleCancel}
+                type="button"
+              >
+                {t("button.cancel", { ns: "common" })}
+              </Button>
+              <Button
+                variant="select"
+                aria-label={t("button.save", { ns: "common" })}
+                disabled={isLoading || !form.formState.isValid}
+                type="submit"
+              >
+                {isLoading ? (
+                  <div className="flex flex-row items-center gap-2">
+                    <ActivityIndicator className="size-4" />
+                    <span>{t("button.saving", { ns: "common" })}</span>
+                  </div>
+                ) : (
+                  t("button.save", { ns: "common" })
+                )}
+              </Button>
            </DialogFooter>
          </form>
        </Form>
--- a/web/src/components/overlay/CustomTimeSelector.tsx
+++ b/web/src/components/overlay/CustomTimeSelector.tsx
@ -144,7 +144,7 @@ export function CustomTimeSelector({
            />
            <SelectSeparator className="bg-secondary" />
            <input
-              className="text-md mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+              className="mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
              id="startTime"
              type="time"
              value={startClock}
@ -210,7 +210,7 @@ export function CustomTimeSelector({
            />
            <SelectSeparator className="bg-secondary" />
            <input
-              className="text-md mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+              className="mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
              id="endTime"
              type="time"
              value={endClock}
--- a/web/src/components/overlay/DebugReplayDialog.tsx
+++ b/web/src/components/overlay/DebugReplayDialog.tsx
@ -113,19 +113,14 @@ export function DebugReplayContent({

      {isDesktop && <SelectSeparator className="my-4 bg-secondary" />}

-      <DialogFooter
-        className={isDesktop ? "" : "mt-3 flex flex-col-reverse gap-2"}
-      >
+      <DialogFooter className="mt-3 sm:mt-0">
        <Button
-          className={isDesktop ? "" : "w-full"}
          aria-label={t("button.cancel", { ns: "common" })}
-          variant="outline"
          onClick={onCancel}
        >
          {t("button.cancel", { ns: "common" })}
        </Button>
        <Button
-          className={isDesktop ? "" : "w-full"}
          variant="select"
          disabled={isStarting}
          onClick={() => {
--- a/web/src/components/overlay/DeleteRoleDialog.tsx
+++ b/web/src/components/overlay/DeleteRoleDialog.tsx
@ -70,38 +70,31 @@ export default function DeleteRoleDialog({
          </div>
        </div>

-        <DialogFooter className="flex gap-2 pt-2 sm:justify-end">
-          <div className="flex flex-1 flex-col justify-end">
-            <div className="flex flex-row gap-2 pt-5">
-              <Button
-                className="flex flex-1"
-                aria-label={t("button.cancel", { ns: "common" })}
-                variant="outline"
-                disabled={isLoading}
-                onClick={onCancel}
-                type="button"
-              >
-                {t("button.cancel", { ns: "common" })}
-              </Button>
-              <Button
-                className="flex flex-1"
-                aria-label={t("button.delete", { ns: "common" })}
-                variant="destructive"
-                disabled={isLoading}
-                onClick={handleDelete}
-                type="button"
-              >
-                {isLoading ? (
-                  <div className="flex flex-row items-center gap-2">
-                    <ActivityIndicator />
-                    <span>{t("roles.dialog.deleteRole.deleting")}</span>
-                  </div>
-                ) : (
-                  t("button.delete", { ns: "common" })
-                )}
-              </Button>
-            </div>
-          </div>
+        <DialogFooter>
+          <Button
+            aria-label={t("button.cancel", { ns: "common" })}
+            disabled={isLoading}
+            onClick={onCancel}
+            type="button"
+          >
+            {t("button.cancel", { ns: "common" })}
+          </Button>
+          <Button
+            aria-label={t("button.delete", { ns: "common" })}
+            variant="destructive"
+            disabled={isLoading}
+            onClick={handleDelete}
+            type="button"
+          >
+            {isLoading ? (
+              <div className="flex flex-row items-center gap-2">
+                <ActivityIndicator />
+                <span>{t("roles.dialog.deleteRole.deleting")}</span>
+              </div>
+            ) : (
+              t("button.delete", { ns: "common" })
+            )}
+          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
--- a/web/src/components/overlay/DeleteTriggerDialog.tsx
+++ b/web/src/components/overlay/DeleteTriggerDialog.tsx
@ -43,36 +43,30 @@ export default function DeleteTriggerDialog({
            </Trans>
          </DialogDescription>
        </DialogHeader>
-        <DialogFooter className="flex gap-3 sm:justify-end">
-          <div className="flex flex-1 flex-col justify-end">
-            <div className="flex flex-row gap-2 pt-5">
-              <Button
-                className="flex flex-1"
-                aria-label={t("button.cancel", { ns: "common" })}
-                onClick={onCancel}
-                type="button"
-                disabled={isLoading}
-              >
-                {t("button.cancel", { ns: "common" })}
-              </Button>
-              <Button
-                variant="destructive"
-                aria-label={t("button.delete", { ns: "common" })}
-                className="flex flex-1 text-white"
-                onClick={onDelete}
-                disabled={isLoading}
-              >
-                {isLoading ? (
-                  <div className="flex flex-row items-center gap-2">
-                    <ActivityIndicator />
-                    <span>{t("button.delete", { ns: "common" })}</span>
-                  </div>
-                ) : (
-                  t("button.delete", { ns: "common" })
-                )}
-              </Button>
-            </div>
-          </div>
+        <DialogFooter>
+          <Button
+            aria-label={t("button.cancel", { ns: "common" })}
+            onClick={onCancel}
+            type="button"
+            disabled={isLoading}
+          >
+            {t("button.cancel", { ns: "common" })}
+          </Button>
+          <Button
+            variant="destructive"
+            aria-label={t("button.delete", { ns: "common" })}
+            onClick={onDelete}
+            disabled={isLoading}
+          >
+            {isLoading ? (
+              <div className="flex flex-row items-center gap-2">
+                <ActivityIndicator />
+                <span>{t("button.delete", { ns: "common" })}</span>
+              </div>
+            ) : (
+              t("button.delete", { ns: "common" })
+            )}
+          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
--- a/web/src/components/overlay/DeleteUserDialog.tsx
+++ b/web/src/components/overlay/DeleteUserDialog.tsx
@ -46,27 +46,21 @@ export default function DeleteUserDialog({
          </p>
        </div>

-        <DialogFooter className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
-          <div className="flex flex-1 flex-col justify-end">
-            <div className="flex flex-row gap-2 pt-5">
-              <Button
-                className="flex flex-1"
-                aria-label={t("button.cancel", { ns: "common" })}
-                onClick={onCancel}
-                type="button"
-              >
-                {t("button.cancel", { ns: "common" })}
-              </Button>
-              <Button
-                variant="destructive"
-                aria-label={t("button.delete", { ns: "common" })}
-                className="flex flex-1 text-white"
-                onClick={onDelete}
-              >
-                {t("button.delete", { ns: "common" })}
-              </Button>
-            </div>
-          </div>
+        <DialogFooter>
+          <Button
+            aria-label={t("button.cancel", { ns: "common" })}
+            onClick={onCancel}
+            type="button"
+          >
+            {t("button.cancel", { ns: "common" })}
+          </Button>
+          <Button
+            variant="destructive"
+            aria-label={t("button.delete", { ns: "common" })}
+            onClick={onDelete}
+          >
+            {t("button.delete", { ns: "common" })}
+          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
--- a/web/src/components/overlay/EditRoleCamerasDialog.tsx
+++ b/web/src/components/overlay/EditRoleCamerasDialog.tsx
@ -105,13 +105,15 @@ export default function EditRoleCamerasDialog({
        <Form {...form}>
          <form
            onSubmit={form.handleSubmit(onSubmit)}
-            className="space-y-5 pt-4"
+            className="space-y-5 pt-2"
          >
-            <div className="space-y-2">
-              <FormLabel>{t("roles.dialog.form.cameras.title")}</FormLabel>
-              <FormDescription className="text-xs text-muted-foreground">
-                {t("roles.dialog.form.cameras.desc")}
-              </FormDescription>
+            <div className="space-y-3">
+              <div>
+                <FormLabel>{t("roles.dialog.form.cameras.title")}</FormLabel>
+                <FormDescription className="text-xs text-muted-foreground">
+                  {t("roles.dialog.form.cameras.desc")}
+                </FormDescription>
+              </div>
              <div className="scrollbar-container max-h-[40dvh] space-y-2 overflow-y-auto">
                {cameras.map((camera) => (
                  <FormField
@ -159,36 +161,30 @@ export default function EditRoleCamerasDialog({
              <FormMessage />
            </div>

-            <DialogFooter className="flex gap-2 pt-2 sm:justify-end">
-              <div className="flex flex-1 flex-col justify-end">
-                <div className="flex flex-row gap-2 pt-5">
-                  <Button
-                    className="flex flex-1"
-                    aria-label={t("button.cancel", { ns: "common" })}
-                    disabled={isLoading}
-                    onClick={handleCancel}
-                    type="button"
-                  >
-                    {t("button.cancel", { ns: "common" })}
-                  </Button>
-                  <Button
-                    variant="select"
-                    aria-label={t("button.save", { ns: "common" })}
-                    disabled={isLoading || !form.formState.isValid}
-                    className="flex flex-1"
-                    type="submit"
-                  >
-                    {isLoading ? (
-                      <div className="flex flex-row items-center gap-2">
-                        <ActivityIndicator className="size-4" />
-                        <span>{t("button.saving", { ns: "common" })}</span>
-                      </div>
-                    ) : (
-                      t("button.save", { ns: "common" })
-                    )}
-                  </Button>
-                </div>
-              </div>
+            <DialogFooter>
+              <Button
+                aria-label={t("button.cancel", { ns: "common" })}
+                disabled={isLoading}
+                onClick={handleCancel}
+                type="button"
+              >
+                {t("button.cancel", { ns: "common" })}
+              </Button>
+              <Button
+                variant="select"
+                aria-label={t("button.save", { ns: "common" })}
+                disabled={isLoading || !form.formState.isValid}
+                type="submit"
+              >
+                {isLoading ? (
+                  <div className="flex flex-row items-center gap-2">
+                    <ActivityIndicator className="size-4" />
+                    <span>{t("button.saving", { ns: "common" })}</span>
+                  </div>
+                ) : (
+                  t("button.save", { ns: "common" })
+                )}
+              </Button>
            </DialogFooter>
          </form>
        </Form>
--- a/web/src/components/overlay/ExportDialog.tsx
+++ b/web/src/components/overlay/ExportDialog.tsx
@ -794,7 +794,6 @@ export function ExportContent({
          )}

          <Input
-            className="text-md"
            type="search"
            placeholder={t("export.name.placeholder")}
            value={name}
@ -835,13 +834,11 @@ export function ExportContent({
              {selectedCaseId === "new" && (
                <div className="space-y-2 pt-1">
                  <Input
-                    className="text-md"
                    placeholder={t("export.case.newCaseNamePlaceholder")}
                    value={singleNewCaseName}
                    onChange={(e) => setSingleNewCaseName(e.target.value)}
                  />
                  <Textarea
-                    className="text-md"
                    placeholder={t("export.case.newCaseDescriptionPlaceholder")}
                    value={singleNewCaseDescription}
                    onChange={(e) =>
@ -988,7 +985,6 @@ export function ExportContent({
              {t("export.multiCamera.nameLabel")}
            </Label>
            <Input
-              className="text-md"
              type="search"
              placeholder={t("export.multiCamera.namePlaceholder")}
              value={name}
@ -1028,13 +1024,11 @@ export function ExportContent({
              {batchCaseSelection === "new" && (
                <div className="space-y-2 pt-1">
                  <Input
-                    className="text-md"
                    placeholder={t("export.case.newCaseNamePlaceholder")}
                    value={newCaseName}
                    onChange={(event) => setNewCaseName(event.target.value)}
                  />
                  <Textarea
-                    className="text-md"
                    placeholder={t("export.case.newCaseDescriptionPlaceholder")}
                    value={newCaseDescription}
                    onChange={(event) =>
@ -1049,20 +1043,15 @@ export function ExportContent({
      </Tabs>

      {isDesktop && <SelectSeparator className="my-4 bg-secondary" />}
-      <DialogFooter
-        className={isDesktop ? "" : "mt-3 flex flex-col-reverse gap-2"}
-      >
+      <DialogFooter className="mt-3 sm:mt-0">
        <Button
-          className={isDesktop ? "" : "w-full"}
          aria-label={t("button.cancel", { ns: "common" })}
-          variant="outline"
          onClick={onCancel}
        >
          {t("button.cancel", { ns: "common" })}
        </Button>
        {activeTab === "export" ? (
          <Button
-            className={isDesktop ? "" : "w-full"}
            aria-label={t("export.selectOrExport")}
            variant="select"
            disabled={isStartingExport}
@ -1086,12 +1075,10 @@ export function ExportContent({
          </Button>
        ) : (
          <Button
-            className={isDesktop ? "" : "w-full"}
            aria-label={t("export.multiCamera.exportButton", {
              count: selectedCameraCount,
            })}
            variant="select"
-            size="sm"
            disabled={!canStartBatchExport}
            onClick={() => void startBatchExport()}
          >
--- a/web/src/components/overlay/ImagePicker.tsx
+++ b/web/src/components/overlay/ImagePicker.tsx
@ -85,7 +85,7 @@ export default function ImagePicker({
    <Input
      type="text"
      placeholder={t("imagePicker.search.placeholder")}
-      className="text-md mb-3 md:text-sm"
+      className="mb-3 md:text-sm"
      value={searchTerm}
      onChange={(e) => {
        setSearchTerm(e.target.value);
--- a/web/src/components/overlay/MultiExportDialog.tsx
+++ b/web/src/components/overlay/MultiExportDialog.tsx
@ -290,7 +290,6 @@ export default function MultiExportDialog({
  const newCaseInputs = (
    <div className="space-y-2 pt-1">
      <Input
-        className="text-md"
        placeholder={t("export.case.newCaseNamePlaceholder")}
        value={newCaseName}
        onChange={(event) => setNewCaseName(event.target.value)}
@ -298,7 +297,6 @@ export default function MultiExportDialog({
        autoFocus={isDesktop}
      />
      <Textarea
-        className="text-md"
        placeholder={t("export.case.newCaseDescriptionPlaceholder")}
        value={newCaseDescription}
        onChange={(event) => setNewCaseDescription(event.target.value)}
@ -344,11 +342,7 @@ export default function MultiExportDialog({

  const footer = (
    <>
-      <Button
-        variant="outline"
-        onClick={() => handleOpenChange(false)}
-        disabled={isExporting}
-      >
+      <Button onClick={() => handleOpenChange(false)} disabled={isExporting}>
        {t("button.cancel", { ns: "common" })}
      </Button>
      <Button
@ -380,7 +374,7 @@ export default function MultiExportDialog({
            </DialogDescription>
          </DialogHeader>
          {body}
-          <DialogFooter className="gap-2">{footer}</DialogFooter>
+          <DialogFooter>{footer}</DialogFooter>
        </DialogContent>
      </Dialog>
    );
@ -399,7 +393,7 @@ export default function MultiExportDialog({
          </DrawerDescription>
        </DrawerHeader>
        {body}
-        <div className="mt-4 flex flex-col-reverse gap-2">{footer}</div>
+        <DialogFooter className="mt-4">{footer}</DialogFooter>
      </DrawerContent>
    </Drawer>
  );
--- a/web/src/components/overlay/ReviewActivityCalendar.tsx
+++ b/web/src/components/overlay/ReviewActivityCalendar.tsx
@ -1,6 +1,12 @@
 import { RecordingsSummary, ReviewSummary } from "@/types/review";
 import { Calendar } from "../ui/calendar";
-import { ButtonHTMLAttributes, useEffect, useMemo, useRef } from "react";
+import {
+  ButtonHTMLAttributes,
+  ComponentProps,
+  useEffect,
+  useMemo,
+  useRef,
+} from "react";
 import { FaCircle } from "react-icons/fa";
 import { getUTCOffset } from "@/utils/dateUtil";
 import { type DayButtonProps } from "react-day-picker";
@ -156,11 +162,13 @@ type TimezoneAwareCalendarProps = {
  timezone?: string;
  selectedDay?: Date;
  onSelect: (day?: Date) => void;
+  disabled?: ComponentProps<typeof Calendar>["disabled"];
 };
 export function TimezoneAwareCalendar({
  timezone,
  selectedDay,
  onSelect,
+  disabled,
 }: TimezoneAwareCalendarProps) {
  const [weekStartsOn] = useUserPersistence("weekStartsOn", 0);

@ -169,7 +177,7 @@ export function TimezoneAwareCalendar({
      timezone ? Math.round(getUTCOffset(new Date(), timezone)) : undefined,
    [timezone],
  );
-  const disabledDates = useMemo(() => {
+  const defaultDisabledDates = useMemo(() => {
    const tomorrow = new Date();

    if (timezoneOffset) {
@ -187,6 +195,7 @@ export function TimezoneAwareCalendar({
    future.setFullYear(tomorrow.getFullYear() + 10);
    return { from: tomorrow, to: future };
  }, [timezoneOffset]);
+  const disabledDates = disabled ?? defaultDisabledDates;

  const today = useMemo(() => {
    if (!timezoneOffset) {
--- a/web/src/components/overlay/RoleChangeDialog.tsx
+++ b/web/src/components/overlay/RoleChangeDialog.tsx
@ -117,30 +117,23 @@ export default function RoleChangeDialog({
          </Select>
        </div>

-        <DialogFooter className="flex gap-3 sm:justify-end">
-          <div className="flex flex-1 flex-col justify-end">
-            <div className="flex flex-row gap-2 pt-5">
-              <Button
-                className="flex flex-1"
-                aria-label={t("button.cancel", { ns: "common" })}
-                variant="outline"
-                onClick={onCancel}
-                type="button"
-              >
-                {t("button.cancel", { ns: "common" })}
-              </Button>
-              <Button
-                variant="select"
-                aria-label={t("button.save", { ns: "common" })}
-                className="flex flex-1"
-                onClick={() => onSave(selectedRole)}
-                type="button"
-                disabled={selectedRole === currentRole}
-              >
-                {t("button.save", { ns: "common" })}
-              </Button>
-            </div>
-          </div>
+        <DialogFooter>
+          <Button
+            aria-label={t("button.cancel", { ns: "common" })}
+            onClick={onCancel}
+            type="button"
+          >
+            {t("button.cancel", { ns: "common" })}
+          </Button>
+          <Button
+            variant="select"
+            aria-label={t("button.save", { ns: "common" })}
+            onClick={() => onSave(selectedRole)}
+            type="button"
+            disabled={selectedRole === currentRole}
+          >
+            {t("button.save", { ns: "common" })}
+          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
--- a/web/src/components/overlay/SetPasswordDialog.tsx
+++ b/web/src/components/overlay/SetPasswordDialog.tsx
@ -450,36 +450,30 @@ export default function SetPasswordDialog({
              </div>
            )}

-            <DialogFooter className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
-              <div className="flex flex-1 flex-col justify-end">
-                <div className="flex flex-row gap-2 pt-5">
-                  <Button
-                    className="flex flex-1"
-                    aria-label={t("button.cancel", { ns: "common" })}
-                    onClick={onCancel}
-                    type="button"
-                    disabled={isLoading}
-                  >
-                    {t("button.cancel", { ns: "common" })}
-                  </Button>
-                  <Button
-                    variant="select"
-                    aria-label={t("button.save", { ns: "common" })}
-                    className="flex flex-1"
-                    type="submit"
-                    disabled={isLoading || !form.formState.isValid}
-                  >
-                    {isLoading ? (
-                      <div className="flex flex-row items-center gap-2">
-                        <ActivityIndicator className="size-4" />
-                        <span>{t("button.saving", { ns: "common" })}</span>
-                      </div>
-                    ) : (
-                      t("button.save", { ns: "common" })
-                    )}
-                  </Button>
-                </div>
-              </div>
+            <DialogFooter>
+              <Button
+                aria-label={t("button.cancel", { ns: "common" })}
+                onClick={onCancel}
+                type="button"
+                disabled={isLoading}
+              >
+                {t("button.cancel", { ns: "common" })}
+              </Button>
+              <Button
+                variant="select"
+                aria-label={t("button.save", { ns: "common" })}
+                type="submit"
+                disabled={isLoading || !form.formState.isValid}
+              >
+                {isLoading ? (
+                  <div className="flex flex-row items-center gap-2">
+                    <ActivityIndicator className="size-4" />
+                    <span>{t("button.saving", { ns: "common" })}</span>
+                  </div>
+                ) : (
+                  t("button.save", { ns: "common" })
+                )}
+              </Button>
            </DialogFooter>
          </form>
        </Form>
--- a/web/src/components/overlay/ShareTimestampDialog.tsx
+++ b/web/src/components/overlay/ShareTimestampDialog.tsx
@ -196,21 +196,16 @@ export function ShareTimestampContent({

      {isDesktop && <Separator className="my-4 bg-secondary" />}

-      <DialogFooter
-        className={cn("mt-4", !isDesktop && "flex flex-col-reverse gap-2")}
-      >
+      <DialogFooter className="mt-3 sm:mt-0">
        {onCancel && (
          <Button
-            className={cn(!isDesktop && "w-full")}
            aria-label={t("button.cancel", { ns: "common" })}
-            variant="outline"
            onClick={onCancel}
          >
            {t("button.cancel", { ns: "common" })}
          </Button>
        )}
        <Button
-          className={cn(!isDesktop && "w-full")}
          variant="select"
          onClick={() => onShareTimestamp(Math.floor(selectedTimestamp))}
        >
@ -338,7 +333,7 @@ function CustomTimestampSelector({
            />
            <div className="my-3 h-px w-full bg-secondary" />
            <input
-              className="text-md mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+              className="mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
              id="shareTimestamp"
              type="time"
              value={clock}
--- a/web/src/components/overlay/detail/AnnotationSettingsPane.tsx
+++ b/web/src/components/overlay/detail/AnnotationSettingsPane.tsx
@ -145,7 +145,7 @@ export function AnnotationSettingsPane({

  return (
    <div className="p-4">
-      <div className="text-md mb-2">
+      <div className="mb-2">
        {t("trackingDetails.annotationSettings.title")}
      </div>

--- a/web/src/components/overlay/detail/FaceCreateWizardDialog.tsx
+++ b/web/src/components/overlay/detail/FaceCreateWizardDialog.tsx
@ -131,7 +131,7 @@ export default function CreateFaceWizardDialog({
            forbiddenPattern={/#/}
            forbiddenErrorMessage={t("description.nameCannotContainHash")}
          >
-            <div className="flex justify-end py-2">
+            <div className="flex flex-col-reverse gap-2 py-2 sm:flex-row sm:justify-end">
              <Button variant="select" type="submit">
                {t("button.next", { ns: "common" })}
              </Button>
@ -144,7 +144,7 @@ export default function CreateFaceWizardDialog({
              {t("steps.description.uploadFace", { name })}
            </div>
            <ImageEntry onSave={onUploadImage}>
-              <div className="flex justify-end py-2">
+              <div className="flex flex-col-reverse gap-2 py-2 sm:flex-row sm:justify-end">
                <Button variant="select" type="submit">
                  {t("button.next", { ns: "common" })}
                </Button>
@ -173,7 +173,7 @@ export default function CreateFaceWizardDialog({
                <LuExternalLink className="ml-2 inline-flex size-3" />
              </Link>
            </div>
-            <div className="flex justify-end">
+            <div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
              <Button
                variant="select"
                onClick={() => {
--- a/web/src/components/overlay/detail/SearchDetailDialog.tsx
+++ b/web/src/components/overlay/detail/SearchDetailDialog.tsx
@ -1569,7 +1569,7 @@ function ObjectDetailsTab({
                      {t("button.yes", { ns: "common" })}
                    </Button>
                    <Button
-                      className="flex-1 text-white"
+                      className="flex-1"
                      aria-label={t("button.no", { ns: "common" })}
                      variant="destructive"
                      onClick={() => {
@ -1706,7 +1706,7 @@ function ObjectDetailsTab({
        ) : (
          <div className="flex flex-col gap-2">
            <Textarea
-              className="text-md h-32 md:text-sm"
+              className="h-32 md:text-sm"
              placeholder={t("details.description.placeholder")}
              value={desc}
              onChange={(e) => setDesc(e.target.value)}
--- a/web/src/components/overlay/detail/TrackingDetails.tsx
+++ b/web/src/components/overlay/detail/TrackingDetails.tsx
@ -821,7 +821,7 @@ export function TrackingDetails({
                </div>
                <div className="flex items-center gap-2">
                  <span className="capitalize">{label}</span>
-                  <div className="md:text-md flex items-center text-xs text-secondary-foreground">
+                  <div className="flex items-center text-xs text-secondary-foreground">
                    {formattedStart ?? ""}
                    {event.end_time != null ? (
                      <> - {formattedEnd}</>
@ -1072,7 +1072,7 @@ function LifecycleIconRow({

        <div className="ml-2 flex w-full min-w-0 flex-1">
          <div className="flex flex-col">
-            <div className="text-md flex items-start break-words text-left">
+            <div className="flex items-start break-words text-left">
              {getLifecycleItemDescription(item)}
            </div>
            {/* Only show Score/Ratio/Area for object events, not for audio (heard) or manual API (external) events */}
--- a/web/src/components/overlay/dialog/CustomSuspensionDialog.tsx
+++ b/web/src/components/overlay/dialog/CustomSuspensionDialog.tsx
@ -0,0 +1,167 @@
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { isDesktop } from "react-device-detect";
+import { FaCalendarAlt } from "react-icons/fa";
+import useSWR from "swr";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Label } from "@/components/ui/label";
+import { TimezoneAwareCalendar } from "@/components/overlay/ReviewActivityCalendar";
+import { FrigateConfig } from "@/types/frigateConfig";
+import { useFormattedTimestamp } from "@/hooks/use-date-utils";
+
+type CustomSuspensionDialogProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onConfirm: (minutes: number) => void;
+};
+
+const ONE_HOUR_MS = 60 * 60 * 1000;
+
+function pad(n: number): string {
+  return n.toString().padStart(2, "0");
+}
+
+function isValidDate(d: Date): boolean {
+  return !Number.isNaN(d.getTime());
+}
+
+export default function CustomSuspensionDialog({
+  open,
+  onOpenChange,
+  onConfirm,
+}: CustomSuspensionDialogProps) {
+  const { t } = useTranslation(["views/settings"]);
+  const { data: config } = useSWR<FrigateConfig>("config");
+
+  const [until, setUntil] = useState<Date>(
+    () => new Date(Date.now() + ONE_HOUR_MS),
+  );
+  const [calendarOpen, setCalendarOpen] = useState(false);
+
+  useEffect(() => {
+    if (open) setUntil(new Date(Date.now() + ONE_HOUR_MS));
+  }, [open]);
+
+  const formattedDate = useFormattedTimestamp(
+    isValidDate(until) ? Math.floor(until.getTime() / 1000) : 0,
+    t("time.formattedTimestampMonthDayYear.24hour", { ns: "common" }),
+    config?.ui.timezone,
+  );
+
+  const isFuture = isValidDate(until) && until.getTime() > Date.now();
+
+  const handleApply = () => {
+    if (!isFuture) return;
+    onConfirm(Math.ceil((until.getTime() - Date.now()) / 60_000));
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{t("notification.customSuspension.title")}</DialogTitle>
+          <DialogDescription>
+            {t("notification.customSuspension.description")}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex flex-col gap-2">
+          <Label>{t("notification.customSuspension.untilLabel")}</Label>
+          <div className="flex items-center gap-2 rounded-lg bg-secondary p-2 text-secondary-foreground">
+            <FaCalendarAlt />
+            <Popover open={calendarOpen} onOpenChange={setCalendarOpen}>
+              <PopoverTrigger asChild>
+                <Button
+                  className={`text-primary ${isDesktop ? "" : "text-xs"}`}
+                  variant={calendarOpen ? "select" : "default"}
+                  size="sm"
+                >
+                  {isValidDate(until) ? formattedDate : "—"}
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent
+                className="flex flex-col items-center"
+                disablePortal
+              >
+                <TimezoneAwareCalendar
+                  timezone={config?.ui.timezone}
+                  selectedDay={isValidDate(until) ? until : undefined}
+                  disabled={{
+                    before: new Date(new Date().setHours(0, 0, 0, 0)),
+                  }}
+                  onSelect={(day) => {
+                    if (!day) return;
+                    const next = new Date(day);
+                    const carry = isValidDate(until) ? until : new Date();
+                    next.setHours(
+                      carry.getHours(),
+                      carry.getMinutes(),
+                      carry.getSeconds(),
+                      0,
+                    );
+                    setUntil(next);
+                    setCalendarOpen(false);
+                  }}
+                />
+              </PopoverContent>
+            </Popover>
+            <input
+              className="text-md border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+              aria-label={t("notification.customSuspension.untilLabel")}
+              type="time"
+              value={
+                isValidDate(until)
+                  ? `${pad(until.getHours())}:${pad(until.getMinutes())}`
+                  : ""
+              }
+              step="60"
+              onChange={(e) => {
+                const [h, m] = e.target.value.split(":");
+                const hh = Number.parseInt(h ?? "", 10);
+                const mm = Number.parseInt(m ?? "", 10);
+                if (Number.isNaN(hh) || Number.isNaN(mm)) return;
+                const base = isValidDate(until) ? until : new Date();
+                const next = new Date(base);
+                next.setHours(hh, mm, 0, 0);
+                setUntil(next);
+              }}
+            />
+          </div>
+          {!isFuture && (
+            <p className="text-sm text-danger">
+              {t("notification.customSuspension.invalidTime")}
+            </p>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button type="button" onClick={() => onOpenChange(false)}>
+            {t("button.cancel", { ns: "common" })}
+          </Button>
+          <Button
+            variant="select"
+            type="button"
+            disabled={!isFuture}
+            onClick={handleApply}
+          >
+            {t("button.apply", { ns: "common" })}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
--- a/web/src/components/overlay/dialog/DeleteCameraDialog.tsx
+++ b/web/src/components/overlay/dialog/DeleteCameraDialog.tsx
@ -121,28 +121,22 @@ export default function DeleteCameraDialog({
                ))}
              </SelectContent>
            </Select>
-            <DialogFooter className="flex gap-3 sm:justify-end">
-              <div className="flex flex-1 flex-col justify-end">
-                <div className="flex flex-row gap-2 pt-5">
-                  <Button
-                    className="flex flex-1"
-                    aria-label={t("button.cancel", { ns: "common" })}
-                    onClick={handleClose}
-                    type="button"
-                  >
-                    {t("button.cancel", { ns: "common" })}
-                  </Button>
-                  <Button
-                    variant="destructive"
-                    aria-label={t("button.delete", { ns: "common" })}
-                    className="flex flex-1 text-white"
-                    onClick={handleDelete}
-                    disabled={!selectedCamera}
-                  >
-                    {t("button.delete", { ns: "common" })}
-                  </Button>
-                </div>
-              </div>
+            <DialogFooter>
+              <Button
+                aria-label={t("button.cancel", { ns: "common" })}
+                onClick={handleClose}
+                type="button"
+              >
+                {t("button.cancel", { ns: "common" })}
+              </Button>
+              <Button
+                variant="destructive"
+                aria-label={t("button.delete", { ns: "common" })}
+                onClick={handleDelete}
+                disabled={!selectedCamera}
+              >
+                {t("button.delete", { ns: "common" })}
+              </Button>
            </DialogFooter>
          </>
        ) : (
@ -173,39 +167,31 @@ export default function DeleteCameraDialog({
                {t("cameraManagement.deleteCameraDialog.deleteExports")}
              </Label>
            </div>
-            <DialogFooter className="flex gap-3 sm:justify-end">
-              <div className="flex flex-1 flex-col justify-end">
-                <div className="flex flex-row gap-2 pt-5">
-                  <Button
-                    className="flex flex-1"
-                    aria-label={t("button.back", { ns: "common" })}
-                    onClick={handleBack}
-                    type="button"
-                    disabled={isDeleting}
-                  >
-                    {t("button.back", { ns: "common" })}
-                  </Button>
-                  <Button
-                    variant="destructive"
-                    className="flex flex-1 text-white"
-                    onClick={handleConfirmDelete}
-                    disabled={isDeleting}
-                  >
-                    {isDeleting ? (
-                      <div className="flex flex-row items-center gap-2">
-                        <ActivityIndicator />
-                        <span>
-                          {t(
-                            "cameraManagement.deleteCameraDialog.confirmButton",
-                          )}
-                        </span>
-                      </div>
-                    ) : (
-                      t("cameraManagement.deleteCameraDialog.confirmButton")
-                    )}
-                  </Button>
-                </div>
-              </div>
+            <DialogFooter>
+              <Button
+                aria-label={t("button.back", { ns: "common" })}
+                onClick={handleBack}
+                type="button"
+                disabled={isDeleting}
+              >
+                {t("button.back", { ns: "common" })}
+              </Button>
+              <Button
+                variant="destructive"
+                onClick={handleConfirmDelete}
+                disabled={isDeleting}
+              >
+                {isDeleting ? (
+                  <div className="flex flex-row items-center gap-2">
+                    <ActivityIndicator />
+                    <span>
+                      {t("cameraManagement.deleteCameraDialog.confirmButton")}
+                    </span>
+                  </div>
+                ) : (
+                  t("cameraManagement.deleteCameraDialog.confirmButton")
+                )}
+              </Button>
            </DialogFooter>
          </>
        )}
--- a/web/src/components/overlay/dialog/FrigatePlusDialog.tsx
+++ b/web/src/components/overlay/dialog/FrigatePlusDialog.tsx
@ -173,7 +173,7 @@ export function FrigatePlusDialog({
                                {t("button.yes", { ns: "common" })}
                              </Button>
                              <Button
-                                className="flex-1 text-white"
+                                className="flex-1"
                                aria-label={t("button.no", { ns: "common" })}
                                variant="destructive"
                                onClick={() => {
--- a/web/src/components/overlay/dialog/MultiSelectDialog.tsx
+++ b/web/src/components/overlay/dialog/MultiSelectDialog.tsx
@ -7,9 +7,7 @@ import {
  DialogHeader,
  DialogTitle,
 } from "@/components/ui/dialog";
-import { cn } from "@/lib/utils";
 import { useState } from "react";
-import { isMobile } from "react-device-detect";
 import { useTranslation } from "react-i18next";
 import FilterSwitch from "@/components/filter/FilterSwitch";

@ -77,7 +75,7 @@ export default function MultiSelectDialog({
            />
          ))}
        </div>
-        <DialogFooter className={cn("pt-4", isMobile && "gap-2")}>
+        <DialogFooter className="pt-4">
          <Button type="button" onClick={() => setOpen(false)}>
            {t("button.cancel")}
          </Button>
--- a/web/src/components/overlay/dialog/OptionAndInputDialog.tsx
+++ b/web/src/components/overlay/dialog/OptionAndInputDialog.tsx
@ -144,18 +144,13 @@ export default function OptionAndInputDialog({
              <label className="text-sm font-medium text-secondary-foreground">
                {nameLabel}
              </label>
-              <Input
-                className="text-md"
-                value={name}
-                onChange={(e) => setName(e.target.value)}
-              />
+              <Input value={name} onChange={(e) => setName(e.target.value)} />
            </div>
            <div className="space-y-1">
              <label className="text-sm font-medium text-secondary-foreground">
                {descriptionLabel}
              </label>
              <Textarea
-                className="text-md"
                value={descriptionValue}
                onChange={(e) => setDescriptionValue(e.target.value)}
                rows={2}
@ -164,10 +159,9 @@ export default function OptionAndInputDialog({
          </div>
        )}

-        <DialogFooter className={cn("pt-2", isMobile && "gap-2")}>
+        <DialogFooter>
          <Button
            type="button"
-            variant="outline"
            disabled={isLoading}
            onClick={() => {
              setOpen(false);
--- a/web/src/components/overlay/dialog/SearchFilterDialog.tsx
+++ b/web/src/components/overlay/dialog/SearchFilterDialog.tsx
@ -349,7 +349,7 @@ function TimeRangeFilterContent({
          </PopoverTrigger>
          <PopoverContent className="flex flex-row items-center justify-center">
            <input
-              className="text-md mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+              className="mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
              id="startTime"
              type="time"
              value={selectedAfterHour}
@ -389,7 +389,7 @@ function TimeRangeFilterContent({
          </PopoverTrigger>
          <PopoverContent className="flex flex-col items-center">
            <input
-              className="text-md mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+              className="mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
              id="startTime"
              type="time"
              value={
--- a/web/src/components/overlay/dialog/TextEntryDialog.tsx
+++ b/web/src/components/overlay/dialog/TextEntryDialog.tsx
@ -9,8 +9,6 @@ import {
  DialogHeader,
  DialogTitle,
 } from "@/components/ui/dialog";
-import { cn } from "@/lib/utils";
-import { isMobile } from "react-device-detect";
 import { useTranslation } from "react-i18next";

 type TextEntryDialogProps = {
@ -63,7 +61,7 @@ export default function TextEntryDialog({
          forbiddenPattern={forbiddenPattern}
          forbiddenErrorMessage={forbiddenErrorMessage}
        >
-          <DialogFooter className={cn("pt-4", isMobile && "gap-2")}>
+          <DialogFooter>
            <Button
              type="button"
              disabled={isSaving}
--- a/web/src/components/player/LivePlayer.tsx
+++ b/web/src/components/player/LivePlayer.tsx
@ -443,7 +443,7 @@ export default function LivePlayer({
          <div className="absolute inset-0 rounded-lg bg-black/50 md:rounded-2xl" />
          <div className="absolute inset-0 left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center">
            <div className="flex flex-col items-center justify-center gap-2 rounded-lg bg-background/50 p-3 text-center">
-              <div className="text-md">{t("streamOffline.title")}</div>
+              <div>{t("streamOffline.title")}</div>
              <TbExclamationCircle className="size-6" />
              {!isCompact && (
                <p className="text-center text-sm">
--- a/web/src/components/settings/CloneCameraDialog.tsx
+++ b/web/src/components/settings/CloneCameraDialog.tsx
@ -977,7 +977,7 @@ export default function CloneCameraDialog({
              )}
            </div>

-            <DialogFooter className="flex flex-col items-stretch gap-3 sm:flex-row sm:items-center sm:justify-between sm:space-x-0">
+            <DialogFooter variant="split">
              <div className="flex flex-col gap-1 text-sm text-muted-foreground">
                {changeCount > 0 && (
                  <>
@ -1005,7 +1005,7 @@ export default function CloneCameraDialog({
                  </>
                )}
              </div>
-              <div className="flex w-full flex-col gap-2 sm:w-auto sm:flex-row">
+              <div className="flex w-full flex-col-reverse gap-2 sm:w-auto sm:flex-row">
                <Button
                  type="button"
                  disabled={isSubmitting}
--- a/web/src/components/settings/MotionMaskEditPane.tsx
+++ b/web/src/components/settings/MotionMaskEditPane.tsx
@ -22,7 +22,6 @@ import { FrigateConfig } from "@/types/frigateConfig";
 import { flattenPoints, interpolatePoints } from "@/utils/canvasUtil";
 import axios from "axios";
 import { toast } from "sonner";
-import { Toaster } from "../ui/sonner";
 import ActivityIndicator from "../indicators/activity-indicator";
 import { Link } from "react-router-dom";
 import { LuExternalLink } from "react-icons/lu";
@ -327,7 +326,6 @@ export default function MotionMaskEditPane({

  return (
    <>
-      <Toaster position="top-center" closeButton={true} />
      <Heading as="h3" className="my-2">
        {polygon.name.length
          ? t("masksAndZones.motionMasks.edit")
--- a/web/src/components/settings/ObjectMaskEditPane.tsx
+++ b/web/src/components/settings/ObjectMaskEditPane.tsx
@ -31,7 +31,6 @@ import { FaCheckCircle } from "react-icons/fa";
 import { flattenPoints, interpolatePoints } from "@/utils/canvasUtil";
 import axios from "axios";
 import { toast } from "sonner";
-import { Toaster } from "../ui/sonner";
 import ActivityIndicator from "../indicators/activity-indicator";
 import { useTranslation } from "react-i18next";
 import { getTranslatedLabel } from "@/utils/i18n";
@ -335,7 +334,6 @@ export default function ObjectMaskEditPane({

  return (
    <>
-      <Toaster position="top-center" closeButton={true} />
      <Heading as="h3" className="my-2">
        {polygon.name.length
          ? t("masksAndZones.objectMasks.edit")
--- a/web/src/components/settings/PolygonItem.tsx
+++ b/web/src/components/settings/PolygonItem.tsx
@ -24,12 +24,12 @@ import { toRGBColorString } from "@/utils/canvasUtil";
 import { Polygon, PolygonType } from "@/types/canvas";
 import { useCallback, useMemo, useState } from "react";
 import axios from "axios";
-import { Toaster } from "@/components/ui/sonner";
 import { toast } from "sonner";
 import useSWR from "swr";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { reviewQueries } from "@/utils/zoneEdutUtil";
 import IconWrapper from "../ui/icon-wrapper";
+import { buttonVariants } from "@/components/ui/button";
 import { Trans, useTranslation } from "react-i18next";
 import ActivityIndicator from "../indicators/activity-indicator";
 import { cn } from "@/lib/utils";
@ -368,8 +368,6 @@ export default function PolygonItem({

  return (
    <>
-      <Toaster position="top-center" closeButton={true} />
-
      <div
        key={index}
        className="transition-background relative my-1.5 flex flex-row items-center justify-between rounded-lg p-1 duration-100"
@ -511,7 +509,7 @@ export default function PolygonItem({
                {t("button.cancel", { ns: "common" })}
              </AlertDialogCancel>
              <AlertDialogAction
-                className="bg-destructive text-white hover:bg-destructive/90"
+                className={cn(buttonVariants({ variant: "destructive" }))}
                onClick={handleDelete}
              >
                {polygon.polygonSource === "override"
--- a/web/src/components/settings/SearchSettings.tsx
+++ b/web/src/components/settings/SearchSettings.tsx
@ -59,9 +59,7 @@ export default function ExploreSettings({
    <div className={cn(className, "my-3 space-y-5 py-3 md:mt-0 md:py-0")}>
      <div className="space-y-4">
        <div className="space-y-0.5">
-          <div className="text-md">
-            {t("explore.settings.defaultView.title")}
-          </div>
+          <div>{t("explore.settings.defaultView.title")}</div>
          <div className="space-y-1 text-xs text-muted-foreground">
            {t("explore.settings.defaultView.desc")}
          </div>
@ -97,9 +95,7 @@ export default function ExploreSettings({
          <DropdownMenuSeparator />
          <div className="flex w-full flex-col space-y-4">
            <div className="space-y-0.5">
-              <div className="text-md">
-                {t("explore.settings.gridColumns.title")}
-              </div>
+              <div>{t("explore.settings.gridColumns.title")}</div>
              <div className="space-y-1 text-xs text-muted-foreground">
                {t("explore.settings.gridColumns.desc")}
              </div>
@ -162,9 +158,7 @@ export function SearchTypeContent({
      <div className="overflow-x-hidden">
        <DropdownMenuSeparator className="mb-3" />
        <div className="space-y-0.5">
-          <div className="text-md">
-            {t("explore.settings.searchSource.label")}
-          </div>
+          <div>{t("explore.settings.searchSource.label")}</div>
          <div className="space-y-1 text-xs text-muted-foreground">
            {t("explore.settings.searchSource.desc")}
          </div>
--- a/web/src/components/settings/ZoneEditPane.tsx
+++ b/web/src/components/settings/ZoneEditPane.tsx
@ -24,7 +24,6 @@ import { Label } from "../ui/label";
 import PolygonEditControls from "./PolygonEditControls";
 import { FaCheckCircle } from "react-icons/fa";
 import axios from "axios";
-import { Toaster } from "@/components/ui/sonner";
 import { toast } from "sonner";
 import { flattenPoints, interpolatePoints } from "@/utils/canvasUtil";
 import ActivityIndicator from "../indicators/activity-indicator";
@ -628,7 +627,6 @@ export default function ZoneEditPane({

  return (
    <>
-      <Toaster position="top-center" closeButton={true} />
      <Heading as="h3" className="my-2">
        {polygon.name.length
          ? t("masksAndZones.zones.edit")
@ -709,7 +707,7 @@ export default function ZoneEditPane({
                <FormLabel>{t("masksAndZones.zones.inertia.title")}</FormLabel>
                <FormControl>
                  <Input
-                    className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                    className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
                    placeholder="3"
                    {...field}
                  />
@ -734,7 +732,7 @@ export default function ZoneEditPane({
                </FormLabel>
                <FormControl>
                  <Input
-                    className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                    className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
                    placeholder="0"
                    {...field}
                  />
@ -864,7 +862,7 @@ export default function ZoneEditPane({
                      </FormLabel>
                      <FormControl>
                        <Input
-                          className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                          className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
                          {...field}
                          onFocus={() => setActiveLine(1)}
                          onBlur={() => setActiveLine(undefined)}
@ -891,7 +889,7 @@ export default function ZoneEditPane({
                      </FormLabel>
                      <FormControl>
                        <Input
-                          className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                          className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
                          {...field}
                          onFocus={() => setActiveLine(2)}
                          onBlur={() => setActiveLine(undefined)}
@ -918,7 +916,7 @@ export default function ZoneEditPane({
                      </FormLabel>
                      <FormControl>
                        <Input
-                          className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                          className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
                          {...field}
                          onFocus={() => setActiveLine(3)}
                          onBlur={() => setActiveLine(undefined)}
@ -945,7 +943,7 @@ export default function ZoneEditPane({
                      </FormLabel>
                      <FormControl>
                        <Input
-                          className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                          className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
                          {...field}
                          onFocus={() => setActiveLine(4)}
                          onBlur={() => setActiveLine(undefined)}
@ -972,7 +970,7 @@ export default function ZoneEditPane({
                      </FormLabel>
                      <FormControl>
                        <Input
-                          className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                          className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
                          {...field}
                        />
                      </FormControl>
--- a/web/src/components/settings/wizard/Step1NameCamera.tsx
+++ b/web/src/components/settings/wizard/Step1NameCamera.tsx
@ -171,7 +171,7 @@ export default function Step1NameCamera({
                </FormLabel>
                <FormControl>
                  <Input
-                    className="text-md h-8"
+                    className="h-8"
                    placeholder={t("cameraWizard.step1.cameraNamePlaceholder")}
                    {...field}
                  />
@ -192,7 +192,7 @@ export default function Step1NameCamera({
                  </FormLabel>
                  <FormControl>
                    <Input
-                      className="text-md h-8"
+                      className="h-8"
                      placeholder="192.168.1.100"
                      {...field}
                    />
@ -212,7 +212,7 @@ export default function Step1NameCamera({
                  </FormLabel>
                  <FormControl>
                    <Input
-                      className="text-md h-8"
+                      className="h-8"
                      placeholder={t("cameraWizard.step1.usernamePlaceholder")}
                      {...field}
                    />
@ -233,7 +233,7 @@ export default function Step1NameCamera({
                  <FormControl>
                    <div className="relative">
                      <Input
-                        className="text-md h-8 pr-10"
+                        className="h-8 pr-10"
                        type={showPassword ? "text" : "password"}
                        placeholder={t(
                          "cameraWizard.step1.passwordPlaceholder",
@ -316,7 +316,7 @@ export default function Step1NameCamera({
                  </FormLabel>
                  <FormControl>
                    <Input
-                      className="text-md h-8"
+                      className="h-8"
                      type="text"
                      {...field}
                      placeholder="80"
@ -440,7 +440,7 @@ export default function Step1NameCamera({
                      </FormLabel>
                      <FormControl>
                        <Input
-                          className="text-md h-8"
+                          className="h-8"
                          placeholder="rtsp://username:password@host:port/path"
                          {...field}
                        />
@ -455,7 +455,7 @@ export default function Step1NameCamera({
        </form>
      </Form>

-      <div className="flex flex-col gap-3 pt-3 sm:flex-row sm:justify-end sm:gap-4">
+      <div className="flex flex-col-reverse gap-2 pt-3 sm:flex-row sm:justify-end">
        <Button type="button" onClick={onCancel} className="sm:flex-1">
          {t("button.cancel", { ns: "common" })}
        </Button>
--- a/web/src/components/settings/wizard/Step2ProbeOrSnapshot.tsx
+++ b/web/src/components/settings/wizard/Step2ProbeOrSnapshot.tsx
@ -626,7 +626,7 @@ function ProbeFooterButtons({
          <ActivityIndicator className="size-4" />
          {t("cameraWizard.step2.probing")}
        </div>
-        <div className="flex flex-col gap-3 pt-3 sm:flex-row sm:justify-end sm:gap-4">
+        <div className="flex flex-col-reverse gap-2 pt-3 sm:flex-row sm:justify-end">
          <Button type="button" onClick={onBack} disabled className="sm:flex-1">
            {t("button.back", { ns: "common" })}
          </Button>
@ -649,7 +649,7 @@ function ProbeFooterButtons({
    return (
      <div className="space-y-4">
        <div className="text-sm text-destructive">{probeError}</div>
-        <div className="flex flex-col gap-3 pt-3 sm:flex-row sm:justify-end sm:gap-4">
+        <div className="flex flex-col-reverse gap-2 pt-3 sm:flex-row sm:justify-end">
          <Button type="button" onClick={onBack} className="sm:flex-1">
            {t("button.back", { ns: "common" })}
          </Button>
@ -670,7 +670,7 @@ function ProbeFooterButtons({
  // If manual mode, show Continue when test succeeded, otherwise show Test (calls onManualTest)
  if (mode === "manual") {
    return (
-      <div className="flex flex-col gap-3 pt-3 sm:flex-row sm:justify-end sm:gap-4">
+      <div className="flex flex-col-reverse gap-2 pt-3 sm:flex-row sm:justify-end">
        <Button type="button" onClick={onBack} className="sm:flex-1">
          {t("button.back", { ns: "common" })}
        </Button>
@ -707,7 +707,7 @@ function ProbeFooterButtons({

  // Default probe footer
  return (
-    <div className="flex flex-col gap-3 pt-3 sm:flex-row sm:justify-end sm:gap-4">
+    <div className="flex flex-col-reverse gap-2 pt-3 sm:flex-row sm:justify-end">
      <Button type="button" onClick={onBack} className="sm:flex-1">
        {t("button.back", { ns: "common" })}
      </Button>
--- a/web/src/components/settings/wizard/Step3StreamConfig.tsx
+++ b/web/src/components/settings/wizard/Step3StreamConfig.tsx
@ -731,7 +731,7 @@ export default function Step3StreamConfig({
        </div>
      )}

-      <div className="flex flex-col gap-3 pt-6 sm:flex-row sm:justify-end sm:gap-4">
+      <div className="flex flex-col-reverse gap-2 pt-6 sm:flex-row sm:justify-end">
        {onBack && (
          <Button type="button" onClick={onBack} className="sm:flex-1">
            {t("button.back", { ns: "common" })}
--- a/web/src/components/settings/wizard/Step4Validation.tsx
+++ b/web/src/components/settings/wizard/Step4Validation.tsx
@ -490,7 +490,7 @@ export default function Step4Validation({
        </div>
      </div>

-      <div className="flex flex-col gap-3 pt-6 sm:flex-row sm:justify-end sm:gap-4">
+      <div className="flex flex-col-reverse gap-2 pt-6 sm:flex-row sm:justify-end">
        {onBack && (
          <Button type="button" onClick={onBack} className="sm:flex-1">
            {t("button.back", { ns: "common" })}
--- a/web/src/components/trigger/wizard/Step1NameAndType.tsx
+++ b/web/src/components/trigger/wizard/Step1NameAndType.tsx
@ -176,20 +176,15 @@ export default function Step1NameAndType({
          )}
        />

-        <div className="flex gap-2 pt-4">
-          <Button
-            type="button"
-            variant="outline"
-            onClick={onCancel}
-            className="flex-1"
-          >
+        <div className="flex flex-col-reverse gap-2 pt-4 sm:flex-row sm:justify-end">
+          <Button type="button" onClick={onCancel} className="sm:flex-1">
            {t("button.cancel", { ns: "common" })}
          </Button>
          <Button
            type="submit"
            variant="select"
            disabled={!form.formState.isValid}
-            className="flex-1"
+            className="sm:flex-1"
          >
            {t("button.next", { ns: "common" })}
          </Button>
--- a/web/src/components/trigger/wizard/Step2ConfigureData.tsx
+++ b/web/src/components/trigger/wizard/Step2ConfigureData.tsx
@ -109,20 +109,15 @@ export default function Step2ConfigureData({
          )}
        />

-        <div className="flex gap-2 pt-4">
-          <Button
-            type="button"
-            variant="outline"
-            onClick={onBack}
-            className="flex-1"
-          >
+        <div className="flex flex-col-reverse gap-2 pt-4 sm:flex-row sm:justify-end">
+          <Button type="button" onClick={onBack} className="sm:flex-1">
            {t("button.back", { ns: "common" })}
          </Button>
          <Button
            type="submit"
            variant="select"
            disabled={!form.formState.isValid}
-            className="flex-1"
+            className="sm:flex-1"
          >
            {t("button.next", { ns: "common" })}
          </Button>
--- a/web/src/components/trigger/wizard/Step3ThresholdAndActions.tsx
+++ b/web/src/components/trigger/wizard/Step3ThresholdAndActions.tsx
@ -181,20 +181,15 @@ export default function Step3ThresholdAndActions({
          )}
        />

-        <div className="flex gap-2 pt-4">
-          <Button
-            type="button"
-            variant="outline"
-            onClick={onBack}
-            className="flex-1"
-          >
+        <div className="flex flex-col-reverse gap-2 pt-4 sm:flex-row sm:justify-end">
+          <Button type="button" onClick={onBack} className="sm:flex-1">
            {t("button.back", { ns: "common" })}
          </Button>
          <Button
            type="button"
            onClick={handleSave}
            disabled={isLoading}
-            className="flex-1"
+            className="sm:flex-1"
            variant="select"
          >
            {isLoading && <ActivityIndicator className="mr-2 size-5" />}
--- a/web/src/components/ui/alert-dialog.tsx
+++ b/web/src/components/ui/alert-dialog.tsx
@ -1,6 +1,8 @@
 import * as React from "react";
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";

+import { cva, type VariantProps } from "class-variance-authority";
+
 import { cn } from "@/lib/utils";
 import { buttonVariants } from "@/components/ui/button";

@ -59,15 +61,35 @@ const AlertDialogHeader = ({
 );
 AlertDialogHeader.displayName = "AlertDialogHeader";

+const alertDialogFooterVariants = cva(
+  "flex flex-col-reverse gap-2 sm:flex-row",
+  {
+    variants: {
+      variant: {
+        // 1-2 action buttons: full-width stacked on mobile, right-aligned auto on desktop.
+        // [&>button] only targets real button children, so non-button siblings are untouched.
+        actions: "sm:justify-end [&>button]:w-full sm:[&>button]:w-auto",
+        // context content (text/popover) alongside actions: space-between on desktop.
+        // flex-col (not -reverse) keeps the context above the buttons when stacked on mobile.
+        split: "flex-col sm:items-center sm:justify-between",
+        // alignment only; never touches children. Escape hatch for unusual content.
+        plain: "sm:justify-end",
+      },
+    },
+    defaultVariants: {
+      variant: "actions",
+    },
+  },
+);
+
 const AlertDialogFooter = ({
  className,
+  variant,
  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
+}: React.HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof alertDialogFooterVariants>) => (
  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className,
-    )}
+    className={cn(alertDialogFooterVariants({ variant }), className)}
    {...props}
  />
 );
--- a/web/src/components/ui/button.tsx
+++ b/web/src/components/ui/button.tsx
@ -11,8 +11,7 @@ const buttonVariants = cva(
      variant: {
        default: "bg-secondary text-primary hover:bg-secondary/80",
        select: "bg-selected text-selected-foreground hover:bg-opacity-90",
-        destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        destructive: "bg-destructive text-white hover:bg-destructive/90",
        outline:
          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
        secondary: "bg-primary text-primary-foreground hover:bg-primary/90",
--- a/web/src/components/ui/dialog.tsx
+++ b/web/src/components/ui/dialog.tsx
@ -1,5 +1,6 @@
 import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { cva, type VariantProps } from "class-variance-authority";
 import { X } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { useHistoryBack } from "@/hooks/use-history-back";
@ -107,15 +108,32 @@ const DialogHeader = ({
 );
 DialogHeader.displayName = "DialogHeader";

+const dialogFooterVariants = cva("flex flex-col-reverse gap-2 sm:flex-row", {
+  variants: {
+    variant: {
+      // 1-2 action buttons: full-width stacked on mobile, right-aligned auto on desktop.
+      // [&>button] only targets real button children, so non-button siblings are untouched.
+      actions: "sm:justify-end [&>button]:w-full sm:[&>button]:w-auto",
+      // context content (text/popover) alongside actions: space-between on desktop.
+      // flex-col (not -reverse) keeps the context above the buttons when stacked on mobile.
+      split: "flex-col sm:items-center sm:justify-between",
+      // alignment only; never touches children. Escape hatch for unusual content.
+      plain: "sm:justify-end",
+    },
+  },
+  defaultVariants: {
+    variant: "actions",
+  },
+});
+
 const DialogFooter = ({
  className,
+  variant,
  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
+}: React.HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof dialogFooterVariants>) => (
  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className,
-    )}
+    className={cn(dialogFooterVariants({ variant }), className)}
    {...props}
  />
 );
--- a/web/src/pages/Exports.tsx
+++ b/web/src/pages/Exports.tsx
@ -608,7 +608,6 @@ function Exports() {
              {t("button.cancel", { ns: "common" })}
            </AlertDialogCancel>
            <Button
-              className="text-white"
              aria-label="Delete Export"
              variant="destructive"
              onClick={() => onHandleDelete()}
@ -658,7 +657,6 @@ function Exports() {
              {t("button.cancel", { ns: "common" })}
            </AlertDialogCancel>
            <Button
-              className="text-white"
              variant="destructive"
              onClick={() => void handleDeleteCase()}
            >
@ -744,7 +742,7 @@ function Exports() {
                </Button>
              )}
              <Input
-                className="text-md w-full bg-muted md:w-1/2"
+                className="w-full bg-muted md:w-1/2"
                placeholder={t("search")}
                value={search}
                onChange={(e) => setSearch(e.target.value)}
@ -1277,8 +1275,8 @@ function CaseEditorDialog({
            value={description}
            onChange={(event) => setDescription(event.target.value)}
          />
-          <div className="flex justify-end gap-2">
-            <Button variant="outline" onClick={onClose}>
+          <DialogFooter>
+            <Button onClick={onClose}>
              {t("button.cancel", { ns: "common" })}
            </Button>
            <Button
@ -1295,7 +1293,7 @@ function CaseEditorDialog({
                ? t("button.save", { ns: "common" })
                : t("toolbar.newCase")}
            </Button>
-          </div>
+          </DialogFooter>
        </div>
      </DialogContent>
    </Dialog>
@ -1427,13 +1425,12 @@ function CaseAddExportDialog({
            )}
          </div>
        </div>
-        <DialogFooter className="flex-row justify-end gap-2">
-          <Button variant="outline" size="sm" onClick={onClose}>
+        <DialogFooter>
+          <Button onClick={onClose}>
            {t("button.cancel", { ns: "common" })}
          </Button>
          <Button
            variant="select"
-            size="sm"
            disabled={selectedIds.length === 0 || isAdding}
            onClick={() => void handleAdd()}
          >
--- a/web/src/pages/FaceLibrary.tsx
+++ b/web/src/pages/FaceLibrary.tsx
@ -567,7 +567,6 @@ function LibrarySelector({
            </Button>
            <Button
              variant="destructive"
-              className="text-white"
              onClick={() => {
                if (confirmDelete) {
                  handleDeleteFace(confirmDelete);
--- a/web/src/pages/Replay.tsx
+++ b/web/src/pages/Replay.tsx
@ -332,7 +332,7 @@ export default function Replay() {
              <Button
                variant="destructive"
                size="sm"
-                className="flex items-center gap-2 text-white"
+                className="flex items-center gap-2"
                disabled={isStopping}
              >
                {isStopping && <ActivityIndicator className="size-4" />}
@ -355,10 +355,7 @@ export default function Replay() {
                </AlertDialogCancel>
                <AlertDialogAction
                  onClick={handleStop}
-                  className={cn(
-                    buttonVariants({ variant: "destructive" }),
-                    "text-white",
-                  )}
+                  className={cn(buttonVariants({ variant: "destructive" }))}
                >
                  {t("page.confirmStop.confirm")}
                </AlertDialogAction>
@ -687,7 +684,7 @@ function ObjectList({ cameraConfig, objects, config }: ObjectListProps) {
                </div>
              </div>
              <div className="flex w-8/12 flex-row items-center justify-end">
-                <div className="text-md mr-2 w-1/3">
+                <div className="mr-2 w-1/3">
                  <div className="flex flex-col items-end justify-end">
                    <p className="mb-1.5 text-sm text-primary-variant">
                      {t("debug.objectShapeFilterDrawing.score", {
@ -697,7 +694,7 @@ function ObjectList({ cameraConfig, objects, config }: ObjectListProps) {
                    {obj.score ? (obj.score * 100).toFixed(1).toString() : "-"}%
                  </div>
                </div>
-                <div className="text-md mr-2 w-1/3">
+                <div className="mr-2 w-1/3">
                  <div className="flex flex-col items-end justify-end">
                    <p className="mb-1.5 text-sm text-primary-variant">
                      {t("debug.objectShapeFilterDrawing.ratio", {
@ -707,7 +704,7 @@ function ObjectList({ cameraConfig, objects, config }: ObjectListProps) {
                    {obj.ratio ? obj.ratio.toFixed(2).toString() : "-"}
                  </div>
                </div>
-                <div className="text-md mr-2 w-1/3">
+                <div className="mr-2 w-1/3">
                  <div className="flex flex-col items-end justify-end">
                    <p className="mb-1.5 text-sm text-primary-variant">
                      {t("debug.objectShapeFilterDrawing.area", {
--- a/web/src/pages/Settings.tsx
+++ b/web/src/pages/Settings.tsx
@ -1616,7 +1616,7 @@ export default function Settings() {
  if (isMobile) {
    return (
      <>
-        <Toaster position="top-center" />
+        <Toaster position="top-center" closeButton={true} />
        {!contentMobileOpen && (
          <div
            key={`mobile-menu-${selectedCamera}`}
@ -1872,7 +1872,7 @@ export default function Settings() {

  return (
    <div className="flex h-full flex-col">
-      <Toaster position="top-center" />
+      <Toaster position="top-center" closeButton={true} />
      <div className="flex min-h-16 items-center justify-between border-b border-secondary p-3">
        <div className="mr-2 flex w-full items-center justify-between gap-3">
          <Heading as="h3" className="mb-0">
--- a/web/src/views/classification/ModelTrainingView.tsx
+++ b/web/src/views/classification/ModelTrainingView.tsx
@ -668,7 +668,6 @@ function LibrarySelector({
                </Button>
                <Button
                  variant="destructive"
-                  className="text-white"
                  onClick={() => {
                    if (confirmDelete) {
                      handleDeleteCategory(confirmDelete);
--- a/web/src/views/events/EventView.tsx
+++ b/web/src/views/events/EventView.tsx
@ -1389,9 +1389,8 @@ function MotionReview({
                    selectedCells={pendingFilterCells}
                    onCellsChange={setPendingFilterCells}
                  />
-                  <DialogFooter className="justify-end gap-1">
+                  <DialogFooter>
                    <Button
-                      variant="outline"
                      disabled={pendingFilterCells.size === 0}
                      onClick={() => {
                        setPendingFilterCells(new Set());
@ -1432,9 +1431,7 @@ function MotionReview({
                  <div className="space-y-4 py-2">
                    {!isDesktop && (
                      <div className="space-y-1">
-                        <div className="text-md">
-                          {t("motionPreviews.mobileSettingsTitle")}
-                        </div>
+                        <div>{t("motionPreviews.mobileSettingsTitle")}</div>
                        <div className="text-xs text-muted-foreground">
                          {t("motionPreviews.mobileSettingsDesc")}
                        </div>
@ -1443,9 +1440,7 @@ function MotionReview({

                    <div className="space-y-3">
                      <div className="space-y-0.5">
-                        <div className="text-md">
-                          {t("motionPreviews.speed")}
-                        </div>
+                        <div>{t("motionPreviews.speed")}</div>
                        <div className="text-xs text-muted-foreground">
                          {t("motionPreviews.speedDesc")}
                        </div>
@ -1474,7 +1469,7 @@ function MotionReview({

                    <div className="space-y-3">
                      <div className="space-y-0.5">
-                        <div className="text-md">{t("motionPreviews.dim")}</div>
+                        <div>{t("motionPreviews.dim")}</div>
                        <div className="text-xs text-muted-foreground">
                          {t("motionPreviews.dimDesc")}
                        </div>
--- a/web/src/views/live/LiveCameraView.tsx
+++ b/web/src/views/live/LiveCameraView.tsx
@ -784,7 +784,7 @@ export default function LiveCameraView({
              transcription != null && (
                <div
                  ref={transcriptionRef}
-                  className="text-md scrollbar-container absolute bottom-4 left-1/2 max-h-[15vh] w-[75%] -translate-x-1/2 overflow-y-auto rounded-lg bg-black/70 p-2 text-white md:w-[50%]"
+                  className="scrollbar-container absolute bottom-4 left-1/2 max-h-[15vh] w-[75%] -translate-x-1/2 overflow-y-auto rounded-lg bg-black/70 p-2 text-white md:w-[50%]"
                >
                  {transcription}
                </div>
--- a/web/src/views/motion-search/MotionSearchDialog.tsx
+++ b/web/src/views/motion-search/MotionSearchDialog.tsx
@ -630,7 +630,7 @@ function SearchRangeSelector({
              />
              <SelectSeparator className="bg-secondary" />
              <input
-                className="text-md mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                className="mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
                id="startTime"
                type="time"
                value={startClock}
@ -696,7 +696,7 @@ function SearchRangeSelector({
              />
              <SelectSeparator className="bg-secondary" />
              <input
-                className="text-md mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                className="mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
                id="endTime"
                type="time"
                value={endClock}
--- a/web/src/views/motion-search/MotionSearchView.tsx
+++ b/web/src/views/motion-search/MotionSearchView.tsx
@ -1052,7 +1052,6 @@ export default function MotionSearchView({
              </div>
              <Button
                variant="destructive"
-                className="text-white"
                size="sm"
                onClick={() => {
                  void cancelMotionSearchJob(jobId, jobCamera);
--- a/web/src/views/settings/AuthenticationView.tsx
+++ b/web/src/views/settings/AuthenticationView.tsx
@ -1,7 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
 import { FrigateConfig } from "@/types/frigateConfig";
-import { Toaster } from "@/components/ui/sonner";
 import useSWR from "swr";
 import Heading from "@/components/ui/heading";
 import { User } from "@/types/user";
@ -790,7 +789,6 @@ export default function AuthenticationView({

  return (
    <div className="flex size-full flex-col">
-      <Toaster position="top-center" closeButton={true} />
      <div className="scrollbar-container order-last mb-2 mt-2 flex h-full w-full flex-col overflow-y-auto pb-2 md:order-none md:mr-3 md:mt-0">
        {section === "users" && UsersSection}
        {section === "roles" && RolesSection}
--- a/web/src/views/settings/CameraManagementView.tsx
+++ b/web/src/views/settings/CameraManagementView.tsx
@ -250,7 +250,7 @@ export default function CameraManagementView({
                <Button
                  variant="destructive"
                  onClick={() => setShowDeleteDialog(true)}
-                  className="mb-2 flex max-w-48 items-center gap-2 text-white"
+                  className="mb-2 flex max-w-48 items-center gap-2"
                >
                  <LuTrash2 className="h-4 w-4" />
                  {t("cameraManagement.deleteCamera")}
@ -261,7 +261,7 @@ export default function CameraManagementView({
            {enabledCameras.length + disabledCameras.length > 0 && (
              <div className="mb-5 space-y-3">
                <div className="space-y-0.5">
-                  <div className="text-md font-medium">
+                  <div className="font-medium">
                    {t("cameraManagement.clone.sectionTitle")}
                  </div>
                  <p className="text-sm text-muted-foreground">
--- a/web/src/views/settings/DetectorsAndModelSettingsView.tsx
+++ b/web/src/views/settings/DetectorsAndModelSettingsView.tsx
@ -22,7 +22,6 @@ import ActivityIndicator from "@/components/indicators/activity-indicator";
 import Heading from "@/components/ui/heading";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { Toaster } from "@/components/ui/sonner";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
 import {
@ -598,7 +597,6 @@ export default function DetectorsAndModelSettingsView({

  return (
    <div className="flex size-full flex-col md:pr-2">
-      <Toaster position="top-center" closeButton={true} />
      <div className="mb-1 flex items-center justify-between gap-4 pt-2">
        <div className="flex max-w-5xl flex-col">
          <Heading as="h4">{t("detectorsAndModel.title")}</Heading>
--- a/web/src/views/settings/EnrichmentsSettingsView.tsx
+++ b/web/src/views/settings/EnrichmentsSettingsView.tsx
@ -306,9 +306,7 @@ export default function EnrichmentsSettingsView({
          </div>
          <div className="mt-2 flex flex-col space-y-6">
            <div className="space-y-0.5">
-              <div className="text-md">
-                {t("enrichments.semanticSearch.modelSize.label")}
-              </div>
+              <div>{t("enrichments.semanticSearch.modelSize.label")}</div>
              <div className="space-y-1 text-sm text-muted-foreground">
                <p>
                  <Trans ns="views/settings">
@ -436,9 +434,7 @@ export default function EnrichmentsSettingsView({
              </div>
            </div>
            <div className="space-y-0.5">
-              <div className="text-md">
-                {t("enrichments.faceRecognition.modelSize.label")}
-              </div>
+              <div>{t("enrichments.faceRecognition.modelSize.label")}</div>
              <div className="space-y-1 text-sm text-muted-foreground">
                <p>
                  <Trans ns="views/settings">
--- a/web/src/views/settings/FrigatePlusSettingsView.tsx
+++ b/web/src/views/settings/FrigatePlusSettingsView.tsx
@ -4,7 +4,6 @@ import { Link, useNavigate } from "react-router-dom";
 import useSWR from "swr";
 import { CheckCircle2, XCircle } from "lucide-react";
 import { LuExternalLink } from "react-icons/lu";
-import { Toaster } from "@/components/ui/sonner";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
 import { Button } from "@/components/ui/button";
 import Heading from "@/components/ui/heading";
@ -35,7 +34,6 @@ export default function FrigatePlusSettingsView(_props: SettingsPageProps) {

  return (
    <div className="flex size-full flex-col md:pr-2">
-      <Toaster position="top-center" closeButton={true} />
      <div className="w-full max-w-5xl space-y-6 pt-2">
        <div className="flex flex-col gap-0">
          <Heading as="h4" className="mb-2">
--- a/web/src/views/settings/Go2RtcStreamsSettingsView.tsx
+++ b/web/src/views/settings/Go2RtcStreamsSettingsView.tsx
@ -446,10 +446,7 @@ export default function Go2RtcStreamsSettingsView({
              {t("button.cancel", { ns: "common" })}
            </AlertDialogCancel>
            <AlertDialogAction
-              className={cn(
-                buttonVariants({ variant: "destructive" }),
-                "text-white",
-              )}
+              className={cn(buttonVariants({ variant: "destructive" }))}
              onClick={() => deleteDialog && deleteStream(deleteDialog)}
            >
              {t("go2rtcStreams.deleteStream")}
@ -533,7 +530,6 @@ function RenameStreamDialog({
        <div className="space-y-2 py-2">
          <Label>{t("go2rtcStreams.newStreamName")}</Label>
          <Input
-            className="text-md"
            value={newName}
            onChange={(e) => setNewName(e.target.value)}
            onKeyDown={(e) => {
@ -547,7 +543,7 @@ function RenameStreamDialog({
            <p className="text-xs text-destructive">{nameError}</p>
          )}
        </div>
-        <DialogFooter className="gap-2 sm:justify-end md:gap-0">
+        <DialogFooter>
          <DialogClose asChild>
            <Button>{t("button.cancel", { ns: "common" })}</Button>
          </DialogClose>
@ -614,7 +610,6 @@ function AddStreamDialog({
          <Label>{t("go2rtcStreams.streamName")}</Label>
          <Input
            value={name}
-            className="text-md"
            onChange={(e) => setName(e.target.value)}
            onKeyDown={(e) => {
              if (e.key === "Enter" && canSubmit) {
@ -628,7 +623,7 @@ function AddStreamDialog({
            <p className="text-xs text-destructive">{nameError}</p>
          )}
        </div>
-        <DialogFooter className="gap-2 sm:justify-end md:gap-0">
+        <DialogFooter>
          <DialogClose asChild>
            <Button>{t("button.cancel", { ns: "common" })}</Button>
          </DialogClose>
@ -924,7 +919,7 @@ function StreamUrlEntry({
        <div className="flex items-center gap-2">
          <div className="relative flex-1">
            <Input
-              className="text-md h-8 pr-10"
+              className="h-8 pr-10"
              value={baseUrlForDisplay}
              onChange={(e) => handleBaseUrlChange(e.target.value)}
              onFocus={() => setIsFocused(true)}
--- a/web/src/views/settings/MasksAndZonesView.tsx
+++ b/web/src/views/settings/MasksAndZonesView.tsx
@ -15,7 +15,6 @@ import {
 } from "@/components/ui/hover-card";
 import copy from "copy-to-clipboard";
 import { toast } from "sonner";
-import { Toaster } from "@/components/ui/sonner";
 import { Button } from "@/components/ui/button";
 import {
  Tooltip,
@ -730,7 +729,6 @@ 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-2 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-3 md:mt-0 md:w-3/12 md:min-w-0 md:shrink-0">
            {editPane == "zone" && (
              <ZoneEditPane
@ -793,7 +791,7 @@ export default function MasksAndZonesView({
                      <div className="my-3 flex flex-row items-center justify-between">
                        <HoverCard>
                          <HoverCardTrigger asChild>
-                            <div className="text-md cursor-default">
+                            <div className="cursor-default">
                              {t("masksAndZones.zones.label")}
                            </div>
                          </HoverCardTrigger>
@ -871,7 +869,7 @@ export default function MasksAndZonesView({
                      <div className="my-3 flex flex-row items-center justify-between">
                        <HoverCard>
                          <HoverCardTrigger asChild>
-                            <div className="text-md cursor-default">
+                            <div className="cursor-default">
                              {t("masksAndZones.motionMasks.label")}
                            </div>
                          </HoverCardTrigger>
@ -953,7 +951,7 @@ export default function MasksAndZonesView({
                      <div className="my-3 flex flex-row items-center justify-between">
                        <HoverCard>
                          <HoverCardTrigger asChild>
-                            <div className="text-md cursor-default">
+                            <div className="cursor-default">
                              {t("masksAndZones.objectMasks.label")}
                            </div>
                          </HoverCardTrigger>
--- a/web/src/views/settings/MediaSyncSettingsView.tsx
+++ b/web/src/views/settings/MediaSyncSettingsView.tsx
@ -2,7 +2,6 @@ import Heading from "@/components/ui/heading";
 import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
 import { Separator } from "@/components/ui/separator";
-import { Toaster } from "@/components/ui/sonner";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
 import { useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
@ -105,7 +104,6 @@ export default function MediaSyncSettingsView() {
  return (
    <>
      <div className="flex size-full flex-col md:flex-row">
-        <Toaster position="top-center" closeButton={true} />
        <div className="scrollbar-container order-last mb-2 mt-2 flex h-full w-full flex-col overflow-y-auto px-2 md:order-none">
          <div className="grid w-full grid-cols-1 gap-4 md:grid-cols-2">
            <div className="col-span-1">
--- a/web/src/views/settings/MotionTunerView.tsx
+++ b/web/src/views/settings/MotionTunerView.tsx
@ -15,7 +15,6 @@ import {
 import { Skeleton } from "@/components/ui/skeleton";
 import { Button } from "@/components/ui/button";
 import { Switch } from "@/components/ui/switch";
-import { Toaster } from "@/components/ui/sonner";
 import { toast } from "sonner";
 import { Separator } from "@/components/ui/separator";
 import { Link } from "react-router-dom";
@ -184,7 +183,6 @@ export default function MotionTunerView({

  return (
    <div className="flex size-full flex-col md:flex-row">
-      <Toaster position="top-center" closeButton={true} />
      <div className="scrollbar-container order-last mb-2 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-3 md:mt-0 md:w-3/12">
        <Heading as="h4" className="mb-2">
          {t("motionDetectionTuner.title")}
@ -208,7 +206,7 @@ export default function MotionTunerView({
        <div className="flex w-full flex-col space-y-6">
          <div className="mt-2 space-y-6">
            <div className="space-y-0.5">
-              <Label htmlFor="motion-threshold" className="text-md">
+              <Label htmlFor="motion-threshold">
                {t("motionDetectionTuner.Threshold.title")}
              </Label>
              <div className="my-2 text-sm text-muted-foreground">
@ -237,7 +235,7 @@ export default function MotionTunerView({
          </div>
          <div className="mt-2 space-y-6">
            <div className="space-y-0.5">
-              <Label htmlFor="motion-threshold" className="text-md">
+              <Label htmlFor="motion-threshold">
                {t("motionDetectionTuner.contourArea.title")}
              </Label>
              <div className="my-2 text-sm text-muted-foreground">
--- a/web/src/views/settings/ObjectSettingsView.tsx
+++ b/web/src/views/settings/ObjectSettingsView.tsx
@ -415,7 +415,7 @@ function ObjectList({ cameraConfig, objects }: ObjectListProps) {
                  </div>
                </div>
                <div className="flex w-8/12 flex-row items-center justify-end">
-                  <div className="text-md mr-2 w-1/3">
+                  <div className="mr-2 w-1/3">
                    <div className="flex flex-col items-end justify-end">
                      <p className="mb-1.5 text-sm text-primary-variant">
                        {t("debug.objectShapeFilterDrawing.score")}
@ -426,7 +426,7 @@ function ObjectList({ cameraConfig, objects }: ObjectListProps) {
                      %
                    </div>
                  </div>
-                  <div className="text-md mr-2 w-1/3">
+                  <div className="mr-2 w-1/3">
                    <div className="flex flex-col items-end justify-end">
                      <p className="mb-1.5 text-sm text-primary-variant">
                        {t("debug.objectShapeFilterDrawing.ratio")}
@ -434,7 +434,7 @@ function ObjectList({ cameraConfig, objects }: ObjectListProps) {
                      {obj.ratio ? obj.ratio.toFixed(2).toString() : "-"}
                    </div>
                  </div>
-                  <div className="text-md mr-2 w-1/3">
+                  <div className="mr-2 w-1/3">
                    <div className="flex flex-col items-end justify-end">
                      <p className="mb-1.5 text-sm text-primary-variant">
                        {t("debug.objectShapeFilterDrawing.area")}
@ -505,7 +505,7 @@ function AudioList({ cameraConfig, audioDetections }: AudioListProps) {
                <div className="ml-3 text-lg">{getTranslatedLabel(key)}</div>
              </div>
              <div className="flex w-8/12 flex-row items-center justify-end">
-                <div className="text-md mr-2 w-1/3">
+                <div className="mr-2 w-1/3">
                  <div className="flex flex-col items-end justify-end">
                    <p className="mb-1.5 text-sm text-primary-variant">
                      {t("debug.audio.score")}
--- a/web/src/views/settings/ProfilesView.tsx
+++ b/web/src/views/settings/ProfilesView.tsx
@ -24,7 +24,7 @@ import { resolveCameraName } from "@/hooks/use-camera-friendly-name";
 import { useDocDomain } from "@/hooks/use-doc-domain";
 import { cn } from "@/lib/utils";
 import Heading from "@/components/ui/heading";
-import { Button } from "@/components/ui/button";
+import { Button, buttonVariants } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Input } from "@/components/ui/input";
 import NameAndIdFields from "@/components/input/NameAndIdFields";
@ -654,10 +654,9 @@ export default function ProfilesView({
                  ns: "views/settings",
                })}
              />
-              <DialogFooter className="gap-2 md:gap-0">
+              <DialogFooter>
                <Button
                  type="button"
-                  variant="outline"
                  onClick={() => setAddDialogOpen(false)}
                  disabled={addingProfile}
                >
@ -709,7 +708,7 @@ export default function ProfilesView({
              {t("button.cancel", { ns: "common" })}
            </AlertDialogCancel>
            <AlertDialogAction
-              className="bg-destructive text-white hover:bg-destructive/90"
+              className={cn(buttonVariants({ variant: "destructive" }))}
              onClick={(e) => {
                e.preventDefault();
                handleDeleteProfile();
@ -746,7 +745,6 @@ export default function ProfilesView({
            />
            <DialogFooter>
              <Button
-                variant="outline"
                onClick={() => setRenameProfile(null)}
                disabled={renaming}
              >
--- a/web/src/views/settings/RegionGridSettingsView.tsx
+++ b/web/src/views/settings/RegionGridSettingsView.tsx
@ -10,7 +10,6 @@ import {
  AlertDialogHeader,
  AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
-import { Toaster } from "@/components/ui/sonner";
 import { useCallback, useContext, useState } from "react";
 import { useTranslation } from "react-i18next";
 import axios from "axios";
@ -59,7 +58,6 @@ export default function RegionGridSettingsView({
  return (
    <>
      <div className="flex size-full flex-col md:flex-row">
-        <Toaster position="top-center" closeButton={true} />
        <div className="scrollbar-container order-last mb-2 mt-2 flex h-full w-full flex-col overflow-y-auto px-2 md:order-none">
          <Heading as="h4" className="mb-2 hidden md:block">
            {t("maintenance.regionGrid.title")}
@ -85,7 +83,7 @@ export default function RegionGridSettingsView({
              onClick={() => setIsConfirmOpen(true)}
              disabled={isClearing}
              variant="destructive"
-              className="flex flex-1 text-white md:max-w-sm"
+              className="flex flex-1 md:max-w-sm"
            >
              {t("maintenance.regionGrid.clear")}
            </Button>
@ -108,10 +106,7 @@ export default function RegionGridSettingsView({
              {t("button.cancel", { ns: "common" })}
            </AlertDialogCancel>
            <AlertDialogAction
-              className={cn(
-                buttonVariants({ variant: "destructive" }),
-                "text-white",
-              )}
+              className={cn(buttonVariants({ variant: "destructive" }))}
              onClick={handleClear}
            >
              {t("maintenance.regionGrid.clear")}
--- a/web/src/views/settings/TriggerView.tsx
+++ b/web/src/views/settings/TriggerView.tsx
@ -1,7 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { toast } from "sonner";
-import { Toaster } from "@/components/ui/sonner";
 import useSWR from "swr";
 import axios from "axios";
 import { Button } from "@/components/ui/button";
@ -443,7 +442,6 @@ export default function TriggerView({

  return (
    <div className="flex size-full flex-col md:flex-row">
-      <Toaster position="top-center" closeButton={true} />
      <div
        className={cn(
          "scrollbar-container order-last mb-2 mt-2 flex h-full w-full flex-col overflow-y-auto pb-2",
--- a/web/src/views/settings/UiSettingsView.tsx
+++ b/web/src/views/settings/UiSettingsView.tsx
@ -1,7 +1,7 @@
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
 import { ReactNode, useCallback, useContext, useEffect } from "react";
-import { Toaster, toast } from "sonner";
+import { toast } from "sonner";
 import { Button } from "../../components/ui/button";
 import useSWR from "swr";
 import { FrigateConfig } from "@/types/frigateConfig";
@ -211,7 +211,6 @@ export default function UiSettingsView() {

  return (
    <div className="flex size-full flex-col">
-      <Toaster position="top-center" closeButton={true} />
      <div className="scrollbar-container mb-2 mt-2 flex h-full w-full flex-col overflow-y-auto pb-2">
        <Heading as="h4" className="mb-3">
          {t("general.title")}
Author	SHA1	Message	Date
Dmytro Marchuk	bdc0548a4d	Merge `8f6e083420` into `6fdd65ddb5`	2026-05-29 23:26:30 -05:00
Josh Hawkins	6fdd65ddb5	UI tweaks (#23346 ) Some checks failed CI / AMD64 Build (push) Has been cancelled Details CI / ARM Build (push) Has been cancelled Details CI / Jetson Jetpack 6 (push) Has been cancelled Details CI / AMD64 Extra Build (push) Has been cancelled Details CI / ARM Extra Build (push) Has been cancelled Details CI / Synaptics Build (push) Has been cancelled Details CI / Assemble and push default build (push) Has been cancelled Details * remove redundant per-view toasters in settings * add variants to standardize dialog footer button layouts * remove text-md this class name compiles to nothing in tailwind. we used to add it to prevent iOS from zooming when focusing on an input, but that is now solved via the viewport meta in index.html * make wizard footers consistent with dialog footers * consistent destructive button style remove text-white from individual buttons and add it to the variant	2026-05-29 16:00:30 -06:00
Dmitry Marchuk	8f6e083420	Review changes	2026-05-24 07:45:04 +03:00
Dmitry Marchuk	bf25560067	Make Dropdown look like Select	2026-05-23 22:20:04 +03:00
Dmitry Marchuk	df40d9e2b5	Review changes	2026-05-23 21:32:02 +03:00
Dmitry Marchuk	263554a5f6	Improve on the dialog, fix some bugs	2026-05-22 12:18:35 +03:00
Dmytro Marchuk	597a9f9fb4	Merge branch 'blakeblackshear:dev' into dev	2026-05-17 08:50:35 +03:00
Dmitry Marchuk	0d05f0feaa	Add custom notification suspension dialog	2026-05-17 08:50:19 +03:00