Lars/mitai-jinkendo
1
0
Fork 0
Code Issues 33 Pull Requests Actions Packages Projects Releases 5 Wiki Activity

feat: Update settings page layout with improved field structure and accessibility
All checks were successful
Deploy Development / deploy (push) Successful in 47s
Details
Build Test / lint-backend (push) Successful in 0s
Details
Build Test / build-frontend (push) Successful in 14s
Details

Browse Source
This commit is contained in:
Lars 2026-04-05 11:19:35 +02:00
parent c63ec5f700
commit 430a928df6
2 changed files with 38 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/src/app.css
View File

@ -87,6 +87,32 @@ body { font-family: var(--font); background: var(--bg); color: var(--text1); -we
}
.form-input:focus { outline: none; border-color: var(--accent); }
.form-unit { font-size: 12px; color: var(--text3); width: 24px; }
/* Einstellungen Profil: Label als Überschrift oben, volle Breite, linksbündig */
.settings-page__field {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 8px;
padding: 12px 0;
border-bottom: 1px solid var(--border);
text-align: left;
}
.settings-page__field-label {
display: block;
font-size: 14px;
font-weight: 600;
color: var(--text1);
text-align: left;
line-height: 1.3;
}
.settings-page__field .form-input {
width: 100%;
max-width: 100%;
min-width: 0;
text-align: left;
box-sizing: border-box;
}
.form-select {
font-family: var(--font); font-size: 13px; color: var(--text1);
background: var(--surface2); border: 1.5px solid var(--border2);

18
frontend/src/pages/SettingsPage.jsx
View File

@ -258,27 +258,33 @@ export default function SettingsPage() {
</div>
)}
<div className="form-row">
<label className="form-label">Name</label>
<div className="settings-page__field">
<label className="settings-page__field-label" htmlFor="settings-profile-name">
Name
</label>
<input
id="settings-profile-name"
type="text"
className="form-input"
value={form.name}
onChange={(e) => setF('name', e.target.value)}
autoComplete="name"
/>
<span className="form-unit" />
</div>
<div className="form-row">
<label className="form-label">E-Mail</label>
<div className="settings-page__field">
<label className="settings-page__field-label" htmlFor="settings-profile-email">
E-Mail
</label>
<input
id="settings-profile-email"
type="email"
className="form-input"
placeholder="für Login, Recovery & Zusammenfassungen"
value={form.email}
onChange={(e) => setF('email', e.target.value)}
autoComplete="email"
/>
<span className="form-unit" />
</div>
{activeProfile?.email && activeProfile?.email_verified === false && (
<div