bruno
66f1da1d72
Le header était en grid-cols-[auto_1fr_auto] avec une barre de recherche non-wrappable (7 chips + input + 2 boutons, aucun min-w-0) : ~1000px de largeur intrinsèque dans un viewport de 375px. Toutes les routes débordaient horizontalement et les boutons Connexion/Inscription partaient hors écran. Socle - --header-h / --header-offset / --app-vh centralisent la métrique du header : supprime les top-16 codés en dur (channel-tabs était en top-0 et glissait sous le header au scroll). - Safe-area iOS, viewport-fit=cover, color-scheme/theme-color. - dvh partout (100vh > hauteur visible sur iOS), overflow-x: clip au lieu de hidden (hidden cassait silencieusement tous les sticky). - Cible tactile 44px sur pointeur grossier, skip link, focus-ring clavier, scroll-rail pour les tab strips. Header - Barre mobile (burger, logo, recherche, menu ⋮) + barre desktop inchangée. - Le menu ⋮ expose ce qui disparaissait : bande des thèmes, préférences, historique, favoris, téléchargements, thème, connexion/inscription. - Recherche en feuille sous le header avec focus automatique. - Échap / clic extérieur / navigation ferment les panneaux transitoires. Drawer - Partait à inset-y-0 : les 56 premiers px du menu étaient derrière le header. Descend sous le header, bouton fermer intégré, verrouille le scroll, se ferme à Échap. Barre de recherche - Chips masquées sous lg, remplacées par un bouton résumé qui ouvre le sélecteur de fournisseurs. Suggestions en dvh, menu Ctrl+K plein écran sur mobile. Pages - Shorts : cadre 9:16 contraint par dvh ET vw (il débordait en paysage), Préc./Suiv. qui étaient hors du conteneur height-capped. - Watch : barre d'actions qui wrappe, mode cinéma en opacity-0 group-hover donc invisible au doigt, thumbnails fluides, playsinline sur les iframes. - Historique, thèmes, chaîne, playlists, préférences, sessions : rails swipables, min-w-0, truncate, en-têtes qui wrappent. Vérifié : audit navigateur (CDP) sur 17 routes x 7 largeurs (320→1440), zéro débordement horizontal ; 19 tests d'interaction mobile ; suites de tests du dépôt vertes (api 40/40, transcript 27/27, search, suggest, playlists, preferences, subscriptions, highlight, telemetry).
42 lines
2.0 KiB
HTML
42 lines
2.0 KiB
HTML
<a href="#main-content" class="skip-link">{{ 'common.skipToContent' | t }}</a>
|
|
|
|
<div class="flex min-h-dvh flex-col">
|
|
<app-header (menuToggle)="toggleSidebar()" [drawerOpen]="sidebarOpen()"></app-header>
|
|
|
|
<!-- Reserve exactly the space the header actually occupies (safe-area aware). -->
|
|
<div [style.paddingTop]="'var(--header-offset)'">
|
|
<!-- Global Themes bar: shown on Home and Theme pages, sticky under header -->
|
|
@if (showThemesBar()) {
|
|
<app-themes-nav></app-themes-nav>
|
|
}
|
|
<div class="flex flex-1 relative">
|
|
<!-- Desktop sidebar -->
|
|
<aside class="hidden md:block border-r border-slate-800 sticky self-start transition-[width] duration-200"
|
|
[style.top]="'var(--header-offset)'"
|
|
[style.height]="'calc(var(--app-vh) - var(--header-offset))'"
|
|
[class.w-64]="!sidebarCollapsed()" [class.w-20]="sidebarCollapsed()">
|
|
<app-sidebar [collapsed]="sidebarCollapsed()"></app-sidebar>
|
|
</aside>
|
|
|
|
<!-- Mobile drawer: sits *below* the fixed header so nothing is hidden
|
|
behind it, and owns the remaining viewport height. -->
|
|
@if (sidebarOpen()) {
|
|
<div class="fixed inset-0 z-40 bg-black/60 md:hidden" (click)="closeSidebar()"></div>
|
|
}
|
|
<div class="fixed left-0 z-40 w-[min(18rem,85vw)] bg-slate-900 shadow-2xl transition-transform duration-200 ease-out md:hidden"
|
|
[style.top]="'var(--header-offset)'"
|
|
[style.height]="'calc(var(--app-vh) - var(--header-offset))'"
|
|
[style.paddingBottom]="'var(--safe-bottom)'"
|
|
[class.-translate-x-full]="!sidebarOpen()" [class.translate-x-0]="sidebarOpen()"
|
|
[attr.aria-hidden]="!sidebarOpen()"
|
|
[attr.inert]="!sidebarOpen() ? '' : null">
|
|
<app-sidebar [inDrawer]="true" (drawerClose)="closeSidebar()"></app-sidebar>
|
|
</div>
|
|
|
|
<main id="main-content" class="flex-1 min-w-0 overflow-x-hidden">
|
|
<router-outlet></router-outlet>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</div>
|