Améliorations - table des résultats défile horizontalement avec la première colonne fixe

client/src/components/LiveResults/LiveResults.tsx

@@ -242,16 +242,11 @@ const LiveResults: React.FC<LiveResultsProps> = ({ socket, questions, showSelect
                 </FormGroup>
             </div>
 
-            <Table size="small" stickyHeader component={Paper}>
+            <div className="table-container">
+            <Table size="small" component={Paper}>
                 <TableHead>
                     <TableRow>
-                        <TableCell
+                        <TableCell className="sticky-column">
-                            sx={{
-                                borderStyle: 'solid',
-                                borderWidth: 1,
-                                borderColor: 'rgba(224, 224, 224, 1)'
-                            }}
-                        >
                             <div className="text-base text-bold">Nom d'utilisateur</div>
                         </TableCell>
                         {Array.from({ length: maxQuestions }, (_, index) => (
@@ -259,7 +254,7 @@ const LiveResults: React.FC<LiveResultsProps> = ({ socket, questions, showSelect
                                 key={index}
                                 sx={{
                                     textAlign: 'center',
-                                    cursor: `pointer`,
+                                    cursor: 'pointer',
                                     borderStyle: 'solid',
                                     borderWidth: 1,
                                     borderColor: 'rgba(224, 224, 224, 1)'
@@ -270,6 +265,7 @@ const LiveResults: React.FC<LiveResultsProps> = ({ socket, questions, showSelect
                             </TableCell>
                         ))}
                         <TableCell
+                            className="sticky-header"
                             sx={{
                                 textAlign: 'center',
                                 borderStyle: 'solid',
@@ -285,6 +281,7 @@ const LiveResults: React.FC<LiveResultsProps> = ({ socket, questions, showSelect
                     {studentResults.map((student) => (
                         <TableRow key={student.idUser}>
                             <TableCell
+                                className="sticky-column"
                                 sx={{
                                     borderStyle: 'solid',
                                     borderWidth: 1,
@@ -348,7 +345,7 @@ const LiveResults: React.FC<LiveResultsProps> = ({ socket, questions, showSelect
                 </TableBody>
                 <TableFooter>
                     <TableRow sx={{ backgroundColor: '#d3d3d34f' }}>
-                        <TableCell sx={{ color: 'black' }}>
+                        <TableCell className="sticky-column" sx={{ color: 'black' }}>
                             <div className="text-base text-bold">% réussite</div>
                         </TableCell>
                         {Array.from({ length: maxQuestions }, (_, index) => (
@@ -385,6 +382,7 @@ const LiveResults: React.FC<LiveResultsProps> = ({ socket, questions, showSelect
                 </TableFooter>
             </Table>
         </div>
+        </div>
     );
 };
 

client/src/components/LiveResults/liveResult.css

@@ -27,6 +27,39 @@
     align-items: flex-start;
 }
 
+.table-cell-border {
+    border-style: solid;
+    border-width: 1px;
+    border-color: rgba(224, 224, 224, 1);
+}
+
+/* -------------- */
+
+.table-container {
+    overflow-x: auto;
+    position: relative;
+}
+
+.sticky-header {
+    position: sticky;
+    top: 0;
+    background-color: white;
+    z-index: 2; /* Ensure it stays above other cells */
+}
+
+.sticky-column {
+    position: sticky;
+    left: 0;
+    background-color: white;
+    z-index: 1; /* Ensure it stays above other cells but below the header */
+}
+
+.sticky-intersection {
+    z-index: 3; /* Ensure the top-left cell stays above both header and column */
+}
+
+/* ------------------------------- */
+
 /* Media query for narrow screens */
 @media (max-width: 600px) {
     .action-bar {

client/src/pages/Teacher/ManageRoom/ManageRoom.tsx

@@ -255,8 +255,8 @@ const ManageRoom: React.FC = () => {
                 <div className='dumb'></div>
 
             </div>
-
+{/* the following breaks the css (nested room classes) */}
-            <div className='room'>
+            <div className=''>
 
                 {quizQuestions ? (