Overflow

front/style/home.css

@@ -36,6 +36,8 @@
 
 #sideMenu {
     background-color: grey;
+
+    overflow: hidden;
 }
 
 #titlePersonalSpace h2 {
@@ -73,16 +75,22 @@
     width: 100%;
     border-collapse : separate;
     border-spacing : 1em;
+    table-layout: fixed;
+    overflow: hidden;
 }
 
-td {
-    border : 3px solid black;
+#bodyPersonalSpace td {
+    width: 80px !important;
     padding-bottom : 1%;
     padding-top : 1%;
-    margin: 80px;
+    height: fit-content;
     text-align: center;  
+    overflow: hidden ;
+}
+.dataTactic {
+    border : 3px solid black;
 }
 
-td:hover {
+.dataTactic:hover {
     background-color: red;
 }

front/views/Home.tsx

@@ -97,10 +97,19 @@ function BodyPersonalSpace({ allTactics } : { allTactics : Tactic[]}) {
     i = 0;
     while (i < nbRow) {
         listTactic[i] = listTactic[i].map((tactic : Tactic) => 
-            <td key={tactic.id} onClick={() => {location.pathname="/tactic/"+tactic.id+"/edit"}}>{tactic.name}</td>
+            <td key={tactic.id} className="dataTactic" onClick={() => {location.pathname="/tactic/"+tactic.id+"/edit"}}>{tactic.name}</td>
         );
         i++;
     }
+    if (nbRow == 1) {
+        if (listTactic[0].length < 3) {
+            for (let i = 0; i <= 3-listTactic[0].length; i++) {
+                listTactic[0].push(<td key={"tdNone"+i}></td>);
+            }
+        } 
+    }
+
+    console.log(listTactic);
 
     const data = listTactic.map((tactic, rowIndex) => 
         <tr key={rowIndex+"row"}>