admin/logbuch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reduce form field height to show list entries below the form

Browse Source 
py-3 → py-2 on all inputs, selects, buttons; space-y-5 → space-y-3;
textarea rows 3 → 2; label margin reduced.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Reinhard X. Fürst
2026-04-27 20:23:19 +02:00
parent e7f2266a35
commit aea5cc08d6
4 changed files with 17 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/BeoSelector.tsx
View File

@@ -37,7 +37,7 @@ export default function BeoSelector({ selected, onChange }: Props) {
{selected.map((b) => ( {selected.map((b) => (
<span <span
key={b.ID} key={b.ID}
className="inline-flex items-center gap-2 bg-blue-100 text-blue-800 text-base px-3 py-2 rounded-full" className="inline-flex items-center gap-2 bg-blue-100 text-blue-800 text-base px-3 py-1.5 rounded-full"
> >
{b.Kuerzel} — {b.Name} {b.Kuerzel} — {b.Name}
<button <button

6
components/CustomSelect.tsx
View File

@@ -39,7 +39,7 @@ export default function CustomSelect({ options, placeholder, onChange, keepOpen
<button <button
type="button" type="button"
onClick={() => setOpen((v) => !v)} onClick={() => setOpen((v) => !v)}
className="w-full flex items-center justify-between px-4 py-3 border-2 border-gray-400 rounded-lg bg-white text-base text-gray-700 focus:border-blue-500 focus:outline-none" className="w-full flex items-center justify-between px-4 py-2 border-2 border-gray-400 rounded-lg bg-white text-base text-gray-700 focus:border-blue-500 focus:outline-none"
> >
<span>{placeholder}</span> <span>{placeholder}</span>
<svg <svg
@@ -58,7 +58,7 @@ export default function CustomSelect({ options, placeholder, onChange, keepOpen
type="button" type="button"
disabled={opt.disabled} disabled={opt.disabled}
onClick={() => select(opt.value)} onClick={() => select(opt.value)}
className="w-full text-left px-4 py-3 text-base hover:bg-blue-50 active:bg-blue-100 border-b border-gray-100 last:border-0 disabled:text-gray-400 disabled:bg-gray-50" className="w-full text-left px-4 py-2 text-base hover:bg-blue-50 active:bg-blue-100 border-b border-gray-100 last:border-0 disabled:text-gray-400 disabled:bg-gray-50"
> >
{opt.label} {opt.label}
</button> </button>
@@ -67,7 +67,7 @@ export default function CustomSelect({ options, placeholder, onChange, keepOpen
<button <button
type="button" type="button"
onClick={() => setOpen(false)} onClick={() => setOpen(false)}
className="w-full px-4 py-3 text-base font-medium text-center bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-b-lg border-t-2 border-gray-300" className="w-full px-4 py-2 text-base font-medium text-center bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-b-lg border-t-2 border-gray-300"
> >
Fertig Fertig
</button> </button>

16
components/LogbuchForm.tsx
View File

@@ -156,11 +156,11 @@ export default function LogbuchForm({ kuppel, currentUserBeo, editEntry, onSaved
} }
} }
const inputCls = 'w-full px-3 py-3 border-2 border-gray-400 rounded-lg bg-white text-base focus:border-blue-500 focus:outline-none'; const inputCls = 'w-full px-3 py-2 border-2 border-gray-400 rounded-lg bg-white text-base focus:border-blue-500 focus:outline-none';
const labelCls = 'block text-sm font-medium text-gray-700 mb-1'; const labelCls = 'block text-sm font-medium text-gray-700 mb-0.5';
return ( return (
<form onSubmit={handleSubmit} className="space-y-5 max-w-2xl"> <form onSubmit={handleSubmit} className="space-y-3 max-w-2xl">
{/* Art der Führung — volle Breite */} {/* Art der Führung — volle Breite */}
<div> <div>
@@ -205,7 +205,7 @@ export default function LogbuchForm({ kuppel, currentUserBeo, editEntry, onSaved
onChange={(e) => setBesucher(parseInt(e.target.value) || 0)} onChange={(e) => setBesucher(parseInt(e.target.value) || 0)}
min={0} min={0}
max={9999} max={9999}
className="w-32 px-3 py-3 border-2 border-gray-400 rounded-lg bg-white text-base focus:border-blue-500 focus:outline-none" className="w-32 px-3 py-2 border-2 border-gray-400 rounded-lg bg-white text-base focus:border-blue-500 focus:outline-none"
/> />
</div>} </div>}
@@ -241,8 +241,8 @@ export default function LogbuchForm({ kuppel, currentUserBeo, editEntry, onSaved
<textarea <textarea
value={bemerkungen} value={bemerkungen}
onChange={(e) => setBemerkungen(e.target.value.slice(0, 500))} onChange={(e) => setBemerkungen(e.target.value.slice(0, 500))}
rows={3} rows={2}
className="w-full px-3 py-3 border-2 border-gray-400 rounded-lg bg-white text-base focus:border-blue-500 focus:outline-none resize-y" className="w-full px-3 py-2 border-2 border-gray-400 rounded-lg bg-white text-base focus:border-blue-500 focus:outline-none resize-y"
placeholder="Freier Text (max. 500 Zeichen)" placeholder="Freier Text (max. 500 Zeichen)"
/> />
</div> </div>
@@ -275,7 +275,7 @@ export default function LogbuchForm({ kuppel, currentUserBeo, editEntry, onSaved
<button <button
type="submit" type="submit"
disabled={saving} disabled={saving}
className="w-full sm:w-auto px-6 py-3 bg-[#85B7D7] hover:bg-[#6a9fc5] text-black font-medium rounded-lg transition-colors disabled:opacity-50 text-base" className="w-full sm:w-auto px-6 py-2 bg-[#85B7D7] hover:bg-[#6a9fc5] text-black font-medium rounded-lg transition-colors disabled:opacity-50 text-base"
> >
{saving ? 'Speichern...' : editEntry ? 'Änderungen speichern' : 'Eintrag speichern'} {saving ? 'Speichern...' : editEntry ? 'Änderungen speichern' : 'Eintrag speichern'}
</button> </button>
@@ -283,7 +283,7 @@ export default function LogbuchForm({ kuppel, currentUserBeo, editEntry, onSaved
<button <button
type="button" type="button"
onClick={onSaved} onClick={onSaved}
className="w-full sm:w-auto px-6 py-3 bg-gray-200 hover:bg-gray-300 text-gray-700 font-medium rounded-lg transition-colors text-base" className="w-full sm:w-auto px-6 py-2 bg-gray-200 hover:bg-gray-300 text-gray-700 font-medium rounded-lg transition-colors text-base"
> >
Abbrechen Abbrechen
</button> </button>

10
components/ObjektSelector.tsx
View File

@@ -49,7 +49,7 @@ export default function ObjektSelector({ selected, onChange }: Props) {
{selected.map((o) => ( {selected.map((o) => (
<span <span
key={o.Name} key={o.Name}
className="inline-flex items-center gap-2 bg-green-100 text-green-800 text-base px-3 py-2 rounded-full" className="inline-flex items-center gap-2 bg-green-100 text-green-800 text-base px-3 py-1.5 rounded-full"
> >
{o.Name} {o.Name}
<button <button
@@ -78,7 +78,7 @@ export default function ObjektSelector({ selected, onChange }: Props) {
<button <button
type="button" type="button"
onClick={() => setShowNewInput((v) => !v)} onClick={() => setShowNewInput((v) => !v)}
className="px-4 py-3 border-2 border-gray-400 rounded-lg bg-white text-base text-gray-700 hover:bg-gray-50 whitespace-nowrap" className="px-4 py-2 border-2 border-gray-400 rounded-lg bg-white text-base text-gray-700 hover:bg-gray-50 whitespace-nowrap"
> >
+ Neu + Neu
</button> </button>
@@ -92,20 +92,20 @@ export default function ObjektSelector({ selected, onChange }: Props) {
onChange={(e) => setNewName(e.target.value)} onChange={(e) => setNewName(e.target.value)}
onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); addNew(); } }} onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); addNew(); } }}
placeholder="Objektname eingeben" placeholder="Objektname eingeben"
className="flex-1 px-3 py-3 border-2 border-gray-400 rounded-lg bg-white text-base focus:border-blue-500 focus:outline-none" className="flex-1 px-3 py-2 border-2 border-gray-400 rounded-lg bg-white text-base focus:border-blue-500 focus:outline-none"
autoFocus autoFocus
/> />
<button <button
type="button" type="button"
onClick={addNew} onClick={addNew}
className="px-4 py-3 bg-green-600 text-white text-base rounded-lg hover:bg-green-700" className="px-4 py-2 bg-green-600 text-white text-base rounded-lg hover:bg-green-700"
> >
OK OK
</button> </button>
<button <button
type="button" type="button"
onClick={() => { setShowNewInput(false); setNewName(''); }} onClick={() => { setShowNewInput(false); setNewName(''); }}
className="px-4 py-3 bg-gray-200 text-gray-700 text-base rounded-lg hover:bg-gray-300" className="px-4 py-2 bg-gray-200 text-gray-700 text-base rounded-lg hover:bg-gray-300"
> >
✕ ✕
</button> </button>