From a9f353fa6ad273c6fc3b9b0430cdfab4fe198537 Mon Sep 17 00:00:00 2001
From: Konrad du Plessis <konradzar@gmail.com>
Date: Fri, 20 Feb 2026 01:10:40 +0200
Subject: [PATCH] Fix minor mobile responsiveness issues

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 core/templates/core/index.html             | 5 ++++-
 core/templates/core/loan_list.html         | 2 +-
 core/templates/core/payroll_dashboard.html | 6 ++++++
 core/templates/core/payslip.html           | 4 ++--
 static/css/custom.css                      | 7 +++++++
 5 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/core/templates/core/index.html b/core/templates/core/index.html
index 5f1d45c..9835916 100644
--- a/core/templates/core/index.html
+++ b/core/templates/core/index.html
@@ -8,6 +8,9 @@
     .resource-hidden { display: none !important; }
     .quick-action-btn { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1rem; border-radius: 0.5rem; font-weight: 500; font-size: 0.875rem; transition: all 0.15s; text-decoration: none; }
     .quick-action-btn:hover { transform: translateX(3px); }
+    @media (max-width: 767.98px) {
+        .dashboard-header .display-5 { font-size: 1.75rem; }
+    }
 </style>
 <div class="dashboard-header">
     <div class="container">
@@ -159,7 +162,7 @@
                     <h5 class="mb-0"><i class="bi bi-calendar-week me-2"></i>This Week</h5>
                     <a href="{% url 'work_log_list' %}?view=calendar" class="btn btn-sm btn-link text-decoration-none">View Calendar &rarr;</a>
                 </div>
-                <div class="d-flex gap-4 mt-3">
+                <div class="d-flex flex-wrap gap-4 mt-3">
                     <div class="text-center">
                         <div class="fs-3 fw-bold text-primary">{{ week_worker_days }}</div>
                         <div class="text-muted small">Worker-Days</div>
diff --git a/core/templates/core/loan_list.html b/core/templates/core/loan_list.html
index 8ced55b..661d91e 100644
--- a/core/templates/core/loan_list.html
+++ b/core/templates/core/loan_list.html
@@ -14,7 +14,7 @@
     <!-- Filters -->
     <div class="card shadow-sm border-0 mb-4">
         <div class="card-body p-2">
-            <ul class="nav nav-pills nav-fill">
+            <ul class="nav nav-pills nav-fill flex-nowrap overflow-auto">
                 <li class="nav-item">
                     <a class="nav-link {% if filter_status == 'active' %}active{% endif %}" href="?status=active">Outstanding Loans</a>
                 </li>
diff --git a/core/templates/core/payroll_dashboard.html b/core/templates/core/payroll_dashboard.html
index b32e9c0..107147c 100644
--- a/core/templates/core/payroll_dashboard.html
+++ b/core/templates/core/payroll_dashboard.html
@@ -5,6 +5,12 @@
 
 {% block head %}
 <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
+<style>
+    @media (max-width: 767.98px) {
+        #payrollTotalsChart, #projectCostsChart { height: 160px !important; }
+        #otHistoryChart { height: 100px !important; }
+    }
+</style>
 {% endblock %}
 
 {% block content %}
diff --git a/core/templates/core/payslip.html b/core/templates/core/payslip.html
index cea211f..61ea971 100644
--- a/core/templates/core/payslip.html
+++ b/core/templates/core/payslip.html
@@ -5,8 +5,8 @@
 
 {% block content %}
 <div class="container py-5">
-    <div class="d-print-none mb-4">
-        <a href="{% url 'payroll_dashboard' %}?status=paid" class="btn btn-outline-secondary me-2">← Back to Payment History</a>
+    <div class="d-print-none mb-4 d-grid gap-2 d-md-flex">
+        <a href="{% url 'payroll_dashboard' %}?status=paid" class="btn btn-outline-secondary">← Back to Payment History</a>
         <button onclick="window.print()" class="btn btn-primary">Print Payslip</button>
     </div>
 
diff --git a/static/css/custom.css b/static/css/custom.css
index dc85a41..b88db19 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -86,4 +86,11 @@ h1, h2, h3, .heading-font {
 .sidebar-link.active {
     background-color: var(--primary-color);
     color: var(--white);
+}
+
+@media (max-width: 767.98px) {
+    .form-switch .form-check-input {
+        width: 3em;
+        height: 1.5em;
+    }
 }
\ No newline at end of file