Optimize servings control

frontend/src/App.css

@@ -1,5 +1,6 @@
 /* Import Tailwind layers */
 @import "tailwindcss";
+
 @tailwind utilities;
 
 /* Custom recipe app styles */
@@ -11,10 +12,14 @@
     }
 
     .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 */
+    .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;
     }
@@ -47,27 +52,35 @@
     .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 {
         @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 {
         @apply bg-gray-600  hover:bg-gray-800;
     }
+
     .dark-button-text {
         @apply text-white;
     }
+
     .transparent-button-bg {
         @apply bg-transparent hover:bg-transparent;
     }
+
     .transparent-button-text {
         @apply text-gray-600;
     }

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

@@ -36,14 +36,16 @@ export default function RecipeListPage() {
         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;