From 570a8234260050bce284590b63ee75a07b94c6af Mon Sep 17 00:00:00 2001
From: Adam French <adam.a.french@outlook.com>
Date: Wed, 25 Mar 2026 02:43:37 +0000
Subject: [PATCH] Improve responsive layout for Home sidebar and utility
 components

Switch sidebar to CSS grid, constrain images on mobile, add max-height to Chat, and improve Radio/Time/Timer compact styling.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 nginx/vue/src/components/util/Radio.vue |  8 ++++++++
 nginx/vue/src/components/util/Time.vue  |  7 +++++++
 nginx/vue/src/components/util/Timer.vue | 11 ++++++++++-
 nginx/vue/src/views/home/Home.vue       | 24 +++++++++++++++++-------
 4 files changed, 42 insertions(+), 8 deletions(-)

diff --git a/nginx/vue/src/components/util/Radio.vue b/nginx/vue/src/components/util/Radio.vue
index 8fa0d95..38e9ebf 100644
--- a/nginx/vue/src/components/util/Radio.vue
+++ b/nginx/vue/src/components/util/Radio.vue
@@ -46,3 +46,11 @@ onMounted(() => {
     setInterval(checkStream, 120000);
 });
 </script>
+
+<style scoped>
+img {
+    width: 100%;
+    max-height: 150px;
+    object-fit: cover;
+}
+</style>
diff --git a/nginx/vue/src/components/util/Time.vue b/nginx/vue/src/components/util/Time.vue
index deaea07..8a90960 100644
--- a/nginx/vue/src/components/util/Time.vue
+++ b/nginx/vue/src/components/util/Time.vue
@@ -29,3 +29,10 @@ setInterval(updateDateTime, 60000);
         <h1>{{ time }}</h1>
     </div>
 </template>
+
+<style scoped>
+div {
+    text-align: center;
+    padding: 4px;
+}
+</style>
diff --git a/nginx/vue/src/components/util/Timer.vue b/nginx/vue/src/components/util/Timer.vue
index 5dae8b6..fe2b48c 100644
--- a/nginx/vue/src/components/util/Timer.vue
+++ b/nginx/vue/src/components/util/Timer.vue
@@ -65,7 +65,7 @@ function playFinishedSound() {
 </script>
 
 <template>
-    <div class="flex flex-col gap-1 p-1 items-center">
+    <div class="timer-root flex flex-col gap-1 p-1 items-center">
         <Header>Timer</Header>
         <div v-if="finished && paused" class="flex flex-col">
             <div class="flex flex-row p-2 place-content-around">
@@ -113,3 +113,12 @@ function playFinishedSound() {
         </div>
     </div>
 </template>
+
+<style scoped>
+@media (max-width: 850px) {
+    .timer-root {
+        padding: 2px;
+        gap: 2px;
+    }
+}
+</style>
diff --git a/nginx/vue/src/views/home/Home.vue b/nginx/vue/src/views/home/Home.vue
index a9ac48f..b86ab08 100644
--- a/nginx/vue/src/views/home/Home.vue
+++ b/nginx/vue/src/views/home/Home.vue
@@ -31,7 +31,7 @@ import Consumption from "./Consumption.vue";
                 >
                     <Chat class="flex-1 min-h-0" />
                 </div>
-                <div>
+                <div class="sidebar-image">
                     <Miku class="border-tertiary border bg-bg_secondary" />
                 </div>
             </div>
@@ -63,7 +63,7 @@ import Consumption from "./Consumption.vue";
                     <!-- <Elle class="flex-1" /> -->
                     <!-- <MusicPlayer /> -->
                 </div>
-                <div>
+                <div class="sidebar-image">
                     <img
                         src="/img/memes/fire-woman.gif"
                         class="border-tertiary border"
@@ -122,14 +122,24 @@ import Consumption from "./Consumption.vue";
     }
 
     .sidebar {
-        flex-direction: row;
-        flex-wrap: wrap;
-        justify-content: center;
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+        gap: 8px;
+        justify-items: stretch;
     }
 
     .sidebar > * {
-        max-width: 400px;
-        width: 100%;
+        max-width: none;
+        width: auto;
+    }
+
+    .sidebar-image {
+        max-height: 200px;
+    }
+
+    .sidebar-image :deep(img) {
+        max-height: 200px;
+        object-fit: contain;
     }
 }