From 3f39f6327c9398f4fb54ea9a9010b94e834613a4 Mon Sep 17 00:00:00 2001
From: Adam French <adam.a.french@outlook.com>
Date: Thu, 5 Mar 2026 20:32:14 +0000
Subject: [PATCH] Lookmaxing

---
 nginx/vue/src/components/util/Chat.vue          |  2 ++
 nginx/vue/src/components/util/CommitHistory.vue |  3 +++
 nginx/vue/src/components/util/Radio.vue         |  5 ++++-
 nginx/vue/src/components/util/Time.vue          |  4 ++--
 nginx/vue/src/components/util/Timer.vue         |  4 +++-
 nginx/vue/src/views/home/Home.vue               | 16 ++++++++++------
 6 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/nginx/vue/src/components/util/Chat.vue b/nginx/vue/src/components/util/Chat.vue
index 8d7041a..bf02d8b 100644
--- a/nginx/vue/src/components/util/Chat.vue
+++ b/nginx/vue/src/components/util/Chat.vue
@@ -2,6 +2,7 @@
 import { ref, computed, onMounted, onUnmounted } from "vue";
 import Button from "@/components/input/Button.vue";
 import { useMessagesStore } from "@/stores/messages";
+import Header from "@/components/text/Header.vue";
 
 const messagesStore = useMessagesStore();
 const messages = computed(() => messagesStore.messages);
@@ -24,6 +25,7 @@ onUnmounted(() => {
 
 <template>
     <div class="flex flex-col">
+        <Header>Chat</Header>
         <div class="flex flex-col flex-1 overflow-x-scroll">
             <p v-for="message in messages" :key="message.id">
                 {{ message.text }}
diff --git a/nginx/vue/src/components/util/CommitHistory.vue b/nginx/vue/src/components/util/CommitHistory.vue
index f741c80..b378082 100644
--- a/nginx/vue/src/components/util/CommitHistory.vue
+++ b/nginx/vue/src/components/util/CommitHistory.vue
@@ -1,6 +1,7 @@
 <script setup>
 import axios from "axios";
 import { ref, onMounted } from "vue";
+import Header from "@/components/text/Header.vue";
 
 const url =
     "https://www.adam-french.co.uk/gitea/api/v1/users/adamf/activities/feeds?limit=1";
@@ -28,6 +29,8 @@ onMounted(() => {
 
 <template>
     <div class="justify-center text-center">
+        <Header class="text-left">Commits</Header>
+
         <div v-if="isLoading">
             <p>Loading latest activity...</p>
         </div>
diff --git a/nginx/vue/src/components/util/Radio.vue b/nginx/vue/src/components/util/Radio.vue
index 0c74e55..83973c7 100644
--- a/nginx/vue/src/components/util/Radio.vue
+++ b/nginx/vue/src/components/util/Radio.vue
@@ -1,11 +1,13 @@
 <template>
     <div v-if="streamLive">
+        <Header>Radio</Header>
         <img src="/img/tmpen31z3pe.PNG" />
         <audio controls :src="streamUrl" ref="audio"></audio>
     </div>
     <div v-else>
+        <Header>Radio</Header>
         <img src="/img/tmpen31z3pe.PNG" />
-        <div class="m-1">
+        <div class="m-1 text-center">
             <p>Radio is offline. Message for info!</p>
             <Button class="w-full" @click="checkStream()">Check Stream</Button>
         </div>
@@ -14,6 +16,7 @@
 
 <script setup>
 import Button from "@/components/input/Button.vue";
+import Header from "@/components/text/Header.vue";
 import { ref, onMounted } from "vue";
 import axios from "axios";
 
diff --git a/nginx/vue/src/components/util/Time.vue b/nginx/vue/src/components/util/Time.vue
index f40134e..deaea07 100644
--- a/nginx/vue/src/components/util/Time.vue
+++ b/nginx/vue/src/components/util/Time.vue
@@ -24,8 +24,8 @@ setInterval(updateDateTime, 60000);
 </script>
 
 <template>
-    <div class="items-center flex flex-col">
+    <div class="flex flex-col">
+        <Header>{{ weekday }} {{ day }}, {{ month }}</Header>
         <h1>{{ time }}</h1>
-        <h1>{{ weekday }} {{ day }}, {{ month }}</h1>
     </div>
 </template>
diff --git a/nginx/vue/src/components/util/Timer.vue b/nginx/vue/src/components/util/Timer.vue
index a5b4a40..5dae8b6 100644
--- a/nginx/vue/src/components/util/Timer.vue
+++ b/nginx/vue/src/components/util/Timer.vue
@@ -1,5 +1,7 @@
 <script setup>
 import Button from "@/components/input/Button.vue";
+import Header from "@/components/text/Header.vue";
+
 import { ref } from "vue";
 
 const timer = ref(null);
@@ -64,7 +66,7 @@ function playFinishedSound() {
 
 <template>
     <div class="flex flex-col gap-1 p-1 items-center">
-        <h2 class="items-center">Timer</h2>
+        <Header>Timer</Header>
         <div v-if="finished && paused" class="flex flex-col">
             <div class="flex flex-row p-2 place-content-around">
                 <input
diff --git a/nginx/vue/src/views/home/Home.vue b/nginx/vue/src/views/home/Home.vue
index ebadc4c..9473830 100644
--- a/nginx/vue/src/views/home/Home.vue
+++ b/nginx/vue/src/views/home/Home.vue
@@ -25,10 +25,14 @@ import Consumption from "./Consumption.vue";
     <main class="halftone justify-center flex flex-row w-full h-full">
         <div class="h-fit flex flex-row">
             <div
-                class="sidebar border-children background-children place-content-between flex-1 flex flex-col m-10 w-60"
+                class="sidebar flex-1 flex flex-col m-10 w-60 gap-2 place-content-between"
             >
-                <Miku />
-                <Chat />
+                <div class="border-children background-children">
+                    <Chat class="h-80" />
+                </div>
+                <div>
+                    <Miku class="border-tertiary border bg-bg_secondary" />
+                </div>
             </div>
             <div
                 class="a4page-portrait homeGrid relative background-children border-children bdr-1"
@@ -51,10 +55,10 @@ import Consumption from "./Consumption.vue";
                 <div
                     class="flex flex-col background-children border-children flex-1 gap-2"
                 >
-                    <Time class="text-center" />
+                    <Time />
                     <Timer />
-                    <Radio class="text-center" />
-                    <CommitHistory class="text-center" />
+                    <Radio />
+                    <CommitHistory />
 
                     <!-- <Elle class="flex-1" /> -->
                     <!-- <MusicPlayer /> -->