feat: use 100% of html page and always minimize footer

Author: MathiasVDA

src/main.css

@@ -1,10 +1,14 @@
 /* Global styles */
+html {
+  height: 100%;
+}
 body {
+  height: 100%;
   margin: 0;
   padding: 0;
-  font-family:
-    -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
-    "Helvetica Neue", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   background-color: #ffffff;
@@ -18,8 +22,9 @@ body {
 
 /* YASGUI container */
 #yasgui {
+  height: 100%;
   margin-top: 0px;
-  height: calc(100vh - 60px);
+  /* height: calc(100vh - 60px); */
 }
 
 /* Footer styles */
@@ -35,9 +40,7 @@ body {
   align-items: center;
   justify-content: center;
   z-index: 1000;
-  transition:
-    transform 0.3s ease-in-out,
-    background-color 0.3s ease,
+  transition: transform 0.3s ease-in-out, background-color 0.3s ease,
     border-color 0.3s ease;
 }
 
@@ -99,12 +102,14 @@ body {
 
 /* Footer toggle button */
 #footer-toggle {
-  display: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   position: fixed;
   bottom: 20px;
   right: 20px;
-  width: 50px;
-  height: 50px;
+  width: 30px;
+  height: 30px;
   border-radius: 50%;
   background-color: #0066cc;
   color: white;
@@ -125,28 +130,23 @@ body {
   transform: scale(0.95);
 }
 
-/* Responsive behavior for small screens */
-@media (max-width: 768px) {
-  #footer {
-    transform: translateY(100%);
-  }
-
-  #footer.expanded {
-    transform: translateY(0);
-  }
+#footer-toggle.hidden {
+  opacity: 0;
+  pointer-events: none;
+  transform: scale(0);
+}
 
-  #footer-toggle {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
+/* Footer hidden by default on all screens */
+#footer {
+  transform: translateY(100%);
+}
 
-  #footer-toggle.hidden {
-    opacity: 0;
-    pointer-events: none;
-    transform: scale(0);
-  }
+#footer.expanded {
+  transform: translateY(0);
+}
 
+/* Responsive behavior for small screens */
+@media (max-width: 768px) {
   .footer-left {
     position: relative;
     left: 0;