From 450f1213afac0c82145ba10852abf87a23121bc2 Mon Sep 17 00:00:00 2001
From: Sean Cross <sean@xobs.io>
Date: Wed, 6 Dec 2023 18:00:05 +0800
Subject: [PATCH] css: adjust padding for dashboard widgets

Signed-off-by: Sean Cross <sean@xobs.io>
---
 static/css/desktop.css |  3 +--
 static/css/mobile.css  | 23 ++++++++++++++++-------
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/static/css/desktop.css b/static/css/desktop.css
index 3cd9d0f..7706c62 100644
--- a/static/css/desktop.css
+++ b/static/css/desktop.css
@@ -145,8 +145,7 @@ main {
 
 .dashboard-view {
 	max-width: 89dvw;
-	padding-left: 1rem;
-	padding-right: 1rem;
+	padding: 1rem;
 	display: grid;
 	gap: var(--space-xl) var(--space-xxl);
 	--repeat: auto-fit;
diff --git a/static/css/mobile.css b/static/css/mobile.css
index 981d0b9..51ff718 100644
--- a/static/css/mobile.css
+++ b/static/css/mobile.css
@@ -1,15 +1,19 @@
 /* Small screen  */
 @media only screen and (max-width: 600px) {
+    :root {
+        --nav-height: 4rem;
+        --view-padding: 1rem;
+    } 
+
     main {
-        height: calc(100dvh - 5rem);
-        /* height: calc(calc(var(--vh, 1dvh) * 100) - 5rem); */
+        height: calc(100dvh - var(--nav-height));
         margin: 0;
         padding: 0;
     }
 
     .main-content {
-        height: calc(100dvh - 5rem);
-        /* height: calc(calc(var(--vh, 1dvh) * 100) - 5rem); */
+        height: calc(100dvh - var(--nav-height));
+        padding-bottom: calc(var(--nav-height) + var(--view-padding));
     }
 
     .main-sidebar-rail {
@@ -24,9 +28,9 @@
         bottom: 0;
         width: 100dvw;
         /* BOTTOM BAR HEIGHT */
-        height: 5rem;
+        height: var(--nav-height);
         align-items: flex-start;
-        padding-top: 0.4rem;
+        /* padding-top: 0.4rem; */
         transition: none;
     }
 
@@ -36,7 +40,7 @@
     }
 
     .sidenav-nav {
-        height: 5rem;
+        height: var(--nav-height);
         flex-direction: row;
         margin-top: 0;
         align-items: flex-start;
@@ -53,4 +57,9 @@
     #rail-toggle-button {
         display: none;
     }
+
+    .dashboard-view {
+        padding-top: calc(var(--nav-height) + var(--view-padding));
+        padding-bottom: calc(var(--nav-height) + var(--view-padding));
+    }
 }