From 77e2c272cb3238e3e8ed257288b008f3f50ae30e Mon Sep 17 00:00:00 2001
From: Adam French <adam.a.french@outlook.com>
Date: Mon, 9 Mar 2026 13:06:17 +0000
Subject: [PATCH] Update mobile layout adjustments

---
 nginx/vue/src/views/home/Home.vue | 35 +++++++++++++++++++++----------
 1 file changed, 24 insertions(+), 11 deletions(-)

diff --git a/nginx/vue/src/views/home/Home.vue b/nginx/vue/src/views/home/Home.vue
index 2ada004..71dc8b5 100644
--- a/nginx/vue/src/views/home/Home.vue
+++ b/nginx/vue/src/views/home/Home.vue
@@ -24,7 +24,7 @@ import Consumption from "./Consumption.vue";
 
 <template>
     <main class="halftone justify-center flex flex-row w-full h-full">
-        <div class="h-fit flex flex-row">
+        <div class="outerWrap h-fit flex flex-row">
             <div
                 class="sidebar flex-1 flex flex-col m-10 w-60 gap-2 place-content-between"
             >
@@ -87,24 +87,37 @@ import Consumption from "./Consumption.vue";
 
 .homeGrid {
     display: grid;
-    grid-gap: 5px;
+    gap: 5px;
     grid-template-columns: repeat(10, 1fr);
     grid-template-rows: repeat(10, 1fr);
 }
 
-@media (max-width: 850px) {
-    .homeGrid {
-        width: 100%;
-        display: flex;
+@media (max-width: 1200px) {
+    .outerWrap {
         flex-direction: column;
+        align-items: stretch;
+    }
+
+    .homeGrid {
+        order: -1;
+        width: 100%;
+        margin-inline: 0;
+        box-sizing: border-box;
+    }
+
+    .sidebar {
+        width: 100%;
+        margin: 5px 10px;
+        flex-direction: column;
+        align-items: center;
+        gap: 8px;
     }
 }
 
-@media (max-width: 1200px) {
-    .tr,
-    .br,
-    .sidebar {
-        display: none;
+@media (max-width: 850px) {
+    .homeGrid {
+        display: flex;
+        flex-direction: column;
     }
 }