From 2fae9aefad974efa5b635008309d888f0cae3b23 Mon Sep 17 00:00:00 2001
From: Scott Pouliot <spouliot@scppowdercoating.com>
Date: Tue, 16 Jun 2026 20:12:00 -0400
Subject: [PATCH] Fix Bills detail page horizontal scrolling on mobile

Wrap Line Items and Payment History tables in table-responsive so they
scroll horizontally rather than overflowing the viewport. Expenses detail
page uses a definition list layout and was not affected.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/PowderCoating.Web/Views/Bills/Details.cshtml | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/PowderCoating.Web/Views/Bills/Details.cshtml b/src/PowderCoating.Web/Views/Bills/Details.cshtml
index 7c11518..97d61c8 100644
--- a/src/PowderCoating.Web/Views/Bills/Details.cshtml
+++ b/src/PowderCoating.Web/Views/Bills/Details.cshtml
@@ -127,6 +127,7 @@
         <div class="card shadow-sm mb-4">
             <div class="card-header fw-semibold">Line Items</div>
             <div class="card-body p-0">
+                <div class="table-responsive">
                 <table class="table table-sm mb-0">
                     <thead class="table-light">
                         <tr>
@@ -169,6 +170,7 @@
                         </tr>
                     </tfoot>
                 </table>
+                </div>
             </div>
         </div>
 
@@ -210,6 +212,7 @@
                     </a>
                 </div>
                 <div class="card-body p-0">
+                    <div class="table-responsive">
                     <table class="table table-sm mb-0">
                         <thead class="table-light">
                             <tr>
@@ -253,6 +256,7 @@
                             }
                         </tbody>
                     </table>
+                    </div>
                 </div>
             </div>
         }