add variants to standardize dialog footer button layouts

web/src/components/card/ExportCard.tsx

@@ -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()}

web/src/components/filter/CameraGroupSelector.tsx

@@ -15,6 +15,7 @@ import {
   Dialog,
   DialogContent,
   DialogDescription,
+  DialogFooter,
   DialogHeader,
   DialogTitle,
 } from "../ui/dialog";
@@ -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>
   );

web/src/components/input/SaveSearchDialog.tsx

@@ -88,7 +88,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" })}

web/src/components/overlay/CreateRoleDialog.tsx

@@ -213,11 +213,8 @@ export default function CreateRoleDialog({
               <FormMessage />
             </div>
 
-            <DialogFooter className="flex gap-2 pt-2 sm:justify-end">
+            <DialogFooter className="pt-2">
-              <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}
@@ -229,7 +226,6 @@ export default function CreateRoleDialog({
                 variant="select"
                 aria-label={t("button.save", { ns: "common" })}
                 disabled={isLoading || !form.formState.isValid}
-                    className="flex flex-1"
                 type="submit"
               >
                 {isLoading ? (
@@ -241,8 +237,6 @@ export default function CreateRoleDialog({
                   t("button.save", { ns: "common" })
                 )}
               </Button>
-                </div>
-              </div>
             </DialogFooter>
           </form>
         </Form>

web/src/components/overlay/CreateTriggerDialog.tsx

@@ -433,11 +433,8 @@ export default function CreateTriggerDialog({
               )}
             />
 
-            <DialogFooter className="flex gap-2 pt-2 sm:justify-end">
+            <DialogFooter className="pt-2">
-              <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}
@@ -449,7 +446,6 @@ export default function CreateTriggerDialog({
                 variant="select"
                 aria-label={t("button.save", { ns: "common" })}
                 disabled={isLoading || !form.formState.isValid}
-                    className="flex flex-1"
                 type="submit"
               >
                 {isLoading ? (
@@ -461,8 +457,6 @@ export default function CreateTriggerDialog({
                   t("button.save", { ns: "common" })
                 )}
               </Button>
-                </div>
-              </div>
             </DialogFooter>
           </form>
         </Form>

web/src/components/overlay/CreateUserDialog.tsx

@@ -411,11 +411,8 @@ export default function CreateUserDialog({
               )}
             />
 
-            <DialogFooter className="flex gap-2 pt-2 sm:justify-end">
+            <DialogFooter className="pt-2">
-              <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}
@@ -427,7 +424,6 @@ export default function CreateUserDialog({
                 variant="select"
                 aria-label={t("button.save", { ns: "common" })}
                 disabled={isLoading || !form.formState.isValid}
-                    className="flex flex-1"
                 type="submit"
               >
                 {isLoading ? (
@@ -439,8 +435,6 @@ export default function CreateUserDialog({
                   t("button.save", { ns: "common" })
                 )}
               </Button>
-                </div>
-              </div>
             </DialogFooter>
           </form>
         </Form>

web/src/components/overlay/DebugReplayDialog.tsx

@@ -113,19 +113,14 @@ export function DebugReplayContent({
 
       {isDesktop && <SelectSeparator className="my-4 bg-secondary" />}
 
-      <DialogFooter
+      <DialogFooter className="mt-3 sm:mt-0">
-        className={isDesktop ? "" : "mt-3 flex flex-col-reverse gap-2"}
-      >
         <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={() => {

web/src/components/overlay/DeleteRoleDialog.tsx

@@ -70,13 +70,9 @@ export default function DeleteRoleDialog({
           </div>
         </div>
 
-        <DialogFooter className="flex gap-2 pt-2 sm:justify-end">
+        <DialogFooter>
-          <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"
@@ -84,7 +80,6 @@ export default function DeleteRoleDialog({
             {t("button.cancel", { ns: "common" })}
           </Button>
           <Button
-                className="flex flex-1"
             aria-label={t("button.delete", { ns: "common" })}
             variant="destructive"
             disabled={isLoading}
@@ -100,8 +95,6 @@ export default function DeleteRoleDialog({
               t("button.delete", { ns: "common" })
             )}
           </Button>
-            </div>
-          </div>
         </DialogFooter>
       </DialogContent>
     </Dialog>

web/src/components/overlay/DeleteTriggerDialog.tsx

@@ -43,11 +43,8 @@ export default function DeleteTriggerDialog({
             </Trans>
           </DialogDescription>
         </DialogHeader>
-        <DialogFooter className="flex gap-3 sm:justify-end">
+        <DialogFooter>
-          <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"
@@ -58,7 +55,6 @@ export default function DeleteTriggerDialog({
           <Button
             variant="destructive"
             aria-label={t("button.delete", { ns: "common" })}
-                className="flex flex-1 text-white"
             onClick={onDelete}
             disabled={isLoading}
           >
@@ -71,8 +67,6 @@ export default function DeleteTriggerDialog({
               t("button.delete", { ns: "common" })
             )}
           </Button>
-            </div>
-          </div>
         </DialogFooter>
       </DialogContent>
     </Dialog>

web/src/components/overlay/DeleteUserDialog.tsx

@@ -46,11 +46,8 @@ export default function DeleteUserDialog({
           </p>
         </div>
 
-        <DialogFooter className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
+        <DialogFooter>
-          <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"
@@ -60,13 +57,10 @@ export default function DeleteUserDialog({
           <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>
       </DialogContent>
     </Dialog>

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">
+            <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,11 +161,8 @@ export default function EditRoleCamerasDialog({
               <FormMessage />
             </div>
 
-            <DialogFooter className="flex gap-2 pt-2 sm:justify-end">
+            <DialogFooter>
-              <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}
@@ -175,7 +174,6 @@ export default function EditRoleCamerasDialog({
                 variant="select"
                 aria-label={t("button.save", { ns: "common" })}
                 disabled={isLoading || !form.formState.isValid}
-                    className="flex flex-1"
                 type="submit"
               >
                 {isLoading ? (
@@ -187,8 +185,6 @@ export default function EditRoleCamerasDialog({
                   t("button.save", { ns: "common" })
                 )}
               </Button>
-                </div>
-              </div>
             </DialogFooter>
           </form>
         </Form>

web/src/components/overlay/ExportDialog.tsx

@@ -1049,20 +1049,15 @@ export function ExportContent({
       </Tabs>
 
       {isDesktop && <SelectSeparator className="my-4 bg-secondary" />}
-      <DialogFooter
+      <DialogFooter className="mt-3 sm:mt-0">
-        className={isDesktop ? "" : "mt-3 flex flex-col-reverse gap-2"}
-      >
         <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 +1081,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()}
           >

web/src/components/overlay/MultiExportDialog.tsx

@@ -344,11 +344,7 @@ export default function MultiExportDialog({
 
   const footer = (
     <>
-      <Button
+      <Button onClick={() => handleOpenChange(false)} disabled={isExporting}>
-        variant="outline"
-        onClick={() => handleOpenChange(false)}
-        disabled={isExporting}
-      >
         {t("button.cancel", { ns: "common" })}
       </Button>
       <Button
@@ -380,7 +376,7 @@ export default function MultiExportDialog({
             </DialogDescription>
           </DialogHeader>
           {body}
-          <DialogFooter className="gap-2">{footer}</DialogFooter>
+          <DialogFooter>{footer}</DialogFooter>
         </DialogContent>
       </Dialog>
     );
@@ -399,7 +395,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>
   );

web/src/components/overlay/RoleChangeDialog.tsx

@@ -117,13 +117,9 @@ export default function RoleChangeDialog({
           </Select>
         </div>
 
-        <DialogFooter className="flex gap-3 sm:justify-end">
+        <DialogFooter>
-          <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"
           >
@@ -132,15 +128,12 @@ export default function RoleChangeDialog({
           <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>
       </DialogContent>
     </Dialog>

web/src/components/overlay/SetPasswordDialog.tsx

@@ -450,11 +450,8 @@ export default function SetPasswordDialog({
               </div>
             )}
 
-            <DialogFooter className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
+            <DialogFooter>
-              <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"
@@ -465,7 +462,6 @@ export default function SetPasswordDialog({
               <Button
                 variant="select"
                 aria-label={t("button.save", { ns: "common" })}
-                    className="flex flex-1"
                 type="submit"
                 disabled={isLoading || !form.formState.isValid}
               >
@@ -478,8 +474,6 @@ export default function SetPasswordDialog({
                   t("button.save", { ns: "common" })
                 )}
               </Button>
-                </div>
-              </div>
             </DialogFooter>
           </form>
         </Form>

web/src/components/overlay/ShareTimestampDialog.tsx

@@ -196,21 +196,16 @@ export function ShareTimestampContent({
 
       {isDesktop && <Separator className="my-4 bg-secondary" />}
 
-      <DialogFooter
+      <DialogFooter className="mt-3 sm:mt-0">
-        className={cn("mt-4", !isDesktop && "flex flex-col-reverse gap-2")}
-      >
         {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))}
         >

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

@@ -121,11 +121,8 @@ export default function DeleteCameraDialog({
                 ))}
               </SelectContent>
             </Select>
-            <DialogFooter className="flex gap-3 sm:justify-end">
+            <DialogFooter>
-              <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"
@@ -135,14 +132,11 @@ export default function DeleteCameraDialog({
               <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>
           </>
         ) : (
@@ -173,11 +167,8 @@ export default function DeleteCameraDialog({
                 {t("cameraManagement.deleteCameraDialog.deleteExports")}
               </Label>
             </div>
-            <DialogFooter className="flex gap-3 sm:justify-end">
+            <DialogFooter>
-              <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"
@@ -187,7 +178,6 @@ export default function DeleteCameraDialog({
               </Button>
               <Button
                 variant="destructive"
-                    className="flex flex-1 text-white"
                 onClick={handleConfirmDelete}
                 disabled={isDeleting}
               >
@@ -195,17 +185,13 @@ export default function DeleteCameraDialog({
                   <div className="flex flex-row items-center gap-2">
                     <ActivityIndicator />
                     <span>
-                          {t(
+                      {t("cameraManagement.deleteCameraDialog.confirmButton")}
-                            "cameraManagement.deleteCameraDialog.confirmButton",
-                          )}
                     </span>
                   </div>
                 ) : (
                   t("cameraManagement.deleteCameraDialog.confirmButton")
                 )}
               </Button>
-                </div>
-              </div>
             </DialogFooter>
           </>
         )}

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>

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

@@ -164,10 +164,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);

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}

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}

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(
+    className={cn(alertDialogFooterVariants({ variant }), className)}
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className,
-    )}
     {...props}
   />
 );

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(
+    className={cn(dialogFooterVariants({ variant }), className)}
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className,
-    )}
     {...props}
   />
 );

web/src/pages/Exports.tsx

@@ -1277,8 +1277,8 @@ function CaseEditorDialog({
             value={description}
             onChange={(event) => setDescription(event.target.value)}
           />
-          <div className="flex justify-end gap-2">
+          <DialogFooter>
-            <Button variant="outline" onClick={onClose}>
+            <Button onClick={onClose}>
               {t("button.cancel", { ns: "common" })}
             </Button>
             <Button
@@ -1295,7 +1295,7 @@ function CaseEditorDialog({
                 ? t("button.save", { ns: "common" })
                 : t("toolbar.newCase")}
             </Button>
-          </div>
+          </DialogFooter>
         </div>
       </DialogContent>
     </Dialog>
@@ -1427,13 +1427,12 @@ function CaseAddExportDialog({
             )}
           </div>
         </div>
-        <DialogFooter className="flex-row justify-end gap-2">
+        <DialogFooter>
-          <Button variant="outline" size="sm" onClick={onClose}>
+          <Button onClick={onClose}>
             {t("button.cancel", { ns: "common" })}
           </Button>
           <Button
             variant="select"
-            size="sm"
             disabled={selectedIds.length === 0 || isAdding}
             onClick={() => void handleAdd()}
           >

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());

web/src/views/settings/Go2RtcStreamsSettingsView.tsx

@@ -547,7 +547,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>
@@ -628,7 +628,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>

web/src/views/settings/ProfilesView.tsx

@@ -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}
                 >
@@ -746,7 +745,6 @@ export default function ProfilesView({
             />
             <DialogFooter>
               <Button
-                variant="outline"
                 onClick={() => setRenameProfile(null)}
                 disabled={renaming}
               >