Optimize servings control

frontend/src/App.css

@@ -1,9 +1,10 @@
 /* Import Tailwind layers */
 @import "tailwindcss";
+
 @tailwind utilities;
 
 /* Custom recipe app styles */
-@layer components{
+@layer components {
 
     /* background */
     .app-bg {
@@ -11,11 +12,15 @@
     }
 
     .content-container {
-    @apply bg-gray-100 w-full min-h-screen max-w-6xl shadow-xl p-8
+        @apply bg-gray-100 w-full min-h-screen max-w-6xl shadow-xl p-8;
     }
 
     /* headings */
-  .content-title{
+    .sticky-header {
+        @apply sticky bg-gray-100 top-0 left-0 right-0 pb-6 border-b-2 border-gray-300;
+    }
+
+    .content-title {
         @apply text-3xl font-black mb-8 text-blue-900;
     }
 
@@ -44,30 +49,38 @@
     }
 
     /* buttons */
-  .basic-button{
+    .basic-button {
         @apply px-4 py-2 shadow-md rounded-lg whitespace-nowrap;
     }
+
     .default-button-bg {
         @apply bg-gray-300  hover:bg-gray-400;
     }
-  .default-button-text{
+
+    .default-button-text {
         @apply text-gray-600;
     }
+
     .primary-button-bg {
         @apply bg-blue-300 hover:bg-blue-400;
     }
+
     .primary-button-text {
         @apply text-gray-600;
     }
-  .dark-button-bg{
+
+    .dark-button-bg {
         @apply bg-gray-600  hover:bg-gray-800;
     }
-  .dark-button-text{
+
+    .dark-button-text {
         @apply text-white;
     }
+
     .transparent-button-bg {
         @apply bg-transparent hover:bg-transparent;
     }
+
     .transparent-button-text {
         @apply text-gray-600;
     }
@@ -78,11 +91,11 @@
     }
 
     /* groups */
-  .button-group{
+    .button-group {
         @apply flex gap-4 mt-4;
     }
 
-  .horizontal-input-group{
+    .horizontal-input-group {
         @apply flex gap-2 mb-2 items-center;
     }
 
@@ -95,7 +108,7 @@
         @apply py-4 border-b border-gray-400;
     }
 
-  .enumeration-indicator{
+    .enumeration-indicator {
         @apply flex-shrink-0 w-7 h-7 rounded-full bg-blue-300 text-white flex items-center justify-center shadow-sm;
     }
 

frontend/src/components/recipes/RecipeDetailPage.tsx

@@ -77,7 +77,7 @@ export default function RecipeDetailPage() {
             {/* Container defining the maximum width of the content */}
             <div className="content-container">
                 {/* Header - remains in position when scrolling */}
-                <div className="sticky bg-gray-100 top-0 left-0 right-0 pb-6 border-b-2 border-gray-300">
+                <div className="sticky-header">
                     <h1 className="content-title mb-0">{recipeWorkingCopy.title}</h1>
                 </div>
 
@@ -93,19 +93,44 @@ export default function RecipeDetailPage() {
                     )}
 
                     {/* Servings */}
-                    <div className="flex flex-row items-center gap-2 bg-blue-100 columns-2 rounded p-2 mb-4">
+                    <div
-                        <p className="mb-2">For {recipeWorkingCopy.servings.amount} {recipeWorkingCopy.servings.unit}</p>
+                        className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 bg-gray-200 rounded p-3 mb-4">
+                        <p>
+                            Für {recipeWorkingCopy.servings.amount} {recipeWorkingCopy.servings.unit}
+                        </p>
+
+                        <div className="flex items-center justify-end sm:justify-center gap-2">
+                            {/* Minus button */}
+                            <button
+                                type="button"
+                                onClick={() => recalculateIngredients(Math.max(1, recipeWorkingCopy.servings.amount - 1))}
+                                className="enumeration-indicator primary-button-bg"
+                            >
+                                –
+                            </button>
+
+                            {/* Number input (no spin buttons) */}
                             <input
                                 type="number"
-                            className="input-field w-20 ml-auto"
+                                inputMode="numeric"
+                                pattern="[0-9]*"
+                                className="w-16 text-center input-field"
                                 value={recipeWorkingCopy.servings.amount}
-                            onChange={
+                                onChange={e => recalculateIngredients(Number(e.target.value))}
-                                e => {
+                                min={1}
-                                    recalculateIngredients(Number(e.target.value))
-                                }
-                            }
                             />
+
+                            {/* Plus button */}
+                            <button
+                                type="button"
+                                onClick={() => recalculateIngredients(recipeWorkingCopy.servings.amount + 1)}
+                                className="enumeration-indicator primary-button-bg"
+                            >
+                                +
+                            </button>
                         </div>
+                    </div>
+
                     {/* Ingredients */}
                     <h2 className="section-heading">Zutaten</h2>
                     <ul>

frontend/src/components/recipes/RecipeListPage.tsx

@@ -1,9 +1,9 @@
-import { useEffect, useState } from "react"
+import {useEffect, useState} from "react"
 import RecipeListItem from "./RecipeListItem"
-import type { RecipeModel } from "../../models/RecipeModel"
+import type {RecipeModel} from "../../models/RecipeModel"
-import { fetchRecipeList } from "../../api/points/CompactRecipePoint"
+import {fetchRecipeList} from "../../api/points/CompactRecipePoint"
-import { useNavigate } from "react-router-dom"
+import {useNavigate} from "react-router-dom"
-import { getRecipeAddUrl, getRecipeDetailUrl, getRecipeListUrl } from "../../routes"
+import {getRecipeAddUrl, getRecipeDetailUrl, getRecipeListUrl} from "../../routes"
 import RecipeListToolbar from "./RecipeListToolbar"
 
 /**
@@ -13,7 +13,7 @@ import RecipeListToolbar from "./RecipeListToolbar"
 export default function RecipeListPage() {
 
     const navigate = useNavigate()
-  const [recipeList, setRecipeList] = useState<RecipeModel[]|null>(null)
+    const [recipeList, setRecipeList] = useState<RecipeModel[] | null>(null)
     const [searchString, setSearchString] = useState<string>("")
     // load recipes once on render and whenever search string changes
     // @todo add delay. Only reload list if the search string hasn't changed for ~200 ms
@@ -30,20 +30,22 @@ export default function RecipeListPage() {
             }
         }
         loadRecipeList()
-    }, [,searchString])
+    }, [, searchString])
 
     const handleAdd = () => {
         navigate(getRecipeAddUrl())
     }
 
-  if(!recipeList) { return <div>Loading!</div>}
+    if (!recipeList) {
+        return <div>Loading!</div>
+    }
     return (
         /*Container spanning entire screen used to center content horizontally */
         <div className="app-bg">
             {/* Container defining the maximum width of the content */}
             <div className="content-container">
                 {/* Header - remains in position when scrolling */}
-        <div className="sticky bg-gray-100 top-0 left-0 right-0 pb-4 border-b-2 border-gray-300">
+                <div className="sticky-header">
                     <h1 className="content-title">Recipes</h1>
                     <RecipeListToolbar
                         onAddClicked={handleAdd}
@@ -53,7 +55,8 @@ export default function RecipeListPage() {
                 </div>
                 {/*Content - List of recipe cards */}
                 <div className="w-full pt-4">
-          <div className="grid gap-6 grid-cols-[repeat(auto-fit,minmax(220px,auto))] max-w-6xl mx-auto justify-center">
+                    <div
+                        className="grid gap-6 grid-cols-[repeat(auto-fit,minmax(220px,auto))] max-w-6xl mx-auto justify-center">
                         {recipeList.map((recipe) => (
                             <RecipeListItem
                                 key={recipe.id}

frontend/src/index.css

@@ -24,6 +24,19 @@ body {
     min-height: 100vh;
 }
 
+/* Hide number input spinners (Chrome, Safari, Edge, Opera) */
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+/* Hide number input spinners in Firefox */
+input[type="number"] {
+    -moz-appearance: textfield;
+}
+
+
 /*a {
   font-weight: 500;
   color: #646cff;