fix: correction layout matrice routing (affichage en grille)

- Ajout grid-template-columns dynamique basé sur nombre groupes
- Suppression display:contents qui causait le bug
- Utilisation de fragments React au lieu de div wrapper
- Matrice 1: 120px + N colonnes pour les groupes
- Matrice 2: 120px + 8 colonnes pour les outputs
- Nettoyage CSS classes inutilisées

client/src/components/AudioRoutingMatrix.css

@@ -41,20 +41,18 @@
 }
 
 .routing-matrix {
-  display: grid;
+  display: inline-grid;
   gap: 2px;
   background: var(--color-border);
   border: 1px solid var(--color-border);
   border-radius: 8px;
-  overflow: hidden;
+  overflow-x: auto;
+  max-width: 100%;
 }
 
 .matrix-corner {
   background: var(--color-surface-hover);
-}
-
-.matrix-header-row {
-  display: contents;
+  min-height: 50px;
 }
 
 .matrix-header-cell {
@@ -72,10 +70,6 @@
   hyphens: auto;
 }
 
-.matrix-row {
-  display: contents;
-}
-
 .matrix-label-cell {
   background: var(--color-surface-hover);
   padding: var(--spacing-sm);

client/src/components/AudioRoutingMatrix.jsx

@@ -119,20 +119,18 @@ function AudioRoutingMatrix({ groups, channelNames }) {
           Sélectionnez quels inputs audio alimentent chaque groupe
         </p>
 
-        <div className="routing-matrix">
+        <div className="routing-matrix" style={{gridTemplateColumns: `120px repeat(${groups.length}, minmax(60px, 1fr))`}}>
           <div className="matrix-corner"></div>
 
-          <div className="matrix-header-row">
-            {groups.map(group => (
-              <div key={group.id} className="matrix-header-cell">
-                {group.name}
-              </div>
-            ))}
-          </div>
+          {groups.map(group => (
+            <div key={group.id} className="matrix-header-cell">
+              {group.name}
+            </div>
+          ))}
 
           {Array.from({length: 8}, (_, i) => (
-            <div key={`input-row-${i}`} className="matrix-row">
-              <div className="matrix-label-cell">
+            <>
+              <div key={`input-label-${i}`} className="matrix-label-cell">
                 {getChannelName('inputs', i)}
               </div>
 
@@ -145,7 +143,7 @@ function AudioRoutingMatrix({ groups, channelNames }) {
                   {isInputRoutedToGroup(String(i), group.id) && <span className="checkmark">✓</span>}
                 </div>
               ))}
-            </div>
+            </>
           ))}
         </div>
       </div>
@@ -156,20 +154,18 @@ function AudioRoutingMatrix({ groups, channelNames }) {
           Sélectionnez vers quels outputs chaque groupe envoie son audio
         </p>
 
-        <div className="routing-matrix">
+        <div className="routing-matrix" style={{gridTemplateColumns: '120px repeat(8, minmax(60px, 1fr))'}}>
           <div className="matrix-corner"></div>
 
-          <div className="matrix-header-row">
-            {Array.from({length: 8}, (_, i) => (
-              <div key={`output-header-${i}`} className="matrix-header-cell">
-                {getChannelName('outputs', i)}
-              </div>
-            ))}
-          </div>
+          {Array.from({length: 8}, (_, i) => (
+            <div key={`output-header-${i}`} className="matrix-header-cell">
+              {getChannelName('outputs', i)}
+            </div>
+          ))}
 
           {groups.map(group => (
-            <div key={`group-row-${group.id}`} className="matrix-row">
-              <div className="matrix-label-cell">
+            <>
+              <div key={`group-label-${group.id}`} className="matrix-label-cell">
                 {group.name}
               </div>
 
@@ -182,7 +178,7 @@ function AudioRoutingMatrix({ groups, channelNames }) {
                   {isGroupRoutedToOutput(group.id, String(i)) && <span className="checkmark">✓</span>}
                 </div>
               ))}
-            </div>
+            </>
           ))}
         </div>
       </div>