UI tweaks (#20168)

* use mobilepage with create trigger dialog

* use mobilepage with create user dialog

* use mobilepage with create role dialog

web/src/components/overlay/CreateRoleDialog.tsx

@@ -26,6 +26,15 @@ import {
 import { useTranslation } from "react-i18next";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { CameraNameLabel } from "../camera/CameraNameLabel";
+import { isDesktop, isMobile } from "react-device-detect";
+import { cn } from "@/lib/utils";
+import {
+  MobilePage,
+  MobilePageContent,
+  MobilePageDescription,
+  MobilePageHeader,
+  MobilePageTitle,
+} from "../mobile/MobilePage";
 
 type CreateRoleOverlayProps = {
   show: boolean;
@@ -100,15 +109,27 @@ export default function CreateRoleDialog({
     onCancel();
   };
 
+  const Overlay = isDesktop ? Dialog : MobilePage;
+  const Content = isDesktop ? DialogContent : MobilePageContent;
+  const Header = isDesktop ? DialogHeader : MobilePageHeader;
+  const Description = isDesktop ? DialogDescription : MobilePageDescription;
+  const Title = isDesktop ? DialogTitle : MobilePageTitle;
+
   return (
-    <Dialog open={show} onOpenChange={onCancel}>
-      <DialogContent className="sm:max-w-[425px]">
-        <DialogHeader>
-          <DialogTitle>{t("roles.dialog.createRole.title")}</DialogTitle>
-          <DialogDescription>
+    <Overlay open={show} onOpenChange={onCancel}>
+      <Content
+        className={cn(
+          "scrollbar-container overflow-y-auto",
+          isDesktop && "my-4 flex max-h-dvh flex-col sm:max-w-[425px]",
+          isMobile && "px-4",
+        )}
+      >
+        <Header className="mt-2" onClose={onCancel}>
+          <Title>{t("roles.dialog.createRole.title")}</Title>
+          <Description className={cn(!isDesktop && "sr-only")}>
             {t("roles.dialog.createRole.desc")}
-          </DialogDescription>
-        </DialogHeader>
+          </Description>
+        </Header>
 
         <Form {...form}>
           <form
@@ -222,7 +243,7 @@ export default function CreateRoleDialog({
             </DialogFooter>
           </form>
         </Form>
-      </DialogContent>
-    </Dialog>
+      </Content>
+    </Overlay>
   );
 }