From 64821a8538b2df27fe668e955fdba232b3cccbf5 Mon Sep 17 00:00:00 2001 From: Bruno Charest Date: Sat, 3 Oct 2026 09:56:22 -0400 Subject: [PATCH] =?UTF-8?q?fix(shorts):=20tiroir=20=E2=93=98=20sous=20le?= =?UTF-8?q?=20header,=20coins=20arrondis,=20ligne=20fournisseur=20visible?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Mobile : le panneau d'informations démarre à `var(--header-offset)` (bas du header fixe z-50) au lieu de `top: 0` — ses 56 premiers px passaient DERRIÈRE le header (bouton Fermer compris). Même motif que le drawer latéral de app.component.html ; `md:static` neutralise ce top au bureau. - Le cadre vidéo est arrondi partout (`rounded-2xl`, plus `rounded-none` sous 768 px). - La ligne de couleur du fournisseur était invisible sur /shorts : l'iframe positionnée peint par-dessus l'outline du cadre. Redessinée en overlay `.shorts-frame[data-video-provider]::after` (bord 1 px `var(--prov)`, `border-radius: inherit`, z-index 5 sous le chrome, pointer-events: none). Vérifié au navigateur (harnais Playwright local) en mobile 390x844 ET desktop 1280x900 : gap tiroir/header, coins, couleur calculée du ::after, et avant/après sur l'instance de test locale. --- index.css | 13 +++++++++++++ src/components/shorts/watch-short.component.html | 7 ++++++- 2 files changed, 19 insertions(+), 1 deletion(-) diff --git a/index.css b/index.css index 61728dd..ae11cf9 100644 --- a/index.css +++ b/index.css @@ -740,6 +740,19 @@ body { `outline` plutôt que `border` : zéro effet sur la boîte (les cadres sont dimensionnés en aspect-ratio) et le rayon suit automatiquement. */ [data-video-provider] { outline: 1px solid var(--prov, transparent); outline-offset: -1px; } +/* /shorts : le cadre contient une iframe positionnée, qui peint PAR-DESSUS + l'outline du parent → la ligne fournisseur y est invisible. On la + redessine en overlay au-dessus de l'iframe (z-index 5 : sous le chrome + du cadre, z-10/z-20, et `pointer-events: none` laisse passer les gestes). */ +.shorts-frame[data-video-provider]::after { + content: ""; + position: absolute; + inset: 0; + border: 1px solid var(--prov, transparent); + border-radius: inherit; + pointer-events: none; + z-index: 5; +} [data-video-provider="youtube"], [data-video-provider="yt"] { --prov: #dc2626; } [data-video-provider="dailymotion"], diff --git a/src/components/shorts/watch-short.component.html b/src/components/shorts/watch-short.component.html index 2586b87..b619c6e 100644 --- a/src/components/shorts/watch-short.component.html +++ b/src/components/shorts/watch-short.component.html @@ -23,7 +23,7 @@
-
@if (embedUrl(); as url) { @@ -303,7 +303,12 @@ d'API commentaires). --> @if (infoOpen()) {
+