Added responsive design for mobile phone screens

frontend/src/app/globals.css

@@ -118,5 +118,52 @@
   }
   body {
     @apply bg-background text-foreground;
+    /* Improve mobile scrolling */
+    -webkit-overflow-scrolling: touch;
+    scroll-behavior: smooth;
+  }
+  
+  /* Mobile-specific improvements */
+  @media (max-width: 640px) {
+    /* Ensure minimum touch target size */
+    button, [role="button"], input[type="button"], input[type="submit"], input[type="reset"] {
+      min-height: 44px;
+      min-width: 44px;
+    }
+    
+    /* Improve text readability on mobile */
+    body {
+      font-size: 16px; /* Prevent zoom on iOS */
+      line-height: 1.5;
+    }
+    
+    /* Better spacing for mobile */
+    .space-y-6 > * + * {
+      margin-top: 1.5rem;
+    }
+    
+    /* Improve card interactions on mobile */
+    .card {
+      transition: transform 0.2s ease, box-shadow 0.2s ease;
+    }
+    
+    .card:active {
+      transform: scale(0.98);
+    }
+  }
+  
+  /* Prevent horizontal scroll on mobile */
+  html, body {
+    overflow-x: hidden;
+  }
+  
+  /* Improve focus states for accessibility */
+  button:focus-visible,
+  [role="button"]:focus-visible,
+  input:focus-visible,
+  select:focus-visible,
+  textarea:focus-visible {
+    outline: 2px solid var(--ring);
+    outline-offset: 2px;
   }
 }

frontend/src/app/layout.tsx

@@ -9,10 +9,11 @@
  * Copyright (c) 2024 Continuist <continuist02@gmail.com>
  */
 
-import type { Metadata } from "next";
+import type { Metadata, Viewport } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
 import Link from "next/link";
+import { MobileNav } from "@/components/mobile-nav";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -21,6 +22,13 @@ export const metadata: Metadata = {
   description: "Admin interface for Sharenet",
 };
 
+export const viewport: Viewport = {
+  width: 'device-width',
+  initialScale: 1,
+  maximumScale: 1,
+  userScalable: false,
+};
+
 export default function RootLayout({
   children,
 }: Readonly<{
@@ -58,10 +66,11 @@ export default function RootLayout({
                     </Link>
                   </div>
                 </div>
+                <MobileNav />
               </div>
             </div>
           </nav>
-          <main className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
+          <main className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
             {children}
           </main>
         </div>

frontend/src/app/page.tsx

@@ -16,26 +16,26 @@ export default function Home() {
   return (
     <div className="space-y-6">
       <h1 className="text-3xl font-bold">Dashboard</h1>
-      <div className="grid gap-4 md:grid-cols-2">
+      <div className="grid gap-6 grid-cols-1 sm:grid-cols-2">
-        <Link href="/users">
+        <Link href="/users" className="block">
-          <Card className="hover:bg-gray-50 transition-colors">
+          <Card className="hover:bg-gray-50 transition-colors h-full">
             <CardHeader>
-              <CardTitle>Users</CardTitle>
+              <CardTitle className="text-xl">Users</CardTitle>
               <CardDescription>Manage system users</CardDescription>
             </CardHeader>
             <CardContent>
-              <p>View, create, edit, and delete users</p>
+              <p className="text-gray-600">View, create, edit, and delete users</p>
             </CardContent>
           </Card>
         </Link>
-        <Link href="/products">
+        <Link href="/products" className="block">
-          <Card className="hover:bg-gray-50 transition-colors">
+          <Card className="hover:bg-gray-50 transition-colors h-full">
             <CardHeader>
-              <CardTitle>Products</CardTitle>
+              <CardTitle className="text-xl">Products</CardTitle>
               <CardDescription>Manage product catalog</CardDescription>
             </CardHeader>
             <CardContent>
-              <p>View, create, edit, and delete products</p>
+              <p className="text-gray-600">View, create, edit, and delete products</p>
             </CardContent>
           </Card>
         </Link>

frontend/src/app/products/page.tsx

@@ -14,14 +14,7 @@
 import { useState, useEffect } from 'react';
 import { productApi, Product } from '@/lib/api';
 import { Button } from '@/components/ui/button';
-import {
+import { ResponsiveTable } from '@/components/ui/responsive-table';
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
 import {
   Dialog,
   DialogContent,
@@ -126,21 +119,63 @@ export default function ProductsPage() {
     }
   };
 
+  const columns = [
+    {
+      key: 'name',
+      header: 'Name',
+      mobilePriority: true,
+    },
+    {
+      key: 'description',
+      header: 'Description',
+      mobilePriority: true,
+      render: (value: unknown) => String(value || 'No description'),
+    },
+    {
+      key: 'actions',
+      header: 'Actions',
+      mobilePriority: true,
+      render: (_: unknown, product: Record<string, unknown>) => (
+        <div className="flex flex-col sm:flex-row gap-2 sm:gap-1">
+          <Button 
+            variant="outline" 
+            size="sm" 
+            onClick={() => handleEdit(product as unknown as Product)}
+            className="w-full sm:w-auto"
+          >
+            Edit
+          </Button>
+          <Button 
+            variant="destructive" 
+            size="sm" 
+            onClick={() => handleDelete((product as unknown as Product).id)}
+            className="w-full sm:w-auto"
+          >
+            Delete
+          </Button>
+        </div>
+      ),
+    },
+  ];
+
   return (
-    <div className="space-y-4">
+    <div className="space-y-6">
-      <div className="flex justify-between items-center">
+      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
         <h1 className="text-2xl font-bold">Products</h1>
         <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
           <DialogTrigger asChild>
-            <Button onClick={() => {
+            <Button 
-              setEditingProduct(null);
+              onClick={() => {
-              setFormData({ name: '', description: '' });
+                setEditingProduct(null);
-              setErrors({ name: '', description: '' });
+                setFormData({ name: '', description: '' });
-            }}>
+                setErrors({ name: '', description: '' });
+              }}
+              className="w-full sm:w-auto"
+            >
               Add Product
             </Button>
           </DialogTrigger>
-          <DialogContent>
+          <DialogContent className="sm:max-w-md">
             <DialogHeader>
               <DialogTitle>{editingProduct ? 'Edit Product' : 'Add Product'}</DialogTitle>
             </DialogHeader>
@@ -165,41 +200,25 @@ export default function ProductsPage() {
                   onChange={(e) => handleInputChange('description', e.target.value)}
                 />
               </div>
-              <Button type="submit">{editingProduct ? 'Update' : 'Create'}</Button>
+              <div className="flex flex-col sm:flex-row gap-2 pt-2">
+                <Button type="submit" className="flex-1">
+                  {editingProduct ? 'Update' : 'Create'}
+                </Button>
+                <Button 
+                  type="button" 
+                  variant="outline" 
+                  onClick={() => setIsDialogOpen(false)}
+                  className="flex-1"
+                >
+                  Cancel
+                </Button>
+              </div>
             </form>
           </DialogContent>
         </Dialog>
       </div>
 
-      <Table>
+      <ResponsiveTable columns={columns} data={products as unknown as Record<string, unknown>[]} />
-        <TableHeader>
-          <TableRow>
-            <TableHead>ID</TableHead>
-            <TableHead>Name</TableHead>
-            <TableHead>Description</TableHead>
-            <TableHead>Actions</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {products.map((product) => (
-            <TableRow key={product.id}>
-              <TableCell>{product.id}</TableCell>
-              <TableCell>{product.name}</TableCell>
-              <TableCell>{product.description}</TableCell>
-              <TableCell>
-                <div className="space-x-2">
-                  <Button variant="outline" size="sm" onClick={() => handleEdit(product)}>
-                    Edit
-                  </Button>
-                  <Button variant="destructive" size="sm" onClick={() => handleDelete(product.id)}>
-                    Delete
-                  </Button>
-                </div>
-              </TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
     </div>
   );
 } 

frontend/src/app/users/page.tsx

@@ -14,14 +14,7 @@
 import { useState, useEffect } from 'react';
 import { userApi, User } from '@/lib/api';
 import { Button } from '@/components/ui/button';
-import {
+import { ResponsiveTable } from '@/components/ui/responsive-table';
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
 import {
   Dialog,
   DialogContent,
@@ -132,21 +125,74 @@ export default function UsersPage() {
     }
   };
 
+  const columns = [
+    {
+      key: 'username',
+      header: 'Username',
+      mobilePriority: true,
+    },
+    {
+      key: 'email',
+      header: 'Email',
+      mobilePriority: true,
+    },
+    {
+      key: 'created_at',
+      header: 'Created At',
+      mobilePriority: false,
+      render: (value: unknown) => new Date(value as string).toLocaleString(),
+    },
+    {
+      key: 'updated_at',
+      header: 'Updated At',
+      mobilePriority: false,
+      render: (value: unknown) => new Date(value as string).toLocaleString(),
+    },
+    {
+      key: 'actions',
+      header: 'Actions',
+      mobilePriority: true,
+      render: (_: unknown, user: Record<string, unknown>) => (
+        <div className="flex flex-col sm:flex-row gap-2 sm:gap-1">
+          <Button 
+            variant="outline" 
+            size="sm" 
+            onClick={() => handleEdit(user as unknown as User)}
+            className="w-full sm:w-auto"
+          >
+            Edit
+          </Button>
+          <Button 
+            variant="destructive" 
+            size="sm" 
+            onClick={() => handleDelete((user as unknown as User).id)}
+            className="w-full sm:w-auto"
+          >
+            Delete
+          </Button>
+        </div>
+      ),
+    },
+  ];
+
   return (
-    <div className="space-y-4">
+    <div className="space-y-6">
-      <div className="flex justify-between items-center">
+      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
         <h1 className="text-2xl font-bold">Users</h1>
         <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
           <DialogTrigger asChild>
-            <Button onClick={() => {
+            <Button 
-              setEditingUser(null);
+              onClick={() => {
-              setFormData({ username: '', email: '' });
+                setEditingUser(null);
-              setErrors({ username: '', email: '' });
+                setFormData({ username: '', email: '' });
-            }}>
+                setErrors({ username: '', email: '' });
+              }}
+              className="w-full sm:w-auto"
+            >
               Add User
             </Button>
           </DialogTrigger>
-          <DialogContent>
+          <DialogContent className="sm:max-w-md">
             <DialogHeader>
               <DialogTitle>{editingUser ? 'Edit User' : 'Add User'}</DialogTitle>
             </DialogHeader>
@@ -176,45 +222,25 @@ export default function UsersPage() {
                   <p className="text-red-500 text-sm">{errors.email}</p>
                 )}
               </div>
-              <Button type="submit">{editingUser ? 'Update' : 'Create'}</Button>
+              <div className="flex flex-col sm:flex-row gap-2 pt-2">
+                <Button type="submit" className="flex-1">
+                  {editingUser ? 'Update' : 'Create'}
+                </Button>
+                <Button 
+                  type="button" 
+                  variant="outline" 
+                  onClick={() => setIsDialogOpen(false)}
+                  className="flex-1"
+                >
+                  Cancel
+                </Button>
+              </div>
             </form>
           </DialogContent>
         </Dialog>
       </div>
 
-      <Table>
+      <ResponsiveTable columns={columns} data={users as unknown as Record<string, unknown>[]} />
-        <TableHeader>
-          <TableRow>
-            <TableHead>ID</TableHead>
-            <TableHead>Username</TableHead>
-            <TableHead>Email</TableHead>
-            <TableHead>Created At</TableHead>
-            <TableHead>Updated At</TableHead>
-            <TableHead>Actions</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {users.map((user) => (
-            <TableRow key={user.id}>
-              <TableCell>{user.id}</TableCell>
-              <TableCell>{user.username}</TableCell>
-              <TableCell>{user.email}</TableCell>
-              <TableCell>{new Date(user.created_at).toLocaleString()}</TableCell>
-              <TableCell>{new Date(user.updated_at).toLocaleString()}</TableCell>
-              <TableCell>
-                <div className="space-x-2">
-                  <Button variant="outline" size="sm" onClick={() => handleEdit(user)}>
-                    Edit
-                  </Button>
-                  <Button variant="destructive" size="sm" onClick={() => handleDelete(user.id)}>
-                    Delete
-                  </Button>
-                </div>
-              </TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
     </div>
   );
 } 

frontend/src/components/mobile-nav.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import { Button } from '@/components/ui/button';
+
+export function MobileNav() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <div className="flex items-center sm:hidden">
+        <Button
+          variant="ghost"
+          size="icon"
+          className="p-2"
+          onClick={() => setIsOpen(!isOpen)}
+          aria-label="Toggle navigation menu"
+        >
+          <svg
+            className="h-6 w-6"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            {isOpen ? (
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M6 18L18 6M6 6l12 12"
+              />
+            ) : (
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M4 6h16M4 12h16M4 18h16"
+              />
+            )}
+          </svg>
+        </Button>
+      </div>
+      
+      <div className={`sm:hidden ${isOpen ? 'block' : 'hidden'}`}>
+        <div className="px-2 pt-2 pb-3 space-y-1 bg-white border-t">
+          <Link
+            href="/"
+            className="block px-3 py-2 text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50 rounded-md"
+            onClick={() => setIsOpen(false)}
+          >
+            Dashboard
+          </Link>
+          <Link
+            href="/users"
+            className="block px-3 py-2 text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50 rounded-md"
+            onClick={() => setIsOpen(false)}
+          >
+            Users
+          </Link>
+          <Link
+            href="/products"
+            className="block px-3 py-2 text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50 rounded-md"
+            onClick={() => setIsOpen(false)}
+          >
+            Products
+          </Link>
+        </div>
+      </div>
+    </>
+  );
+} 

frontend/src/components/ui/button.tsx

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive touch-manipulation",
   {
     variants: {
       variant: {
@@ -22,10 +22,10 @@ const buttonVariants = cva(
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        default: "h-10 px-4 py-2 has-[>svg]:px-3 sm:h-9 sm:px-4 sm:py-2",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        sm: "h-9 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5 sm:h-8 sm:px-3",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        lg: "h-12 rounded-md px-6 has-[>svg]:px-4 sm:h-10 sm:px-6",
-        icon: "size-9",
+        icon: "size-12 sm:size-9",
       },
     },
     defaultVariants: {

frontend/src/components/ui/card.tsx

@@ -2,91 +2,82 @@ import * as React from "react"
 
 import { cn } from "@/lib/utils"
 
-function Card({ className, ...props }: React.ComponentProps<"div">) {
+const Card = React.forwardRef<
-  return (
+  HTMLDivElement,
-    <div
+  React.HTMLAttributes<HTMLDivElement>
-      data-slot="card"
+>(({ className, ...props }, ref) => (
-      className={cn(
+  <div
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+    ref={ref}
-        className
+    className={cn(
-      )}
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
-      {...props}
+      /* Mobile-specific improvements */
-    />
+      "transition-all duration-200 ease-in-out",
-  )
+      "hover:shadow-md",
-}
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
 
-function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+const CardHeader = React.forwardRef<
-  return (
+  HTMLDivElement,
-    <div
+  React.HTMLAttributes<HTMLDivElement>
-      data-slot="card-header"
+>(({ className, ...props }, ref) => (
-      className={cn(
+  <div
-        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+    ref={ref}
-        className
+    className={cn("flex flex-col space-y-1.5 p-6 sm:p-4", className)}
-      )}
+    {...props}
-      {...props}
+  />
-    />
+))
-  )
+CardHeader.displayName = "CardHeader"
-}
 
-function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+const CardTitle = React.forwardRef<
-  return (
+  HTMLParagraphElement,
-    <div
+  React.HTMLAttributes<HTMLHeadingElement>
-      data-slot="card-title"
+>(({ className, ...props }, ref) => (
-      className={cn("leading-none font-semibold", className)}
+  <h3
-      {...props}
+    ref={ref}
-    />
+    className={cn(
-  )
+      "text-2xl font-semibold leading-none tracking-tight",
-}
+      "sm:text-lg",
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
 
-function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+const CardDescription = React.forwardRef<
-  return (
+  HTMLParagraphElement,
-    <div
+  React.HTMLAttributes<HTMLParagraphElement>
-      data-slot="card-description"
+>(({ className, ...props }, ref) => (
-      className={cn("text-muted-foreground text-sm", className)}
+  <p
-      {...props}
+    ref={ref}
-    />
+    className={cn("text-sm text-muted-foreground", className)}
-  )
+    {...props}
-}
+  />
+))
+CardDescription.displayName = "CardDescription"
 
-function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+const CardContent = React.forwardRef<
-  return (
+  HTMLDivElement,
-    <div
+  React.HTMLAttributes<HTMLDivElement>
-      data-slot="card-action"
+>(({ className, ...props }, ref) => (
-      className={cn(
+  <div ref={ref} className={cn("p-6 pt-0 sm:p-4 sm:pt-0", className)} {...props} />
-        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+))
-        className
+CardContent.displayName = "CardContent"
-      )}
-      {...props}
-    />
-  )
-}
 
-function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+const CardFooter = React.forwardRef<
-  return (
+  HTMLDivElement,
-    <div
+  React.HTMLAttributes<HTMLDivElement>
-      data-slot="card-content"
+>(({ className, ...props }, ref) => (
-      className={cn("px-6", className)}
+  <div
-      {...props}
+    ref={ref}
-    />
+    className={cn("flex items-center p-6 pt-0 sm:p-4 sm:pt-0", className)}
-  )
+    {...props}
-}
+  />
+))
+CardFooter.displayName = "CardFooter"
 
-function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
-  return (
-    <div
-      data-slot="card-footer"
-      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
-      {...props}
-    />
-  )
-}
-
-export {
-  Card,
-  CardHeader,
-  CardFooter,
-  CardTitle,
-  CardAction,
-  CardDescription,
-  CardContent,
-}

frontend/src/components/ui/dialog.tsx

@@ -2,142 +2,123 @@
 
 import * as React from "react"
 import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { XIcon } from "lucide-react"
+import { X } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
-function Dialog({
+const Dialog = DialogPrimitive.Root
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />
-}
 
-function DialogTrigger({
+const DialogTrigger = DialogPrimitive.Trigger
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
-}
 
-function DialogPortal({
+const DialogPortal = DialogPrimitive.Portal
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
-}
 
-function DialogClose({
+const DialogClose = DialogPrimitive.Close
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Close>) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
-}
 
-function DialogOverlay({
+const DialogOverlay = React.forwardRef<
-  className,
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  ...props
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
-}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+>(({ className, ...props }, ref) => (
-  return (
+  <DialogPrimitive.Overlay
-    <DialogPrimitive.Overlay
+    ref={ref}
-      data-slot="dialog-overlay"
+    className={cn(
+      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
       className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        /* Mobile-specific styles */
+        "sm:max-w-lg max-w-[calc(100vw-2rem)] max-h-[calc(100vh-2rem)] overflow-y-auto",
         className
       )}
       {...props}
-    />
+    >
-  )
+      {children}
-}
+      <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>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
 
-function DialogContent({
+const DialogHeader = ({
-  className,
-  children,
-  showCloseButton = true,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Content> & {
-  showCloseButton?: boolean
-}) {
-  return (
-    <DialogPortal data-slot="dialog-portal">
-      <DialogOverlay />
-      <DialogPrimitive.Content
-        data-slot="dialog-content"
-        className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        {showCloseButton && (
-          <DialogPrimitive.Close
-            data-slot="dialog-close"
-            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
-          >
-            <XIcon />
-            <span className="sr-only">Close</span>
-          </DialogPrimitive.Close>
-        )}
-      </DialogPrimitive.Content>
-    </DialogPortal>
-  )
-}
-
-function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="dialog-header"
-      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
-      {...props}
-    />
-  )
-}
-
-function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="dialog-footer"
-      className={cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DialogTitle({
   className,
   ...props
-}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+}: React.HTMLAttributes<HTMLDivElement>) => (
-  return (
+  <div
-    <DialogPrimitive.Title
+    className={cn(
-      data-slot="dialog-title"
+      "flex flex-col space-y-1.5 text-center sm:text-left",
-      className={cn("text-lg leading-none font-semibold", className)}
+      className
-      {...props}
+    )}
-    />
+    {...props}
-  )
+  />
-}
+)
+DialogHeader.displayName = "DialogHeader"
 
-function DialogDescription({
+const DialogFooter = ({
   className,
   ...props
-}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+}: React.HTMLAttributes<HTMLDivElement>) => (
-  return (
+  <div
-    <DialogPrimitive.Description
+    className={cn(
-      data-slot="dialog-description"
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className={cn("text-muted-foreground text-sm", className)}
+      className
-      {...props}
+    )}
-    />
+    {...props}
-  )
+  />
-}
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
 
 export {
   Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogOverlay,
   DialogPortal,
-  DialogTitle,
+  DialogOverlay,
+  DialogClose,
   DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
 }

frontend/src/components/ui/input.tsx

@@ -2,20 +2,24 @@ import * as React from "react"
 
 import { cn } from "@/lib/utils"
 
-function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
-  return (
+  ({ className, type, ...props }, ref) => {
-    <input
+    return (
-      type={type}
+      <input
-      data-slot="input"
+        type={type}
-      className={cn(
+        className={cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+          /* Mobile-specific improvements */
-        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+          "sm:h-9 sm:px-3 sm:py-2",
-        className
+          "touch-manipulation",
-      )}
+          className
-      {...props}
+        )}
-    />
+        ref={ref}
-  )
+        {...props}
-}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
 
 export { Input }

frontend/src/components/ui/responsive-table.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+import { ReactNode } from 'react';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+
+interface Column {
+  key: string;
+  header: string;
+  render?: (value: unknown, row: Record<string, unknown>) => ReactNode;
+  mobilePriority?: boolean; // Whether to show this column on mobile
+}
+
+interface ResponsiveTableProps {
+  columns: Column[];
+  data: Record<string, unknown>[];
+  className?: string;
+}
+
+export function ResponsiveTable({ columns, data, className }: ResponsiveTableProps) {
+  const mobileColumns = columns.filter(col => col.mobilePriority !== false);
+  
+  return (
+    <div className={className}>
+      {/* Desktop Table */}
+      <div className="hidden md:block">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              {columns.map((column) => (
+                <TableHead key={column.key}>{column.header}</TableHead>
+              ))}
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {data.map((row, index) => (
+              <TableRow key={(row.id as string) || index}>
+                {columns.map((column) => (
+                  <TableCell key={column.key}>
+                    {column.render 
+                      ? column.render(row[column.key], row)
+                      : String(row[column.key] || '')
+                    }
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+
+      {/* Mobile Cards */}
+      <div className="md:hidden space-y-4">
+        {data.map((row, index) => (
+          <Card key={(row.id as string) || index} className="overflow-hidden">
+            <CardHeader className="pb-3">
+              <CardTitle className="text-lg">
+                {mobileColumns[0]?.render 
+                  ? mobileColumns[0].render(row[mobileColumns[0]?.key || ''], row)
+                  : String(row[mobileColumns[0]?.key || ''] || '')
+                }
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-2">
+              {mobileColumns.slice(1).map((column) => (
+                <div key={column.key} className="flex justify-between items-start">
+                  <span className="font-medium text-sm text-gray-600 min-w-0 flex-1">
+                    {column.header}:
+                  </span>
+                  <span className="text-sm text-gray-900 text-right ml-2 min-w-0 flex-1">
+                    {column.render 
+                      ? column.render(row[column.key], row)
+                      : String(row[column.key] || '')
+                    }
+                  </span>
+                </div>
+              ))}
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+}