Add a temporary diagnostic display for keyboard inset calculations

Add a temporary debug overlay to the DialogContent component in `dialog.tsx` to display `keyboardInset`, `height`, and `offsetTop` values, and the keyboard open state.
This commit is contained in:
Riyadh
2026-05-21 08:30:27 +00:00
parent 686dda1e54
commit 210afc7d44
@@ -137,6 +137,26 @@ const DialogContent = React.forwardRef<
{...props}
>
{children}
{/* TEMP DEBUG: shows the live visualViewport readings so we can
tell on-device whether the keyboard-open branch is actually
firing. Remove once iPad PWA layout is confirmed. */}
<div
style={{
position: "absolute",
top: 2,
left: 2,
zIndex: 9999,
fontSize: 10,
background: keyboardOpen ? "#16a34a" : "#dc2626",
color: "white",
padding: "2px 6px",
borderRadius: 4,
pointerEvents: "none",
fontFamily: "monospace",
}}
>
kb:{keyboardInset.toFixed(0)} h:{height.toFixed(0)} top:{offsetTop.toFixed(0)} {keyboardOpen ? "OPEN" : "closed"}
</div>
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
<X className="h-4 w-4" />
<span className="sr-only">Close</span>