From 3d3183c5f107873b2a6725b56d7022c67ce86f8a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?=
 <40151420+ldericher@users.noreply.github.com>
Date: Sun, 11 Sep 2022 22:24:48 +0000
Subject: [PATCH] better titlebar layout

---
 ui/src/components/TitleBar.vue | 30 ++++++++++--------------------
 1 file changed, 10 insertions(+), 20 deletions(-)

diff --git a/ui/src/components/TitleBar.vue b/ui/src/components/TitleBar.vue
index e80e2b8..ceaa9a9 100644
--- a/ui/src/components/TitleBar.vue
+++ b/ui/src/components/TitleBar.vue
@@ -1,30 +1,17 @@
 <template>
   <v-toolbar color="primary" prominent dark>
-    <v-row class="d-flex">
-      <v-col
-        cols="3"
-        class="d-flex flex-grow-1 flex-shrink-1 justify-start text-left"
-      >
-        LOGO
-      </v-col>
+    <v-container class="d-flex pa-0" fluid fill-height>
+      <div class="d-flex justify-start slim text-left text-no-wrap">LOGO</div>
 
-      <v-col
-        cols="6"
-        class="d-flex flex-grow-0 flex-shrink-1 justify-center text-center"
-      >
-        TITLE
-      </v-col>
+      <div class="d-flex justify-center text-center mx-auto">TITLE</div>
 
-      <v-col
-        cols="3"
-        class="d-flex flex-grow-1 flex-shrink-1 justify-end text-right"
-      >
+      <div class="d-flex justify-end slim text-right text-no-wrap">
         <div class="flex-column">
           <Clock class="d-flex justify-end" format="DDD" />
           <Clock class="d-flex justify-end" format="T" />
         </div>
-      </v-col>
-    </v-row>
+      </div>
+    </v-container>
   </v-toolbar>
 </template>
 
@@ -40,5 +27,8 @@ import Clock from "./Clock.vue";
 export default class TitleBar extends Vue {}
 </script>
 
-<style>
+<style lang="css" scoped>
+.slim {
+  max-width: 0;
+}
 </style>
\ No newline at end of file