Mobile UI Tweaks

.changeset/cuddly-feet-end.md

@@ -0,0 +1,5 @@
+---
+"@burnt-labs/ui": minor
+---
+
+Added slight tweaks to fix mobile behavior

packages/ui/package.json

@@ -37,6 +37,7 @@
   "dependencies": {
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-visually-hidden": "^1.1.0",
     "@types/react-dom": "^18.2.18"
   }
 }

packages/ui/src/dialog.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
+import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
 import { cn } from "../lib/utils";
 
 const Dialog = DialogPrimitive.Root;
@@ -33,13 +34,17 @@ const DialogContent = React.forwardRef<
     <DialogOverlay />
     <div className="ui-absolute ui-h-screen ui-w-screen ui-inset-0 ui-bg-modal-overlay ui-backdrop-blur-3xl ui-opacity-40 ui-bg-no-repeat ui-bg-cover ui-bg-center ui-bg-fixed ui-z-50" />
     <DialogPrimitive.Content
+      aria-describedby={undefined}
       className={cn(
         "ui-z-50 ui-fixed ui-grid ui-w-full ui-max-w-lg ui-gap-4 ui-p-10 ui-duration-200 sm:ui-rounded-[48px] ui-left-[50%] ui-top-[50%] sm:ui-bg-black/20 !ui-flex ui-justify-center ui-flex-col sm:ui-block sm:ui-flex-none ui-h-screen sm:ui-h-auto sm:ui-backdrop-blur-2xl ui-data-[state=open]:ui-animate-in ui-data-[state=closed]:ui-animate-out ui-data-[state=closed]:ui-fade-out-0 ui-data-[state=open]:ui-fade-in-0 ui-data-[state=closed]:ui-zoom-out-95 ui-data-[state=open]:ui-zoom-in-95 ui-data-[state=closed]:ui-slide-out-to-left-1/2 ui-data-[state=closed]:ui-slide-out-to-top-[48%] ui-data-[state=open]:ui-slide-in-from-left-1/2 ui-data-[state=open]:ui-slide-in-from-top-[48%] ui-translate-x-[-50%] ui-translate-y-[-50%]",
         className,
       )}
       ref={ref}
       {...props}
     >
+      <VisuallyHidden.Root>
+        <DialogPrimitive.Title />
+      </VisuallyHidden.Root>
       {children}
     </DialogPrimitive.Content>
   </DialogPortal>

packages/ui/src/input.tsx

@@ -53,9 +53,9 @@ export function Input({
         {...props}
         className={`${
           baseInputClassName || ""
-        } ui-z-10 ui-block ui-h-8 ui-w-full ui-border-b ui-relative ${
+        } ui-z-10 ui-block ui-h-8 ui-w-full ui-border-b ui-rounded-none ui-relative ${
           error ? "ui-border-red-400" : ""
-        } ui-bg-transparent ui-font-akkuratLL ui-py-5 !ui-text-sm ui-text-zinc-100 ui-font-normal ui-leading-tight ui-outline-none`}
+        } ui-bg-transparent ui-font-akkuratLL ui-py-5 !ui-text-base ui-text-zinc-100 ui-font-normal ui-leading-tight ui-outline-none`}
         onBlur={handleBlur}
         onFocus={handleFocus}
         onKeyDown={onKeyDown}