some changes

frontend/src/assets/base.css

@@ -48,6 +48,7 @@
 
   --border-radius: 6px;
   --section-gap: 160px;
+  --header-height: 4em;
 }
 
 /* Z-Index hierarchy */

frontend/src/assets/main.css

@@ -23,7 +23,7 @@ main {
 }
 
 .main-header {
-  height: 3em;
+  height: var(--header-height);
   border-bottom: 1px solid var(--color-border);
   display: flex;
   flex-direction: row;

frontend/src/components/TitleBar.vue

@@ -8,8 +8,9 @@
 
 <template>
   <header class="main-header">
-    <button class="when-sidebar-collapsed" @click="sidebarExpand()">
+    <button class="header-button when-sidebar-collapsed" @click="sidebarExpand()">
       >>
+      <!--i class="fa-solid fa-angles-right"></i-->
     </button>
 
     <slot>
@@ -25,4 +26,11 @@
     font-weight: bold;
     padding: 0 0.4em;
   }
+
+  .header-button {
+    height: var(--header-height);
+    width: var(--header-height);
+    background-color: none;
+    border: none;
+  }
 </style>

frontend/src/components/main/Sidebar.vue

@@ -92,8 +92,9 @@
         </div>
       </div>
       <div class="tab-group">
-        <button class="header-button">
-          <i class="fa-solid fa-angles-left" @click="sidebarExpanded=false;"></i>
+        <button class="header-button" @click="sidebarExpanded=false;">
+          <!--i class="fa-solid fa-angles-left"></i-->
+          <<
         </button>
       </div>
     </div>
@@ -124,8 +125,8 @@
     justify-content: space-around;
     align-items: center;
     list-style-type: none;
-    height: 3em;
-    width: 3em;
+    height: var(--header-height);
+    width: var(--header-height);
 
     padding-top: 3px;
     color: var(--color-text-mute);
@@ -193,9 +194,9 @@
   }
 
   .header-button {
-    height: 3em;
-    width: 3em;
-    border-radius: 1.5em;
+    height: var(--header-height);
+    width: var(--header-height);
+    /*border-radius: 1.5em;*/
     background-color: none;
     border: none;
   }