From 37f4bda79577de125a32540e4c169ae3b96d1fed Mon Sep 17 00:00:00 2001
From: clawd <clawd@docker-openclaw.local>
Date: Wed, 18 Feb 2026 10:45:53 +0000
Subject: [PATCH] fix: tablet responsiveness - wider layout, bigger text, 3-col
 grid for Tab S Ultra

---
 backend/data/recipes.db-shm                   | Bin 32768 -> 32768 bytes
 backend/data/recipes.db-wal                   | Bin 2191872 -> 2410232 bytes
 frontend/src/components/layout/AppShell.tsx   |   2 +-
 frontend/src/components/layout/BottomNav.tsx  |   6 +++---
 frontend/src/components/recipe/RecipeCard.tsx |   2 +-
 frontend/src/components/ui/Badge.tsx          |   2 +-
 frontend/src/pages/HomePage.tsx               |   4 ++--
 frontend/src/pages/RecipePage.tsx             |   6 +++---
 frontend/src/pages/SearchPage.tsx             |   2 +-
 frontend/src/pages/ShoppingPage.tsx           |   4 ++--
 10 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/backend/data/recipes.db-shm b/backend/data/recipes.db-shm
index 626b8f9dcdd919e895637a2ecab0a93a9ad3dd6a..ebe12635618c270780ccf8eba2b470f29cb3269c 100644
GIT binary patch
delta 386
zcmZo@U}|V!s+V}A%K!p`K+MR%AmGWwzyK2YH6<_nZx-)M)m1y1JufVtE+4#mq2%^?
zXGv8LG8+Uy=Ke<l5K)GW^^qKtCvdP#ZebRfT*IOO#4?jpm_;TRFmvF*ER&d7Cc7|+
zOm<)eVS&w0IR2S!UghAxE~v?*&7{ku&t%AC%w)=B&SW`xqr?BrzdW8X3TiRwFzGQF
zFc~qKFqtt~Fj;Nh=)lgn`G>a%6TcXf6q6j25|bK}4U;328&K2j&ENch65>qKO!7?1
zOzKRwOioPhV2Lk*KnV#Z872iL6($WPJ0@o)53t0i5ECJOQ6@<yStdm$RVHgD2PRjb
fCCZGGKX4>%-j$)p$!gE!!sH25{BiTWA|+k`mBenU

delta 222
zcmZo@U}|V!s+V}A%K!t63=9GyObiSlk;Dm%^FxJy6sxY<(d>C)@$~o)r+0t+rn8Gw
z^)RzR=Ke<lQ1OlRksO=1aDFqJe1P-L=2Z?3?3+JD2{3N{<?)OW$dX{({KH#>Y4RqA
oSDU~2K^b2Hp^Q%<CPJGxIVdp#H5YB(m7&K8RQPT4y&@%E0Cf9RnE(I)

diff --git a/backend/data/recipes.db-wal b/backend/data/recipes.db-wal
index 78845cc67cfe5356344b37511d8fe52b98611d40..8dcab291fad6dc35913bcea00f147776b274ff44 100644
GIT binary patch
delta 13425
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

delta 76
zcmV~$OBzC8006-6FG4DXUMlK}PGB)DTe*UxIfP|1%Wn+B{0)O(Wi1lhNTf1bxt+a(
Y!qG{oQaii2y18pSJiW9!@9ES30nd&YO8@`>

diff --git a/frontend/src/components/layout/AppShell.tsx b/frontend/src/components/layout/AppShell.tsx
index c0187bb..015fb1a 100644
--- a/frontend/src/components/layout/AppShell.tsx
+++ b/frontend/src/components/layout/AppShell.tsx
@@ -4,7 +4,7 @@ import { BottomNav } from './BottomNav'
 export function AppShell() {
   return (
     <div className="min-h-screen bg-cream">
-      <div className="max-w-lg mx-auto pb-20">
+      <div className="max-w-3xl mx-auto pb-20 px-0 sm:px-4">
         <Outlet />
       </div>
       <BottomNav />
diff --git a/frontend/src/components/layout/BottomNav.tsx b/frontend/src/components/layout/BottomNav.tsx
index 2fe39b8..d172f70 100644
--- a/frontend/src/components/layout/BottomNav.tsx
+++ b/frontend/src/components/layout/BottomNav.tsx
@@ -12,18 +12,18 @@ const navItems = [
 export function BottomNav() {
   return (
     <nav className="fixed bottom-0 left-0 right-0 bg-surface border-t border-sand z-50">
-      <div className="max-w-lg mx-auto flex justify-around items-center h-16">
+      <div className="max-w-lg mx-auto flex justify-around items-center h-16 sm:h-18">
         {navItems.map(({ to, icon: Icon, label }) => (
           <NavLink
             key={to}
             to={to}
             className={({ isActive }) =>
-              `flex flex-col items-center gap-0.5 text-xs transition-colors ${
+              `flex flex-col items-center gap-0.5 text-xs sm:text-sm transition-colors ${
                 isActive ? 'text-primary' : 'text-warm-grey'
               }`
             }
           >
-            <Icon size={22} />
+            <Icon size={24} />
             <span>{label}</span>
           </NavLink>
         ))}
diff --git a/frontend/src/components/recipe/RecipeCard.tsx b/frontend/src/components/recipe/RecipeCard.tsx
index ca30b50..7d5fde3 100644
--- a/frontend/src/components/recipe/RecipeCard.tsx
+++ b/frontend/src/components/recipe/RecipeCard.tsx
@@ -34,7 +34,7 @@ export function RecipeCard({ recipe }: { recipe: Recipe }) {
       </Link>
       <div className="p-3">
         <Link to={`/recipe/${recipe.slug}`}>
-          <h3 className="font-display text-base text-espresso line-clamp-2">{recipe.title}</h3>
+          <h3 className="font-display text-base sm:text-lg text-espresso line-clamp-2">{recipe.title}</h3>
         </Link>
         <div className="flex items-center justify-between mt-2">
           {totalTime > 0 && (
diff --git a/frontend/src/components/ui/Badge.tsx b/frontend/src/components/ui/Badge.tsx
index 17e58a2..ace9926 100644
--- a/frontend/src/components/ui/Badge.tsx
+++ b/frontend/src/components/ui/Badge.tsx
@@ -8,7 +8,7 @@ export function Badge({ children, active, onClick }: Props) {
   return (
     <span
       onClick={onClick}
-      className={`inline-block px-3 py-1 rounded-full text-sm font-medium cursor-pointer transition-colors whitespace-nowrap ${
+      className={`inline-block px-3 py-1 rounded-full text-sm sm:text-base font-medium cursor-pointer transition-colors whitespace-nowrap ${
         active
           ? 'bg-primary text-white'
           : 'bg-primary-light text-primary'
diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx
index b1d3fe5..07e89b5 100644
--- a/frontend/src/pages/HomePage.tsx
+++ b/frontend/src/pages/HomePage.tsx
@@ -153,7 +153,7 @@ export function HomePage() {
       {/* Recipe Grid */}
       <div className="px-4">
         {isLoading ? (
-          <Masonry breakpointCols={2} className="flex -ml-4" columnClassName="pl-4">
+          <Masonry breakpointCols={{ default: 3, 768: 2, 480: 2 }} className="flex -ml-4" columnClassName="pl-4">
             {Array.from({ length: 6 }).map((_, i) => <RecipeCardSkeleton key={i} />)}
           </Masonry>
         ) : filteredRecipes.length === 0 ? (
@@ -163,7 +163,7 @@ export function HomePage() {
             icon="🧁"
           />
         ) : (
-          <Masonry breakpointCols={2} className="flex -ml-4" columnClassName="pl-4">
+          <Masonry breakpointCols={{ default: 3, 768: 2, 480: 2 }} className="flex -ml-4" columnClassName="pl-4">
             {filteredRecipes.map((recipe: Recipe, i: number) => (
               <motion.div
                 key={recipe.id}
diff --git a/frontend/src/pages/RecipePage.tsx b/frontend/src/pages/RecipePage.tsx
index 3a304e2..74db2a1 100644
--- a/frontend/src/pages/RecipePage.tsx
+++ b/frontend/src/pages/RecipePage.tsx
@@ -135,7 +135,7 @@ export function RecipePage() {
       <div className="p-4 space-y-6">
         {/* Title & Meta */}
         <div>
-          <h1 className="font-display text-2xl text-espresso">{recipe.title}</h1>
+          <h1 className="font-display text-2xl sm:text-3xl text-espresso">{recipe.title}</h1>
           <div className="flex flex-wrap items-center gap-2 mt-2">
             {recipe.category_name ? (
               <Badge>{recipe.category_name}</Badge>
@@ -206,7 +206,7 @@ export function RecipePage() {
                   {items!.map((ing, i) => (
                     <motion.li
                       key={i}
-                      className="flex gap-2 text-sm text-espresso py-1 border-b border-sand/50"
+                      className="flex gap-2 text-sm sm:text-base text-espresso py-1 border-b border-sand/50"
                       initial={{ opacity: 0, x: -10 }}
                       animate={{ opacity: 1, x: 0 }}
                       transition={{ delay: i * 0.03 }}
@@ -251,7 +251,7 @@ export function RecipePage() {
                   <span className="flex-shrink-0 w-7 h-7 rounded-full bg-primary text-white text-sm flex items-center justify-center font-medium">
                     {step.step_number || i + 1}
                   </span>
-                  <div className="text-sm text-espresso pt-1">
+                  <div className="text-sm sm:text-base text-espresso pt-1">
                     <p>{step.instruction}</p>
                     {step.timer_minutes && (
                       <span className="inline-flex items-center gap-1 mt-1 text-xs text-primary">
diff --git a/frontend/src/pages/SearchPage.tsx b/frontend/src/pages/SearchPage.tsx
index 10490a3..8a806ed 100644
--- a/frontend/src/pages/SearchPage.tsx
+++ b/frontend/src/pages/SearchPage.tsx
@@ -36,7 +36,7 @@ export function SearchPage() {
           value={query}
           onChange={(e) => setQuery(e.target.value)}
           placeholder="Rezept suchen..."
-          className="w-full pl-10 pr-4 py-3 bg-surface rounded-xl border border-sand text-espresso text-sm focus:outline-none focus:border-primary"
+          className="w-full pl-10 pr-4 py-3 bg-surface rounded-xl border border-sand text-espresso text-sm sm:text-base focus:outline-none focus:border-primary"
         />
       </div>
 
diff --git a/frontend/src/pages/ShoppingPage.tsx b/frontend/src/pages/ShoppingPage.tsx
index b9b2e07..2822f70 100644
--- a/frontend/src/pages/ShoppingPage.tsx
+++ b/frontend/src/pages/ShoppingPage.tsx
@@ -147,7 +147,7 @@ export function ShoppingPage() {
             value={newItem}
             onChange={(e) => setNewItem(e.target.value)}
             placeholder="Artikel hinzufügen..."
-            className="flex-1 bg-surface border border-sand rounded-xl px-4 py-3 text-base text-espresso placeholder:text-warm-grey/50 focus:outline-none focus:ring-2 focus:ring-primary/30"
+            className="flex-1 bg-surface border border-sand rounded-xl px-4 py-3 text-base sm:text-lg text-espresso placeholder:text-warm-grey/50 focus:outline-none focus:ring-2 focus:ring-primary/30"
           />
           <button
             type="submit"
@@ -289,7 +289,7 @@ function ShoppingItemRow({
         </button>
 
         <div className={`flex-1 min-w-0 ${item.checked ? 'opacity-50' : ''}`}>
-          <span className={`text-base text-espresso ${item.checked ? 'line-through text-warm-grey' : ''}`}>
+          <span className={`text-base sm:text-lg text-espresso ${item.checked ? 'line-through text-warm-grey' : ''}`}>
             {item.name}
           </span>
         </div>