Docker/Aether
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): Kopfleiste auf dem Handy hatte 0px Abstand nach oben

Browse Source 
Die Regeln der schmalen Ansicht griffen nie: Ein Inline-Stil schlägt
jede Klassenregel, und `padding: '0 14px'` samt `paddingTop:
var(--safe-top)` stand genau dort. Gemessen kam padding-top als 0px an
statt als 8px - Titel und Nutzerbereich klebten am oberen Fensterrand.
Alle Abstaende stehen jetzt im CSS-Block, schmal 14px oben und 10px
unten.

Dazu das mitgelieferte App-Symbol neu gezeichnet: Die drei PNG lagen
als Graustufen vor, der indigo Verlauf war zu Schwarz eingeebnet. Die
Wolke besteht jetzt aus drei Kreisen und einem Rechteck dazwischen -
gerade Unterkante, keine Kerben in der Silhouette.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
marcandClaude Opus 5 committed 2026-08-24 14:26:49 +02:00
1 parent 9f44215698
commit 9a2f90c89b
6 files changed
+58 -12
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/components/PageHeader.tsx
+19 -9
View File
@@ -42,12 +42,14 @@ export default function PageHeader({ icon, title, meta, left, children }: Props)
const openSidebar = useSidebarToggle()
return (
<div className="aether-header" style={{
// Feste Höhe nur auf breiten Schirmen (siehe CSS unten). Auf dem Handy
// wächst die Leiste auf zwei Zeilen, statt ihren Inhalt zu verstecken.
padding: '0 14px',
// Statusleiste der installierten App. Die Kopfleiste ist jetzt die
// oberste Zeile der Anwendung – vorher lag darüber noch eine zweite.
paddingTop: 'var(--safe-top)',
// **Kein padding hier.** Die Abstände stehen samt und sonders im
// CSS-Block unten.
//
// Grund, gemessen: Ein Inline-Stil schlägt jede Klassenregel. Solange
// hier `padding: '0 14px'` und `paddingTop: 'var(--safe-top)'` standen,
// waren die Regeln der schmalen Ansicht wirkungslos – `padding-top`
// kam als 0px an statt als 8px, und die Titelzeile klebte am oberen
// Rand des Fensters. Im Browser fiel es auf, weil dort --safe-top 0 ist.
background: 'var(--color-surface)',
borderBottom: '1px solid var(--color-border)',
display: 'flex', alignItems: 'center', gap: 10,
@@ -146,7 +148,13 @@ export default function PageHeader({ icon, title, meta, left, children }: Props)
</div>
<style>{`
.aether-header { min-height: ${headerHeight - 1}px; }
/* Grundabstände. Oben kommt der Bereich der Statusleiste dazu –
in der installierten App ist die Kopfleiste die oberste Zeile. */
.aether-header {
min-height: ${headerHeight - 1}px;
padding: 0 14px;
padding-top: var(--safe-top);
}
/* Breit: erst die Bedienelemente der Ansicht, dann – durch eine
Trennlinie abgesetzt – der Nutzerbereich, ganz rechts. */
@@ -157,9 +165,11 @@ export default function PageHeader({ icon, title, meta, left, children }: Props)
}
@media not all and ${wideEnough} {
/* Schmal braucht die Zeile echte Luft: Ohne sie stoßen Titel und
Nutzerbereich direkt an die Adressleiste des Browsers. */
.aether-header {
padding-top: calc(8px + var(--safe-top));
padding-bottom: 8px;
padding-top: calc(14px + var(--safe-top));
padding-bottom: 10px;
}
/* Schmal: Nutzerbereich noch in der Titelzeile ganz rechts, die
Bedienelemente darunter über die volle Breite.