Commit e2204e9c authored by Kourser's avatar Kourser
Browse files

Téléphone : l'en-tête joueur se chevauchait, la console débordait 

Espace joueur — la barre est en « space-between » sans repli : à 375 px,
le bouton « Mon profil » passait par-dessus le nom de l'exercice. Cet
espace est installable sur l'écran d'accueil, ce format compte. Les deux
blocs s'empilent, et le nom de l'exercice se tronque plutôt que de
pousser les boutons hors écran.

Console — le tableau des exercices (533 px) et la barre d'en-tête
(421 px) élargissaient la PAGE ENTIÈRE à 577 px : on faisait glisser
tout l'écran, menu compris, pour lire une colonne. « min-width: 0 »
empêche le contenu d'étirer la colonne de grille — sans lui, une piste
« 1fr » prend la taille de son contenu et « overflow » n'a plus rien à
contenir. L'en-tête se replie, le tableau défile chez lui.

Co-Authored-By: default avatarClaude Opus 5 <noreply@anthropic.com>
parent 3a56ae23

apps/web/src/styles.css

+74 −0
Changes for apps/web/src/styles.css: 74 added lines, 0 removed lines.
Original line number Diff line number Diff line
@@ -445,6 +445,42 @@ textarea:focus { 
  .side-nav {

    flex-direction: row;

  }



  /*

   * Les tableaux de la console débordent la page au lieu de défiler chez eux.

   *

   * Sur un téléphone, le tableau des exercices mesure 533 px et la barre d'en-tête

   * 421 : la PAGE ENTIÈRE se décalait horizontalement, en-tête et menu compris,

   * ce qui donne cette impression de mise en page cassée où l'on fait glisser

   * tout l'écran pour lire une colonne.

   *

   * `min-width: 0` empêche le contenu d'élargir la colonne de grille — sans lui,

   * une piste `1fr` s'étire à la taille de son contenu, et `overflow` n'a plus

   * rien à contenir.

   */

  .admin-main {

    min-width: 0;

  }



  .topbar {

    flex-wrap: wrap;

    gap: 8px;

  }



  /*

   * Le bloc de droite — langues, son, thème, identité, déconnexion — mesure 421 px

   * d'une seule pièce. Sans repli, c'est lui qui poussait encore la page à 444.

   */

  .topbar-right {

    flex-wrap: wrap;

    justify-content: flex-end;

    gap: 8px;

    row-gap: 6px;

  }



  .panel {

    overflow-x: auto;

  }

}



/* ---- App layout (dashboard, legacy) ---- */
@@ -1063,6 +1099,44 @@ textarea { 
  }

}



/*

 * Barre de l'espace joueur sur telephone.

 *

 * Elle est en `space-between` sans repli : a 375 px, le bloc de gauche — nom,

 * fonction, bouton « Mon profil » — et celui de droite — nom de l'exercice et

 * boutons — se chevauchaient, le bouton passant par-dessus le titre. L'espace

 * joueur est pourtant installable sur l'ecran d'accueil : ce format compte.

 *

 * Le repli met les deux blocs l'un sous l'autre, et le nom de l'exercice se

 * tronque plutot que de pousser les boutons hors de l'ecran.

 */

@media (max-width: 640px) {

  .player-bar {

    flex-wrap: wrap;

    gap: 8px 12px;

    padding: 10px 12px;

  }



  .player-bar-right {

    width: 100%;

    justify-content: space-between;

    gap: 8px;

  }



  .player-bar-right > .muted {

    flex: 1;

    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

  }



  /* Le rail des dossiers laisse la place a la liste, plus utile que lui. */

  .mailapp {

    grid-template-columns: 132px 1fr;

  }

}



/* Rail des dossiers (colonne de gauche). */

.mail-folders {

  border-right: 1px solid var(--border);