From 259013eafe3fb749e799c40b255de242e2cc2103 Mon Sep 17 00:00:00 2001
From: Guido <guido.schmit03@gmail.com>
Date: Sat, 22 Aug 2026 19:51:45 +0200
Subject: [PATCH] fix: Marken-Formular in der schmalen Spalte lesbar

Die Karte steht in einer schmalen Spalte; die waagerechte Zeile quetschte
Beschriftung und Feld ineinander, sodass "Name des Geraets" ueber
"Standardkonto" lag. Jetzt gestapelt wie die uebrigen Formulare der Seite.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 web/src/pages/settings/Geraetemarken.jsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/web/src/pages/settings/Geraetemarken.jsx b/web/src/pages/settings/Geraetemarken.jsx
index 4c6e908..3440588 100644
--- a/web/src/pages/settings/Geraetemarken.jsx
+++ b/web/src/pages/settings/Geraetemarken.jsx
@@ -96,13 +96,15 @@ export default function Geraetemarken() {
       </div>
       <p className="muted small">{t("tokens.intro")}</p>
 
-      <form className="row" style={{ gap: "var(--sp-2)", alignItems: "flex-end" }} onSubmit={anlegen}>
-        <label className="grow">
+      {/* Gestapelt statt nebeneinander: Die Karte steht in einer schmalen
+          Spalte, waagerecht quetschen sich Beschriftung und Feld ineinander. */}
+      <form onSubmit={anlegen}>
+        <label className="field">
           <span>{t("tokens.name")}</span>
           <input value={name} placeholder={t("tokens.namePlaceholder")}
                  onChange={(e) => setName(e.target.value)} />
         </label>
-        <label>
+        <label className="field">
           <span>{t("tokens.defaultAccount")}</span>
           <select value={konto} onChange={(e) => setKonto(e.target.value)}>
             {konten.map((k) => <option key={k.id} value={k.id}>{k.name}</option>)}