dschlueter/my_voice_assistant_v3_jamulix
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat(ui): "Neues Gespräch" in der Kopfzeile bei knappem Platz ausblenden

Browse source 
Das Kopfzeilen-Symbol „Neues Gespräch" wird unterhalb von 384px Viewport-Breite
ausgeblendet (hidden min-[384px]:grid), damit auf sehr schmalen Phones (z.B.
iPhone SE 375px, kleine Androids ≤360px) der Titel Platz behält. Auf gängigen
Phones (iPhone 12/13/14 390px, Pixel 393px) bleibt es sichtbar.

Kein Funktionsverlust: das Menü enthält „Neues Gespräch" dauerhaft als Rückfall
— es muss also nichts dynamisch verschoben werden, nur das Kopfzeilen-Symbol
ausgeblendet. SOS bleibt auf allen Breiten sichtbar. Reine CSS-Lösung (kein JS,
kein Flackern). Grenze empirisch eingemessen (voller Titel passt mit Symbol ab
~420px; 384px hält ihn auf den meisten Geräten sichtbar bei mild gekürztem Titel).

Verifiziert via Headless-Chrome über mehrere Breiten.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Dieter Schlüter 2026-06-26 16:35:23 +02:00
commit f3dbd434b0
1 changed files with 4 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

5
app/web/index.html
View file

@ -243,8 +243,11 @@
<option value="ru">🇷🇺 RU</option>
<option value="zh">🇨🇳 ZH</option>
</select>
<!-- „Neues Gespräch" in der Kopfzeile: ab 384px Viewport sichtbar, darunter
(sehr schmale Phones, z.B. iPhone SE) ausgeblendet, damit der Titel Platz
behält. Das Menü enthält „Neues Gespräch" dauerhaft als Rückfall. -->
<button id="new-chat-top" type="button" title="Neues Gespräch" aria-label="Neues Gespräch"
class="shrink-0 h-9 w-9 grid place-items-center rounded-lg border border-slate-300 dark:border-slate-600 hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors">
class="shrink-0 h-9 w-9 hidden min-[384px]:grid place-items-center rounded-lg border border-slate-300 dark:border-slate-600 hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" class="w-5 h-5"><path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"/></svg>
</button>
<button id="menu-toggle" title="Menü" aria-label="Menü"