Tables responsives : wrapper `overflow-x` systématique

English summary: On mobile, site tables (tokens, components, ADRs) compressed to the point that CSS custom property names broke letter-by-letter. This ADR wraps every table in a .table-wrap div (overflow-x: auto + min-width: 420px on the table), applied systematically via a post-processing string replace in layout() so no individual build*() function needs manual wrapping. Tables generated by parseMd() (ADRs, guidelines) get the same treatment.

>

*The original French version follows below — preserved unaltered as the historical record.*

Contexte

Sur mobile, les tables du site (tokens, composants, ADRs, typographie…) se compressaient dans la largeur disponible. Le comportement observé : les cellules <td> contenant des noms de tokens CSS (--agtc-semantic-color-action-primary, etc.) se coupaient lettre par lettre verticalement, rendant la table illisible.

Cause : table { width: 100% } sans largeur minimale ni mécanisme d'overflow — la table s'écrasait dans la largeur du viewport plutôt que de scroller.

Décision

1. Wrapper .table-wrap

Toutes les tables sont enveloppées dans un <div class="table-wrap"> avec :

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* scroll inertiel iOS */
  margin: 16px 0 28px;
}
table {
  width: 100%;
  min-width: 420px; /* empêche la compression sous le seuil lisible */
  margin: 0;        /* margin portée par .table-wrap */
}

2. Application systématique via post-processing dans layout()

Plutôt que d'envelopper chaque table manuellement dans les ~30 fonctions build*(), un String.replace() est appliqué sur le HTML final généré par layout() :

• <table …> → <div class="table-wrap"><table …>
• </table> (non suivi de </div>) → </table></div>

Les tables déjà enveloppées (ex. celles issues de parseMd()) ne sont pas doublées grâce au negative lookbehind sur table-wrap">

3. parseMd() enveloppe également ses tables

Les tables générées depuis le Markdown (ADRs, guidelines) passent aussi dans .table-wrap depuis parseMd() — cohérence garantie quelle que soit la source.

Alternatives rejetées