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

@@ -46,3 +46,11 @@ onMounted(() => {
     setInterval(checkStream, 120000);
 });
 </script>
+
+<style scoped>
+img {
+    width: 100%;
+    max-height: 150px;
+    object-fit: cover;
+}
+</style>

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>

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>

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;
+        display: grid;
-        flex-wrap: wrap;
+        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-        justify-content: center;
+        gap: 8px;
+        justify-items: stretch;
     }
 
     .sidebar > * {
-        max-width: 400px;
+        max-width: none;
-        width: 100%;
+        width: auto;
+    }
+
+    .sidebar-image {
+        max-height: 200px;
+    }
+
+    .sidebar-image :deep(img) {
+        max-height: 200px;
+        object-fit: contain;
     }
 }