From ca250c67a041a1775862224f20c07cbefbaacb7a Mon Sep 17 00:00:00 2001
From: Anthony Debucquoy <debucquoy.anthony@gmail.com>
Date: Wed, 3 Apr 2024 14:58:04 +0200
Subject: [PATCH] Page to right size

---
 frontend/src/App.vue         | 13 ++++++-------
 frontend/src/assets/main.css |  4 ++++
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 6dcad67..40fbbc6 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -99,20 +99,19 @@ window.addEventListener('hashchange', () => {
 			height: 100%;
 			width: 100%;
     display:grid;
-    grid-template-columns:[firstCol-start]70px[firstCol-end secondCol-start]auto[endCol];
-    grid-template-rows:[firstRow-start]61px[firstRow-end secondRow-start] auto [endRow];
+
+    grid-template-columns:[firstCol-start]70px[firstCol-end secondCol-start] auto [endCol];
+    grid-template-rows:[firstRow-start] var(--header-size) [firstRow-end secondRow-start] calc(100% - var(--header-size)) [endRow];
     grid-template-areas:
     "topBar topBar" 
     "leftBar page";
-    row-gap:0px;
-    column-gap:0px;
+
   }
 
   .page {
     grid-area:page;
 		height: 100%;
 		width: 100%;
-    place-self:center;
   }
 
   .topBar{
@@ -155,7 +154,7 @@ window.addEventListener('hashchange', () => {
 
 	ul.vertical{
 		list-style-type: none;
-		margin-top: 61px;
+		margin-top: var(--header-size);
     top:0;
     left:0;
 		padding: 25px 0 0;
@@ -203,7 +202,7 @@ window.addEventListener('hashchange', () => {
     left:0;
     
 		position: fixed;
-		height:61px;
+		height:var(--header-size);
 		width: 100%;
 		background-color: rgb(24, 24, 24);
 	}
diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 54ce8d8..67f454e 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -1,3 +1,7 @@
+:root {
+	--header-size: 61px;
+}
+
 body {
    background-color: rgb(53, 25, 60);
    margin:0;
-- 
2.46.0