Cleanup dialogs

web/src/components/overlay/FaceSelectionDialog.tsx

@@ -2,6 +2,9 @@ import {
   Drawer,
   DrawerClose,
   DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
   DrawerTrigger,
 } from "@/components/ui/drawer";
 import {
@@ -74,6 +77,12 @@ export default function FaceSelectionDialog({
               isMobile && "mx-1 gap-2 rounded-t-2xl px-4",
             )}
           >
+            {isMobile && (
+              <DrawerHeader className="sr-only">
+                <DrawerTitle>Log Details</DrawerTitle>
+                <DrawerDescription>Log details</DrawerDescription>
+              </DrawerHeader>
+            )}
             <DropdownMenuLabel>{t("trainFaceAs")}</DropdownMenuLabel>
             <div
               className={cn(

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

@@ -8,6 +8,8 @@ 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 = {
@@ -43,7 +45,7 @@ export default function TextEntryDialog({
           allowEmpty={allowEmpty}
           onSave={onSave}
         >
-          <DialogFooter className="pt-4">
+          <DialogFooter className={cn("pt-4", isMobile && "gap-2")}>
             <Button type="button" onClick={() => setOpen(false)}>
               {t("button.cancel")}
             </Button>