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>

app/page.tsx

@@ -6,7 +6,8 @@ import WerteList from '@/components/WerteList';
 import { WerteEntry } from '@/types/werte';
 import TabLayout from '@/components/TabLayout';
 
-const MAX_ENTRIES = 5
+const MAX_ENTRIES = 15;
+const MOBILE_ENTRIES = 5;
 
 export default function Home() {
   const [entries, setEntries] = useState<WerteEntry[]>([]);
@@ -87,11 +88,13 @@ export default function Home() {
         </div>
 
         <div className="bg-white border border-black rounded-lg shadow-md p-6">
-          <h2 className="text-xl font-semibold mb-4">Letzte {MAX_ENTRIES} Einträge</h2>
+          <h2 className="text-xl font-semibold mb-4">
+            Letzte <span className="md:hidden">{MOBILE_ENTRIES}</span><span className="hidden md:inline">{MAX_ENTRIES}</span> Einträge
+          </h2>
           {isLoading ? (
             <div className="text-center py-4">Lade Daten...</div>
           ) : (
-            <WerteList entries={entries} onDelete={handleDelete} onEdit={handleEdit} />
+            <WerteList entries={entries} onDelete={handleDelete} onEdit={handleEdit} mobileLimit={MOBILE_ENTRIES} />
           )}
         </div>
 

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}

components/WerteList.tsx

@@ -7,6 +7,7 @@ interface WerteListProps {
   entries: WerteEntry[];
   onDelete?: (id: number) => void;
   onEdit?: (entry: WerteEntry) => void;
+  mobileLimit?: number;
 }
 
 function ConfirmDialog({
@@ -39,7 +40,7 @@ function ConfirmDialog({
   );
 }
 
-export default function WerteList({ entries, onDelete, onEdit }: WerteListProps) {
+export default function WerteList({ entries, onDelete, onEdit, mobileLimit }: WerteListProps) {
   const [confirmId, setConfirmId] = useState<number | null>(null);
   const formatValue = (value: number | string | null | undefined) => {
     if (value === null || value === undefined || value === '' || value === '0' || value === '0.0') {
@@ -170,7 +171,7 @@ export default function WerteList({ entries, onDelete, onEdit }: WerteListProps)
       </div>
 
       <div className="md:hidden flex flex-col gap-2">
-        {entries.map((entry, index) => (
+        {(mobileLimit ? entries.slice(0, mobileLimit) : entries).map((entry, index) => (
           <div
             key={entry.ID}
             className={`border border-gray-300 rounded-lg p-2 ${index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}`}