Skip to content

Commit 90370b9

Browse files
KrishP147KrishP147
committed
fixed element (button, header, images) sizing/overlap on iphone
1 parent b73af8d commit 90370b9

7 files changed

Lines changed: 124 additions & 118 deletions

File tree

‎frontend/src/components/FoodSearchInput.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -102,14 +102,14 @@ export default function FoodSearchInput({ onFoodSelect, initialValue = '' }) {
102102

103103
return (
104104
<div className="relative" ref={dropdownRef}>
105-
<div className="flex gap-2">
105+
<div className="flex flex-col sm:flex-row gap-2">
106106
<input
107107
type="number"
108108
value={quantity}
109109
onChange={(e) => setQuantity(parseFloat(e.target.value) || 1)}
110110
min="0.1"
111111
step="0.1"
112-
className="w-20 px-3 py-2 bg-black border border-white/10 focus:ring-2 focus:ring-primary-700 focus:border-transparent text-white font-mono"
112+
className="w-full sm:w-20 px-3 py-2 bg-black border border-white/10 focus:ring-2 focus:ring-primary-700 focus:border-transparent text-white font-mono"
113113
placeholder="Qty"
114114
/>
115115
<div className="relative flex-1">
@@ -119,8 +119,8 @@ export default function FoodSearchInput({ onFoodSelect, initialValue = '' }) {
119119
value={query}
120120
onChange={(e) => setQuery(e.target.value)}
121121
onFocus={() => results.length > 0 && setShowDropdown(true)}
122-
placeholder="Search food (e.g., eggs, chicken breast, banana)..."
123-
className="w-full pl-10 pr-4 py-2 bg-black border border-white/10 focus:ring-2 focus:ring-primary-700 focus:border-transparent text-white placeholder-white/40"
122+
placeholder="Search food..."
123+
className="w-full pl-10 pr-4 py-2 bg-black border border-white/10 focus:ring-2 focus:ring-primary-700 focus:border-transparent text-white placeholder-white/40"
124124
/>
125125
</div>
126126
</div>

‎frontend/src/components/MealForm.jsx‎

Lines changed: 32 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -283,41 +283,43 @@ export default function MealForm({ onMealAdded }) {
283283
{foods.length > 0 && (
284284
<div className="space-y-2 mb-3">
285285
{foods.map((food, idx) => (
286-
<div key={food.id} className="bg-black border border-[#1a1a1a] p-3 ">
287-
<div className="flex items-center gap-3">
288-
<div className="flex-1">
289-
<p className="text-sm font-medium text-white">{food.name}</p>
286+
<div key={food.id} className="bg-black border border-[#1a1a1a] p-3">
287+
<div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-3">
288+
<div className="flex-1 min-w-0">
289+
<p className="text-sm font-medium text-white truncate">{food.name}</p>
290290
<p className="text-xs text-white/60">
291291
Base: {food.base_calories} cal per 100g
292292
</p>
293293
</div>
294-
<div className="w-32">
295-
<label className="block text-xs text-white/60 mb-1">
296-
Count (g or x)
297-
</label>
298-
<input
299-
type="text"
300-
value={food.portion_display}
301-
onChange={(e) => updateFoodQuantity(idx, e.target.value)}
302-
placeholder="1"
303-
className="w-full px-2 py-1 bg-black border border-[#1a1a1a] text-sm focus:ring-2 focus:ring-primary-700 text-white"
304-
/>
294+
<div className="flex items-center gap-2 sm:gap-3">
295+
<div className="w-24 sm:w-32">
296+
<label className="block text-xs text-white/60 mb-1">
297+
Count
298+
</label>
299+
<input
300+
type="text"
301+
value={food.portion_display}
302+
onChange={(e) => updateFoodQuantity(idx, e.target.value)}
303+
placeholder="1"
304+
className="w-full px-2 py-1 bg-black border border-[#1a1a1a] text-sm focus:ring-2 focus:ring-primary-700 text-white"
305+
/>
306+
</div>
307+
<div className="text-right min-w-[60px]">
308+
<p className="text-sm font-mono font-semibold text-primary-700">
309+
{Math.round(food.calories)} cal
310+
</p>
311+
<p className="text-xs text-white/60">
312+
P: {food.protein_g.toFixed(1)}g
313+
</p>
314+
</div>
315+
<button
316+
type="button"
317+
onClick={() => removeFood(idx)}
318+
className="text-red-500 hover:text-red-400 text-xs font-medium px-2 py-1"
319+
>
320+
✕
321+
</button>
305322
</div>
306-
<div className="text-right">
307-
<p className="text-sm font-mono font-semibold text-primary-700">
308-
{Math.round(food.calories)} cal
309-
</p>
310-
<p className="text-xs text-white/60">
311-
P: {food.protein_g.toFixed(1)}g
312-
</p>
313-
</div>
314-
<button
315-
type="button"
316-
onClick={() => removeFood(idx)}
317-
className="text-red-500 hover:text-red-400 text-xs font-medium"
318-
>
319-
Remove
320-
</button>
321323
</div>
322324
</div>
323325
))}

‎frontend/src/components/MealList.jsx‎

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -748,20 +748,20 @@ export default function MealList({ refreshTrigger, onMealDeleted, onMealUpdated,
748748
// Edit Mode
749749
<div className="space-y-4 p-4">
750750
<div>
751-
<div className="flex items-center gap-2 mb-2 overflow-x-auto">
751+
<div className="flex flex-col sm:flex-row sm:items-center gap-2 mb-2">
752752
<input
753753
type="text"
754754
value={editMealName}
755755
onChange={(e) => setEditMealName(e.target.value)}
756756
placeholder="Meal name"
757-
className={`flex-1 min-w-0 text-base sm:text-lg font-semibold px-3 py-2 ${colors.inputBg} border-2 ${colors.inputBorder} text-white focus:ring-2 focus:ring-primary-700`}
757+
className={`flex-1 min-w-0 text-base sm:text-lg font-semibold px-3 py-2 ${colors.inputBg} border-2 ${colors.inputBorder} text-white focus:ring-2 focus:ring-primary-700`}
758758
/>
759759
<button
760760
onClick={() => setEditMealName(originalMealName)}
761-
className="bg-gray-500 hover:bg-gray-600 text-white px-3 py-2 text-xs sm:text-sm font-medium transition whitespace-nowrap flex-shrink-0"
761+
className="w-full sm:w-auto bg-gray-500 hover:bg-gray-600 text-white px-3 py-2 text-xs sm:text-sm font-medium transition whitespace-nowrap flex-shrink-0"
762762
title="Reset to original name"
763763
>
764-
Reset
764+
Reset Name
765765
</button>
766766
</div>
767767
</div>
@@ -842,18 +842,18 @@ export default function MealList({ refreshTrigger, onMealDeleted, onMealUpdated,
842842
{editingComponentIndex === idx ? (
843843
// Edit mode - show nutrition inputs
844844
<div className="space-y-2">
845-
<div className="flex justify-between items-center">
846-
<p className={`text-sm font-medium ${colors.textPrimary}`}>{component.component_name}</p>
845+
<div className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-2">
846+
<p className={`text-sm font-medium ${colors.textPrimary} truncate`}>{component.component_name}</p>
847847
<div className="flex gap-2">
848848
<button
849849
onClick={() => setEditingComponentIndex(null)}
850-
className="text-xs bg-green-600 text-white px-2 py-1 hover:bg-green-700"
850+
className="text-xs bg-green-600 text-white px-2 py-1.5 hover:bg-green-700"
851851
>
852852
Done
853853
</button>
854854
<button
855855
onClick={() => saveComponentAsCustomFood(idx)}
856-
className="text-xs bg-amber-500 text-black px-2 py-1 hover:bg-amber-400"
856+
className="text-xs bg-amber-500 text-black px-2 py-1.5 hover:bg-amber-400"
857857
>
858858
Save
859859
</button>
@@ -922,25 +922,25 @@ export default function MealList({ refreshTrigger, onMealDeleted, onMealUpdated,
922922
) : (
923923
// View mode
924924
<div className="space-y-2">
925-
<div className="flex justify-between items-start">
926-
<div className="flex-1">
927-
<p className={`text-sm font-medium ${colors.textPrimary}`}>{component.component_name}</p>
925+
<div className="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-2">
926+
<div className="flex-1 min-w-0">
927+
<p className={`text-sm font-medium ${colors.textPrimary} truncate`}>{component.component_name}</p>
928928
<p className={`text-xs ${colors.textSecondary}`}>
929929
Base: {component.base_calories} cal per 100{component.portion_unit}
930930
</p>
931931
</div>
932-
<div className="flex gap-2">
932+
<div className="flex gap-2 flex-shrink-0">
933933
<button
934934
onClick={() => setReplacingComponentIndex(idx)}
935-
className="text-xs bg-orange-500 text-white px-2 py-1 hover:bg-orange-600"
935+
className="text-xs bg-orange-500 text-white px-2 py-1 hover:bg-orange-600"
936936
>
937-
🔄 Replace
937+
Replace
938938
</button>
939939
<button
940940
onClick={() => setEditingComponentIndex(idx)}
941941
className={`text-xs ${colors.accentColor} hover:opacity-80`}
942942
>
943-
Edit Manually
943+
Edit
944944
</button>
945945
</div>
946946
</div>
@@ -990,17 +990,17 @@ export default function MealList({ refreshTrigger, onMealDeleted, onMealUpdated,
990990
) : (
991991
// Simple food - smart quantity input with Replace button and macro editing
992992
<div className="space-y-3">
993-
<div className="flex justify-between items-center">
993+
<div className="flex flex-col sm:flex-row gap-2">
994994
<button
995995
onClick={() => setReplacingSimpleMeal(meal.id)}
996-
className="text-xs bg-orange-500 text-white px-3 py-1.5 hover:bg-orange-600 transition font-medium"
996+
className="text-xs bg-orange-500 text-white px-3 py-1.5 hover:bg-orange-600 transition font-medium flex-1 sm:flex-none"
997997
>
998-
🔄 Replace Food
998+
Replace Food
999999
</button>
10001000
<button
10011001
type="button"
10021002
onClick={() => saveSimpleFoodAsCustomFood(meal)}
1003-
className="text-xs bg-amber-500 text-black px-3 py-1.5 hover:bg-amber-400 transition font-medium shadow-md"
1003+
className="text-xs bg-amber-500 text-black px-3 py-1.5 hover:bg-amber-400 transition font-medium shadow-md flex-1 sm:flex-none"
10041004
>
10051005
Save as My Food
10061006
</button>
@@ -1162,16 +1162,16 @@ export default function MealList({ refreshTrigger, onMealDeleted, onMealUpdated,
11621162
</p>
11631163
</div>
11641164

1165-
<div className="flex gap-2 pt-2">
1165+
<div className="flex flex-col sm:flex-row gap-2 pt-2">
11661166
<button
11671167
onClick={() => saveEdit(meal)}
1168-
className={`flex-1 ${colors.buttonPrimary} text-white py-2 px-4 text-sm font-medium transition`}
1168+
className={`flex-1 ${colors.buttonPrimary} text-white py-2.5 px-4 text-sm font-medium transition`}
11691169
>
11701170
Save Changes
11711171
</button>
11721172
<button
11731173
onClick={cancelEditing}
1174-
className={`flex-1 ${colors.buttonSecondary} ${colors.textSecondary} py-2 px-4 text-sm font-medium transition`}
1174+
className={`flex-1 ${colors.buttonSecondary} ${colors.textSecondary} py-2.5 px-4 text-sm font-medium transition`}
11751175
>
11761176
Cancel
11771177
</button>
@@ -1215,7 +1215,7 @@ export default function MealList({ refreshTrigger, onMealDeleted, onMealUpdated,
12151215
</div>
12161216

12171217
{/* Action Buttons */}
1218-
<div className="flex gap-2 sm:ml-4 mt-2 sm:mt-0">
1218+
<div className="flex gap-3 sm:gap-2 sm:ml-4 mt-2 sm:mt-0 flex-shrink-0">
12191219
<button
12201220
onClick={() => startEditing(meal)}
12211221
className={`${colors.accentColor} hover:opacity-80 text-xs sm:text-sm font-medium`}
@@ -1226,13 +1226,13 @@ export default function MealList({ refreshTrigger, onMealDeleted, onMealUpdated,
12261226
onClick={() => handleDuplicate(meal)}
12271227
className="text-secondary-500 hover:opacity-80 text-xs sm:text-sm font-medium"
12281228
>
1229-
Duplicate
1229+
Copy
12301230
</button>
12311231
<button
12321232
onClick={() => handleDelete(meal.id)}
12331233
className="text-red-500 hover:opacity-80 text-xs sm:text-sm font-medium"
12341234
>
1235-
Delete
1235+
Del
12361236
</button>
12371237
</div>
12381238
</div>

0 commit comments

Comments
 (0)