From 556a4430add0cce903b268607a7c31f812401bf4 Mon Sep 17 00:00:00 2001
From: Peter Stockings <pstockings@jadeworld.com>
Date: Sun, 23 Feb 2025 16:47:31 +1100
Subject: [PATCH] Improve dashboard responsiveness and layout spacing

- Adjust grid layouts and spacing for better mobile and small screen support
- Reduce padding and margin sizes for compact displays
- Update text sizes and alignment for improved readability across devices
- Maintain existing dashboard structure and content
---
 templates/dashboard/home.html | 41 +++++++++++++++++------------------
 1 file changed, 20 insertions(+), 21 deletions(-)

diff --git a/templates/dashboard/home.html b/templates/dashboard/home.html
index 30fce21..c8681fb 100644
--- a/templates/dashboard/home.html
+++ b/templates/dashboard/home.html
@@ -7,9 +7,9 @@
     </div>
 
     <!-- Timer Functions Stats -->
-    <div class="mb-8">
-        <h2 class="text-lg font-semibold text-gray-700 mb-4">Timer Functions</h2>
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+    <div class="mb-4 sm:mb-8">
+        <h2 class="text-lg font-semibold text-gray-700 mb-2 sm:mb-4">Timer Functions</h2>
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-6">
             <!-- Total Timer Functions Card -->
             <div class="bg-white border border-gray-200 rounded-lg shadow-sm p-6">
                 <div class="flex items-center">
@@ -85,9 +85,9 @@
     </div>
 
     <!-- HTTP Functions Stats -->
-    <div class="mb-8">
-        <h2 class="text-lg font-semibold text-gray-700 mb-4">HTTP Functions</h2>
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+    <div class="mb-4 sm:mb-8">
+        <h2 class="text-lg font-semibold text-gray-700 mb-2 sm:mb-4">HTTP Functions</h2>
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-6">
             <!-- Total HTTP Functions Card -->
             <div class="bg-white border border-gray-200 rounded-lg shadow-sm p-6">
                 <div class="flex items-center">
@@ -162,13 +162,12 @@
         </div>
     </div>
 
-    <!-- Add this after the stats cards and before the Last Activity section -->
-
-    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
+    <!-- Charts Section -->
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-3 sm:gap-6 mb-4 sm:mb-8">
         <!-- 24-Hour Distribution -->
-        <div class="bg-white border border-gray-200 rounded-lg shadow-sm p-6">
-            <h3 class="text-lg font-medium text-gray-900 mb-4">24-Hour Invocation Distribution</h3>
-            <div class="relative h-64">
+        <div class="bg-white border border-gray-200 rounded-lg shadow-sm p-4 sm:p-6">
+            <h3 class="text-base sm:text-lg font-medium text-gray-900 mb-2 sm:mb-4">24-Hour Invocation Distribution</h3>
+            <div class="relative h-48 sm:h-64">
                 <svg class="w-full h-full" viewBox="0 0 400 200" preserveAspectRatio="none">
                     <!-- Y-axis -->
                     <line x1="40" y1="20" x2="40" y2="180" stroke="#E5E7EB" stroke-width="1" />
@@ -202,9 +201,9 @@
         </div>
 
         <!-- 7-Day Success Rate Trend -->
-        <div class="bg-white border border-gray-200 rounded-lg shadow-sm p-6">
-            <h3 class="text-lg font-medium text-gray-900 mb-4">7-Day Success Rate Trend</h3>
-            <div class="relative h-64">
+        <div class="bg-white border border-gray-200 rounded-lg shadow-sm p-4 sm:p-6">
+            <h3 class="text-base sm:text-lg font-medium text-gray-900 mb-2 sm:mb-4">7-Day Success Rate Trend</h3>
+            <div class="relative h-48 sm:h-64">
                 <svg class="w-full h-full" viewBox="0 0 400 200" preserveAspectRatio="none">
                     <!-- Y-axis -->
                     <line x1="40" y1="20" x2="40" y2="180" stroke="#E5E7EB" stroke-width="1" />
@@ -249,10 +248,10 @@
     </div>
 
     <!-- Last Activity -->
-    <div class="bg-white border border-gray-200 rounded-lg shadow-sm p-6">
-        <div class="flex items-center justify-between">
+    <div class="bg-white border border-gray-200 rounded-lg shadow-sm p-4 sm:p-6">
+        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between space-y-4 sm:space-y-0">
             <div>
-                <h2 class="text-lg font-medium text-gray-900">Last Activity</h2>
+                <h2 class="text-base sm:text-lg font-medium text-gray-900">Last Activity</h2>
                 <div class="mt-1 space-y-1">
                     {% if stats.last_timer_invocation %}
                     <p class="text-sm text-gray-500">
@@ -266,13 +265,13 @@
                     {% endif %}
                 </div>
             </div>
-            <div class="space-x-4">
+            <div class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-4">
                 <a href="{{ url_for('timer.overview') }}"
-                    class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors duration-200">
+                    class="inline-flex items-center justify-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors duration-200">
                     View Timer Functions
                 </a>
                 <a href="{{ url_for('dashboard_http_functions') }}"
-                    class="inline-flex items-center px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white font-medium rounded-lg transition-colors duration-200">
+                    class="inline-flex items-center justify-center px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white font-medium rounded-lg transition-colors duration-200">
                     View HTTP Functions
                 </a>
             </div>