Eingaben und Liste weiter feinjustieren

Desktop zeigt weiterhin 15 Einträge, Handy/Tablet-Hochformat nur die
letzten 5 (responsive Anzeige + separater Ladezustand). Datum, Zeit
und Zucker schmaler gemacht, damit sie bei Tablet-Hochformat nicht
überlappen und beim schmalen Smartphone nicht aus dem Rahmen ragen;
Zucker-Feldhöhe an die übrigen Felder angeglichen.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

components/WerteForm.tsx

@@ -144,6 +144,12 @@ export default function WerteForm({ onSuccess, selectedEntry }: WerteFormProps)
 
   const inputClass = "w-full min-w-0 px-2 py-1 text-sm rounded border-2 border-gray-400 bg-white focus:border-blue-500 focus:outline-none";
   const numberInputClass = `${inputClass} [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none`;
+  // Datum/Zeit/Zucker: schmaler, damit sie bei Tablet-Hochformat (sm:) und schmalem Smartphone nicht überlappen bzw. aus dem Rahmen ragen.
+  // py-1.5 statt py-1 gleicht die geringere Zeilenhöhe von text-xs aus, damit die Felder gleich hoch wie die übrigen (text-sm) Felder bleiben.
+  const compactInputClass = "w-full min-w-0 px-1 py-1.5 text-xs rounded border-2 border-gray-400 bg-white focus:border-blue-500 focus:outline-none";
+  const compactNumberInputClass = `${compactInputClass} [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none`;
+  // Datum/Zeit: nochmal 10px schmaler als die übrigen kompakten Felder.
+  const dateTimeInputClass = "w-[calc(100%-10px)] min-w-0 px-1 py-1.5 text-xs rounded border-2 border-gray-400 bg-white focus:border-blue-500 focus:outline-none";
 
   return (
     <div className="bg-[#CCCCFF] border border-black p-3 sm:p-6 rounded-lg mb-6">
@@ -161,7 +167,7 @@ export default function WerteForm({ onSuccess, selectedEntry }: WerteFormProps)
             </label>
             <input
               type="date"
-              className={inputClass}
+              className={dateTimeInputClass}
               value={formData.Datum}
               onChange={(e) => handleDateChange(e.target.value)}
               required
@@ -174,7 +180,7 @@ export default function WerteForm({ onSuccess, selectedEntry }: WerteFormProps)
             </label>
             <input
               type="time"
-              className={inputClass}
+              className={dateTimeInputClass}
               value={formData.Zeit}
               onChange={(e) => setFormData(prev => ({ ...prev, Zeit: e.target.value }))}
               required
@@ -187,7 +193,7 @@ export default function WerteForm({ onSuccess, selectedEntry }: WerteFormProps)
             </label>
             <input
               type="number"
-              className={numberInputClass}
+              className={compactNumberInputClass}
               min={0}
               max={999}
               value={formData.Zucker}