updates

src/components/TopBar.vue

@@ -11,10 +11,10 @@ const emit = defineEmits<{
 <template>
   <div
     id="topbar"
-    class="bg-primary position-absolute top-0 start-0 end-0"
+    class="bg-primary position-absolute top-0 start-0 end-0 d-flex"
     style="height: 50px"
   >
-    <div class="container g-3 h-100 d-flex align-items-center text-white">
+    <div id="topbar-container" class="g-3 h-100 d-flex align-items-center text-white mx-auto">
       <Hamburger
         class="me-3"
         :side-bar-collapsed="props.sideBarCollapsed"
@@ -23,8 +23,11 @@ const emit = defineEmits<{
     </div>
   </div>
 </template>
-<style scoped>
+<style scoped lang="scss">
 #topbar {
   z-index: 500;
 }
+#topbar-container {
+  max-width: $app-width;
+}
 </style>