From fdaf4cff1fa8770e91f3a7fbe7f9bf1297077040 Mon Sep 17 00:00:00 2001
From: fred <>
Date: Thu, 7 Aug 2025 11:57:11 -0700
Subject: [PATCH] fix mobile tabs

---
 frontend/src/components/DemoModal.tsx      |  2 +-
 frontend/src/components/Modal.tsx          |  2 +-
 frontend/src/components/RecipeBookTabs.tsx | 32 ++++++++++++----------
 frontend/src/pages/RecipePage.tsx          |  2 +-
 4 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/DemoModal.tsx b/frontend/src/components/DemoModal.tsx
index c3b1d0f..de4f6e9 100644
--- a/frontend/src/components/DemoModal.tsx
+++ b/frontend/src/components/DemoModal.tsx
@@ -10,7 +10,7 @@ const DemoModal = ({ isOpen, onClose, closeModal }: DemoModalProps) => {
   if (!isOpen) return null;
 
   return (
-    <div className="modal-overlay fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 flex justify-center items-center" onClick={onClose}>
+    <div className={`z-50 modal-overlay fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 flex justify-center items-center`} onClick={onClose}>
       <div className="modal-content bg-amber-200 p-12 rounded-md shadow-md" onClick={(e) => e.stopPropagation()}>
         <div className="modal-msg">
           <p>Thanks for checking out my app! Database write operations are disabled in demo mode.</p>
diff --git a/frontend/src/components/Modal.tsx b/frontend/src/components/Modal.tsx
index 8985471..5ee8453 100644
--- a/frontend/src/components/Modal.tsx
+++ b/frontend/src/components/Modal.tsx
@@ -10,7 +10,7 @@ const Modal = ({ isOpen, onClose, message, confirmAction, cancelAction }: ModalP
   if (!isOpen) return null;
 
   return (
-    <div className="modal-overlay fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 flex justify-center items-center" onClick={onClose}>
+    <div className={`z-50 modal-overlay fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 flex justify-center items-center`} onClick={onClose}>
       <div className="modal-content bg-amber-200 p-12 rounded-md shadow-md" onClick={(e) => e.stopPropagation()}>
         <div className="modal-msg">
           <span aria-labelledby="message">{message}</span>
diff --git a/frontend/src/components/RecipeBookTabs.tsx b/frontend/src/components/RecipeBookTabs.tsx
index 890e6fb..b00ba02 100644
--- a/frontend/src/components/RecipeBookTabs.tsx
+++ b/frontend/src/components/RecipeBookTabs.tsx
@@ -35,9 +35,9 @@ const RecipeBookTabs = () => {
 
 
   const tabs = [
-    { id: '/', label: 'All Recipes', icon: '📚' },
+    { id: '/', label: 'Cookbook', icon: '📚' },
     { id: `/recipe/${lastViewedRecipeId}`, label: 'Recipe', icon: '🥗' },
-    { id: '/add-recipe', label: 'Add Recipe', icon: '➕' },
+    { id: '/add-recipe', label: 'Add', icon: '➕' },
     { id: '/about', label: 'About', icon: '🍽️' },
   ];
 
@@ -55,7 +55,7 @@ const RecipeBookTabs = () => {
                 key={tab.id}
                 to={tab.id}
                 className={`
-                  relative px-6 py-3 rounded-t-lg font-bold text-sm transform text-amber-800
+                  relative px-3 py-2 md:px-6 md:py-3 rounded-t-lg font-bold text-sm transform text-amber-800
                   ${isActive
                     ? 'bg-amber-100 scale-105 z-10 border-t-2 border-amber-200'
                     : 'bg-amber-200 hover:bg-amber-100 hover:text-amber-700 hover:scale-102 shadow-sm'
@@ -64,21 +64,23 @@ const RecipeBookTabs = () => {
                   ${isActive ? '' : ''}
                 `}
               >
-                <div className="flex items-center space-x-2">
-                  <span className="text-lg">{tab.icon}</span>
+                <div className="flex items-center">
+                  <span className={`text-lg pr-2 ${window.innerWidth <= 640 ? 'hidden' : ''}`}>{tab.icon}</span>
                   <span>{tab.label}</span>
                 </div>
 
-                {isActive && (
-                  <>
-                    <div className={`absolute -left-2 bottom-0 w-2 h-2 bg-white ${location.pathname === '/' ? 'hidden' : ''}`}>
-                      <div className="absolute top-0 left-0 w-2 h-2 bg-amber-200 rounded-br-lg"></div>
-                    </div>
-                    <div className={`absolute -right-2 bottom-0 w-2 h-2 bg-white ${location.pathname === '/about' ? 'hidden' : ''}`}>
-                      <div className="absolute top-0 right-0 w-2 h-2 bg-amber-200 rounded-bl-lg"></div>
-                    </div>
-                  </>
-                )}
+                {
+                  isActive && (
+                    <>
+                      <div className={`absolute -left-2 bottom-0 w-2 h-2 bg-white ${location.pathname === '/' ? 'hidden' : ''}`}>
+                        <div className="absolute top-0 left-0 w-2 h-2 bg-amber-200 rounded-br-lg"></div>
+                      </div>
+                      <div className={`absolute -right-2 bottom-0 w-2 h-2 bg-white ${location.pathname === '/about' ? 'hidden' : ''}`}>
+                        <div className="absolute top-0 right-0 w-2 h-2 bg-amber-200 rounded-bl-lg"></div>
+                      </div>
+                    </>
+                  )
+                }
               </Link>
             );
           })}
diff --git a/frontend/src/pages/RecipePage.tsx b/frontend/src/pages/RecipePage.tsx
index bfef52c..f5c1aea 100644
--- a/frontend/src/pages/RecipePage.tsx
+++ b/frontend/src/pages/RecipePage.tsx
@@ -100,7 +100,7 @@ function RecipePage() {
       ) : (
 
         <div className="recipe-card relative">
-          <button onClick={openModal} className="ar-button bg-gray-200 text-white py-1 px-2 rounded hover:bg-gray-300 m-2 absolute top-0 right-0">
+          <button onClick={openModal} className="ar-button bg-amber-500 text-white py-1 px-2 rounded hover:bg-amber-600 m-2 absolute top-0 right-0">
             🗑️
           </button>
           <div className="border-b-2 border-amber-300 pb-4 mb-6">