@zevra/ui 0.34.0 → 0.35.0

package/src/navigation.css

@@ -1359,9 +1359,40 @@ a.zv-menu__item:hover {
     display: none;
   }
 
-  /* Les deux panneaux sont plafonnés à l'écran, comme le menu et le
-   * popover : au bord droit d'un téléphone, un panneau de 300px pousserait
-   * la page en défilement horizontal. */
+  /* ⚠️ ANCRÉS À L'ÉCRAN, plus à leur déclencheur. Hors média ils sont en
+   * `right: 0`, donc calés sur le bord droit du BOUTON — or le lanceur n'est
+   * pas au bord de l'écran : le compte et le burger le suivent. Le panneau
+   * avait donc la bonne largeur et la mauvaise place. Mesuré à 375px sur
+   * mcp-factory : largeur 343, bord gauche à −65 ; deux tuiles sur cinq
+   * coupées, et la partie hors écran inatteignable.
+   *
+   * Et c'est SILENCIEUX : un débordement par la gauche n'engendre aucun
+   * défilement horizontal, le navigateur le rogne sans rien dire.
+   *
+   * COMMENT : le déclencheur cesse d'être le repère (`position: static`), et
+   * le panneau se résout alors contre `.zv-nav`, qui est déjà positionnée et
+   * qui fait la largeur de la barre. `top: 100%` tombe donc sous la barre, et
+   * `left`/`right` la bordent. Largeur pleine, marges de 16 : le motif que
+   * tout le monde connaît sur téléphone, et qui ne dépend plus de ce qui est
+   * posé à droite du déclencheur.
+   *
+   * ⚠️ Poser `left`/`right` SANS neutraliser le `relative` du déclencheur ne
+   * marche pas — je l'ai écrit ainsi d'abord : les offsets se résolvaient
+   * contre le bouton, large de 40px, et le panneau tombait à 8px de large.
+   * C'est scopé à `.zv-nav` : un lanceur posé ailleurs garde son ancrage. */
+  .zv-nav .zv-lanceur,
+  .zv-nav .zv-compte {
+    position: static;
+  }
+
+  .zv-nav .zv-lanceur__panneau,
+  .zv-nav .zv-compte__panneau {
+    left: 16px;
+    right: 16px;
+  }
+
+  /* Le plafond devient redondant pour ces deux-là — il ne coûte rien et
+   * protège un panneau qu'on poserait ailleurs. */
   .zv-lanceur__panneau .zv-menu,
   .zv-compte__panneau .zv-menu {
     max-width: calc(100vw - 32px);