From 297f445ab99bfbf43e6bffb06580948b17f9be09 Mon Sep 17 00:00:00 2001
From: riyadhafraa <49757212-riyadhafraa@users.noreply.replit.com>
Date: Tue, 19 May 2026 12:14:22 +0000
Subject: [PATCH] Improve dialog design and responsiveness for all admin forms

Refactor AdminFormDialog component to use a solid white background, adjust responsive widths based on screen size, and enhance header styling for better clarity and appearance across devices.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 77cfe984-2c65-4152-bb7a-0df28274fe66
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: ac415bb1-bc8b-4ad3-8424-7ce717528dde
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/c3c252e4-c83d-40ca-9fff-99a3ea60701e/77cfe984-2c65-4152-bb7a-0df28274fe66/eDmI6vt
Replit-Helium-Checkpoint-Created: true
---
 artifacts/tx-os/src/pages/admin.tsx | 31 ++++++++++++++++++++---------
 1 file changed, 22 insertions(+), 9 deletions(-)

diff --git a/artifacts/tx-os/src/pages/admin.tsx b/artifacts/tx-os/src/pages/admin.tsx
index 448e8af4..64e7790c 100644
--- a/artifacts/tx-os/src/pages/admin.tsx
+++ b/artifacts/tx-os/src/pages/admin.tsx
@@ -397,8 +397,16 @@ function AdminFormDialog({
   const { t } = useTranslation();
   const titleId = useId();
   const subtitleId = useId();
+  // #616-followup: responsive widths so the dialog fills the phone
+  // comfortably (full width minus the 16px gutter) and grows to a
+  // readable size on tablets / desktop. Old single `max-w-sm` looked
+  // cramped on iPad and made the inputs feel undersized.
   const widthClass =
-    maxWidth === "lg" ? "max-w-lg" : maxWidth === "md" ? "max-w-md" : "max-w-sm";
+    maxWidth === "lg"
+      ? "max-w-[min(100%,640px)] sm:max-w-lg md:max-w-xl"
+      : maxWidth === "md"
+      ? "max-w-[min(100%,560px)] sm:max-w-md md:max-w-lg"
+      : "max-w-[min(100%,480px)] sm:max-w-md";
   useEffect(() => {
     const handleKey = (e: KeyboardEvent) => {
       if (e.key === "Escape" && !isPending) {
@@ -410,10 +418,15 @@ function AdminFormDialog({
     return () => window.removeEventListener("keydown", handleKey);
   }, [isPending, onCancel]);
   return (
-    <div className="fixed inset-0 bg-slate-900/40 backdrop-blur-sm z-50 flex items-center justify-center p-4">
+    <div className="fixed inset-0 bg-slate-900/50 backdrop-blur-sm z-50 flex items-center justify-center p-3 sm:p-4">
       <div
         className={cn(
-          "glass-panel rounded-3xl w-full overflow-hidden shadow-xl flex flex-col max-h-[90vh]",
+          // Solid white surface instead of the heavy glass panel —
+          // glass on top of a blurred page made the inputs almost
+          // invisible (see #616-followup screenshot). Keep the soft
+          // shadow + rounded look so it still feels like the rest of
+          // the OS surface.
+          "bg-white rounded-2xl sm:rounded-3xl w-full overflow-hidden shadow-2xl ring-1 ring-slate-200 flex flex-col max-h-[90vh]",
           widthClass,
         )}
         role="dialog"
@@ -422,24 +435,24 @@ function AdminFormDialog({
         aria-describedby={subtitle ? subtitleId : undefined}
         data-testid={testId}
       >
-        <div className="flex items-start gap-3 p-5 sm:p-6">
+        <div className="flex items-center gap-3 px-5 pt-5 pb-4 sm:px-6 sm:pt-6 sm:pb-5 border-b border-slate-100">
           <div
             className="shrink-0 w-10 h-10 rounded-full bg-primary/10 text-primary flex items-center justify-center"
             aria-hidden="true"
           >
             {icon}
           </div>
-          <div className="min-w-0 flex-1 pt-0.5">
+          <div className="min-w-0 flex-1">
             <h2
               id={titleId}
-              className="text-base sm:text-lg font-semibold text-foreground leading-snug"
+              className="text-lg sm:text-xl font-semibold text-[#0B1E3F] leading-tight truncate"
             >
               {title}
             </h2>
             {subtitle && (
               <p
                 id={subtitleId}
-                className="text-xs text-muted-foreground mt-0.5 leading-relaxed"
+                className="text-xs sm:text-sm text-muted-foreground mt-1 leading-relaxed"
               >
                 {subtitle}
               </p>
@@ -447,11 +460,11 @@ function AdminFormDialog({
           </div>
         </div>
 
-        <div className="px-5 sm:px-6 pb-5 sm:pb-6 space-y-4 overflow-y-auto">
+        <div className="px-5 sm:px-6 py-5 sm:py-6 space-y-4 overflow-y-auto">
           {children}
         </div>
 
-        <div className="flex items-center justify-end gap-2 px-5 sm:px-6 py-4 border-t border-foreground/10 bg-foreground/[0.02]">
+        <div className="flex items-center justify-end gap-2 px-5 sm:px-6 py-3 sm:py-4 border-t border-slate-100 bg-slate-50/70">
           <Button
             variant="ghost"
             onClick={onCancel}