From 7d74a2fc07487112dab784b6675aa68d2f7a8b44 Mon Sep 17 00:00:00 2001
From: Adam French <adam.a.french@outlook.com>
Date: Wed, 25 Mar 2026 02:54:49 +0000
Subject: [PATCH] Fix small-screen layout issues for Home tables and sidebar
 images

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 nginx/vue/src/components/util/LinkTable.vue | 6 +++---
 nginx/vue/src/views/home/Home.vue           | 3 +++
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/nginx/vue/src/components/util/LinkTable.vue b/nginx/vue/src/components/util/LinkTable.vue
index 2e8ee63..16f53f1 100644
--- a/nginx/vue/src/components/util/LinkTable.vue
+++ b/nginx/vue/src/components/util/LinkTable.vue
@@ -22,7 +22,7 @@ const show = ref(false);
 </script>
 
 <template>
-    <div v-if="title" class="h-fit w-fit">
+    <div v-if="title" class="h-fit w-full">
         <ToggleHeader v-model="show" class="justify-between flex">
             {{ title }}
         </ToggleHeader>
@@ -35,7 +35,7 @@ const show = ref(false);
             >
                 <p class="bdr-2 bg-bg_tertiary">{{ item.name }}</p>
             </Link>
-            <table v-else>
+            <table class="w-full" v-else>
                 <tbody>
                     <tr v-for="item in items" :key="item.id">
                         <th>{{ item.type }}</th>
@@ -58,7 +58,7 @@ const show = ref(false);
                 <p class="bdr-2 bg-bg_tertiary">{{ item.name }}</p>
             </Link>
         </template>
-        <table v-else>
+        <table class="w-full" v-else>
             <tbody>
                 <tr v-for="item in items" :key="item.id">
                     <th>{{ item.type }}</th>
diff --git a/nginx/vue/src/views/home/Home.vue b/nginx/vue/src/views/home/Home.vue
index b86ab08..7515270 100644
--- a/nginx/vue/src/views/home/Home.vue
+++ b/nginx/vue/src/views/home/Home.vue
@@ -135,11 +135,14 @@ import Consumption from "./Consumption.vue";
 
     .sidebar-image {
         max-height: 200px;
+        overflow: hidden;
     }
 
     .sidebar-image :deep(img) {
         max-height: 200px;
         object-fit: contain;
+        display: block;
+        margin-inline: auto;
     }
 }