Responsive design updates.

Author: joehdodd

apps/web/app/account/page.tsx

@@ -19,7 +19,7 @@ import { Subscription } from '../../types/subscription';
 export default function AccountPage() {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const [userData, setUserData] = useState<any>(null);
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
   const [subscription, setSubscription] = useState<Subscription | null>(null);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const [paymentMethods, setPaymentMethods] = useState<any[]>([]);
@@ -85,10 +85,10 @@ export default function AccountPage() {
 
   return (
     <div className="bg-ps-primary h-[calc(100vh-4rem)] overflow-y-scroll">
-      <div className="container mx-auto px-6 py-8">
+      <div className="container mx-auto px-2 py-2 md:px-6 md:py-8">
         <div className="max-w-6xl mx-auto">
           <div className="mb-8">
-            <h1 className="text-4xl font-bold text-ps-primary mb-2">
+            <h1 className="md:text-4xl font-bold text-ps-primary mb-2">
               Account & Billing
             </h1>
             <p className="text-ps-text-secondary">

apps/web/app/components/AccountInformation/AccountInformation.tsx

@@ -222,7 +222,7 @@ export default function AccountInformation({ userData, onUpdate }: AccountInform
   return (
     <div className="bg-ps-secondary rounded-lg p-6 shadow-sm">
       <div className="flex items-center justify-between mb-6">
-        <h2 className="text-xl font-semibold text-ps-primary">
+        <h2 className="md:text-xl font-semibold text-ps-primary">
           Account Information
         </h2>
         {!isEditing ? (
@@ -274,4 +274,4 @@ export default function AccountInformation({ userData, onUpdate }: AccountInform
       </div>
     </div>
   );
-}
+}

apps/web/app/components/Navigation.tsx

@@ -12,32 +12,32 @@ export default function Navigation({ hasDashboardAccess }: { hasDashboardAccess?
   ];
 
   if (hasDashboardAccess) {
-    navItems.unshift({ href: '/dashboard', label: 'Dashboard' });
+    navItems.unshift({ href: '/', label: 'Dashboard' });
   }
 
   return (
     <nav className="border-ps" style={{ borderBottomWidth: '1px' }}>
       <div className="container mx-auto px-6 py-4">
-        <div className="flex items-center justify-between">
+        <div className="flex flex-col md:items-center justify-between">
           {/* Logo */}
           <Link
             href="/"
-            className="text-2xl font-bold text-ps-primary hover:opacity-80 transition-opacity"
+            className="text-sm md:text-2xl font-bold text-ps-primary hover:opacity-80 transition-opacity"
           >
             _postscript
           </Link>
 
           {/* Navigation Links */}
-          <div className="flex items-center gap-6">
+          <div className="flex md:items-center md:gap-6">
             {navItems.map((item) => {
               const isActive = pathname === item.href;
               return (
                 <Link
                   key={item.href}
                   href={item.href}
                   className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${isActive
-                      ? 'text-ps-primary bg-ps-primary/10 dark:bg-ps-primary/20'
-                      : 'text-ps-secondary hover:text-ps-primary hover:bg-ps-primary/5 dark:hover:bg-ps-primary/10'
+                    ? 'text-ps-primary bg-ps-primary/10 dark:bg-ps-primary/20'
+                    : 'text-ps-secondary hover:text-ps-primary hover:bg-ps-primary/5 dark:hover:bg-ps-primary/10'
                     }`}
                 >
                   {item.label}

apps/web/app/entry/[promptId]/page.tsx

@@ -25,7 +25,7 @@ export default async function Entry({ params }: EntryPageProps) {
 
   if (!prompt) {
     return (
-      <Card className="w-full">
+      <div className="card w-full max-w-lg mx-auto p-4 sm:p-6 md:p-8 lg:p-10">
         <h2 className="text-xl text-slate-600 font-bold mb-4">
           No Prompt Available
         </h2>

apps/web/app/layout.tsx

@@ -5,6 +5,10 @@ import ConditionalNavigation from './components/ConditionalNavigation';
 export const metadata: Metadata = {
   title: '_postscript',
   description: 'Your personal journaling app',
+  viewport: {
+    width: 'device-width',
+    initialScale: 1,
+  },
 };
 
 export default function RootLayout({

apps/web/app/prompt/page.tsx

@@ -20,11 +20,11 @@ export default async function Prompt() {
 
   return (
     <div className="min-h-screen bg-ps-primary">
-      <div className="container mx-auto px-6 py-8">
+      <div className="container mx-auto px-2 py-2 md:px-6 md:py-8">
         <div className="max-w-4xl mx-auto">
           {/* Header */}
           <div className="mb-8">
-            <h1 className="text-3xl font-bold text-ps-primary mb-2">
+            <h1 className="md:text-3xl font-bold text-ps-primary mb-2">
               Your Prompts
             </h1>
             <p className="text-ps-secondary">
@@ -45,7 +45,7 @@ export default async function Prompt() {
                     }}
                   >
                     <div className="mb-3">
-                      <p className="text-lg text-ps-primary leading-relaxed line-clamp-3">
+                      <p className="md:text-lg text-ps-primary leading-relaxed line-clamp-3">
                         &ldquo;{prompt.content}&rdquo;
                       </p>
                     </div>