fix scrolling at home page

front/style/home/home.css

@@ -20,9 +20,9 @@ body {
     display: flex;
     flex-direction: row;
     margin: 0px;
-    height: 100%;
     background-color: var(--second-color);
-    
+    height: calc(100% - var(--height-header));
+    overflow: hidden;
 }
 
 .data {

front/style/home/personnal_space.css

@@ -17,7 +17,7 @@
     border-radius: 0.5cap;
     align-self: center;
     overflow: scroll;
-    height : 87% ;
+    height: 85%;
 }
 
 #body-personal-space table {

front/style/template/header.css

@@ -1,3 +1,7 @@
+:root {
+    --height-header : 110px;
+}
+
 #header {
     text-align: center;
     background-color: var(--main-color);
@@ -7,11 +11,17 @@
     flex-direction: row;
     font-family: var(--font-title);
     /* border-radius: 0.75cap; */
+    padding-left : 1%;
+    padding-right: 1%;
+    height: var(--height-header);
 }
 
-#img-account {
-    width: 100%;
-    cursor: pointer;
+#header-center {
+    width: 80%;
+    /* border : yellow 1px solid; */
+    padding : 0px;
+    display: flex;
+    justify-content: center;
 }
 
 #header-right,
@@ -27,17 +37,19 @@
     align-items: center;
 }
 
-#username {
-    color: var(--main-contrast-color);
-    margin: 0;
-}
-
 #clickable-header-right:hover #username {
     color: var(--accent-color);
 }
 
-#header-center {
-    width: 80%;
+#img-account {
+    width: 100%;
+    cursor: pointer;
+    /* border : 1px red solid;    */
+}
+
+#username {
+    color: var(--main-contrast-color);
+    margin: 0;
 }
 
 #clickable-header-right {
@@ -47,7 +59,7 @@
 }
 
 #clickable-header-right:hover {
-    border: orange 1px solid;
+    border: var(--accent-color) 1px solid;
 }
 
 .clickable {
@@ -62,4 +74,7 @@
     color: var(--accent-color);
     font-weight: bold;
     font-size: 45px;
+    /* border: red 1px solid; */
+    width: fit-content;
+    text-align: center;
 }

front/views/template/Header.tsx

@@ -8,7 +8,9 @@ import { BASE } from "../../Constants"
 export function Header({ username }: { username: string }) {
     return (
         <div id="header">
-            <div id="header-left"></div>
+            <div id="header-left">
+                
+            </div>
             <div id="header-center">
                 <h1
                     id="iqball"
@@ -16,8 +18,7 @@ export function Header({ username }: { username: string }) {
                     onClick={() => {
                         location.pathname = "/"
                     }}>
-                    <span id="IQ">IQ</span>
-                    <span id="Ball">Ball</span>
+                    IQBall
                 </h1>
             </div>
             <div id="header-right">