fix mobile tabs

frontend/src/components/CookbookRecipeTile.tsx

@@ -1,6 +1,7 @@
 import { type RecipeSmall } from "../types/Recipe"
 import { Link } from 'react-router-dom';
 import StarRating from '../components/StarRating.tsx'
+import TimeDisplay from "../components/TimeDisplay.tsx"
 
 function CookbookRecipeTile({ recipe }: { recipe: RecipeSmall }) {
 
@@ -13,7 +14,7 @@ function CookbookRecipeTile({ recipe }: { recipe: RecipeSmall }) {
         </div>
       </div>
       <div className="flex justify-between items-center">
-        ⏰ {recipe.prep_minutes + recipe.cook_minutes} min
+        ⏰ <TimeDisplay minutes={recipe.prep_minutes + recipe.cook_minutes} />
         <StarRating rating={recipe.stars} onRatingChange={() => { }} />
       </div>
     </div>

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>

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>

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">
+                <div className="flex items-center">
-                  <span className="text-lg">{tab.icon}</span>
+                  <span className={`text-lg pr-2 ${window.innerWidth <= 640 ? 'hidden' : ''}`}>{tab.icon}</span>
                   <span>{tab.label}</span>
                 </div>
 
-                {isActive && (
+                {
-                  <>
+                  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 className={`absolute -left-2 bottom-0 w-2 h-2 bg-white ${location.pathname === '/' ? 'hidden' : ''}`}>
-                    </div>
+                        <div className="absolute top-0 left-0 w-2 h-2 bg-amber-200 rounded-br-lg"></div>
-                    <div className={`absolute -right-2 bottom-0 w-2 h-2 bg-white ${location.pathname === '/about' ? 'hidden' : ''}`}>
+                      </div>
-                      <div className="absolute top-0 right-0 w-2 h-2 bg-amber-200 rounded-bl-lg"></div>
+                      <div className={`absolute -right-2 bottom-0 w-2 h-2 bg-white ${location.pathname === '/about' ? 'hidden' : ''}`}>
-                    </div>
+                        <div className="absolute top-0 right-0 w-2 h-2 bg-amber-200 rounded-bl-lg"></div>
-                  </>
+                      </div>
-                )}
+                    </>
+                  )
+                }
               </Link>
             );
           })}

frontend/src/components/TimeDisplay.tsx

@@ -0,0 +1,25 @@
+interface TimeDisplayProps {
+  minutes: number;
+}
+
+const TimeDisplay = ({ minutes }: TimeDisplayProps) => {
+  let displayText: string;
+
+  if (minutes < 60) {
+    displayText = `${minutes} min`;
+  } else {
+    const hours = Math.floor(minutes / 60);
+    const remainingMinutes = minutes % 60;
+    if (hours > 0 && remainingMinutes > 0) {
+      displayText = `${hours} hr${hours !== 1 ? 's' : ''} ${remainingMinutes} min`;
+    } else if (hours > 0) {
+      displayText = `${hours} hr${hours !== 1 ? 's' : ''}`;
+    } else {
+      displayText = `${remainingMinutes} min`;
+    }
+  }
+
+  return <>{displayText}</>;
+};
+
+export default TimeDisplay;

frontend/src/pages/RecipePage.tsx

@@ -1,11 +1,11 @@
 import { useParams, useNavigate, Link } from "react-router-dom";
 import { useState, useEffect } from "react";
-import { getRecipeById, deleteRecipe } from "../services/frontendApi.js";
+import { getRecipeById, deleteRecipe, setDBStars } from "../services/frontendApi.js";
 import { type Recipe, type Ingredient } from "../types/Recipe"
-import StarRating from "../components/StarRating.tsx"
-import { setDBStars } from "../services/frontendApi.js";
 import Modal from '../components/Modal.tsx'
 import DemoModal from '../components/DemoModal.tsx'
+import StarRating from "../components/StarRating.tsx"
+import TimeDisplay from '../components/TimeDisplay.tsx'
 
 function RecipePage() {
   const [recipe, setRecipe] = useState<Recipe>({
@@ -100,13 +100,13 @@ 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">
             <h3 className="text-2xl lg:text-3xl font-bold text-amber-900 mb-2">{recipe.details.name}</h3>
             <p className="text-amber-700 italic text-lg">{recipe.details.cuisine}</p>
-            <p>prep: {recipe.details.prep_minutes} min | cook: {recipe.details.cook_minutes} min</p>
+            <p>prep: <TimeDisplay minutes={recipe.details.prep_minutes ?? 0} /> | cook: <TimeDisplay minutes={recipe.details.cook_minutes ?? 0} /></p>
           </div>
 
           <div className="grid lg:grid-cols-2 gap-6 mb-6">