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>
This commit is contained in:
2026-06-16 20:12:00 -04:00
parent 2c179bc892
commit 2fae9aefad
@@ -127,6 +127,7 @@
<div class="card shadow-sm mb-4"> <div class="card shadow-sm mb-4">
<div class="card-header fw-semibold">Line Items</div> <div class="card-header fw-semibold">Line Items</div>
<div class="card-body p-0"> <div class="card-body p-0">
<div class="table-responsive">
<table class="table table-sm mb-0"> <table class="table table-sm mb-0">
<thead class="table-light"> <thead class="table-light">
<tr> <tr>
@@ -171,6 +172,7 @@
</table> </table>
</div> </div>
</div> </div>
</div>
<!-- Receipt attachment --> <!-- Receipt attachment -->
@if (!string.IsNullOrEmpty(Model.ReceiptFilePath)) @if (!string.IsNullOrEmpty(Model.ReceiptFilePath))
@@ -210,6 +212,7 @@
</a> </a>
</div> </div>
<div class="card-body p-0"> <div class="card-body p-0">
<div class="table-responsive">
<table class="table table-sm mb-0"> <table class="table table-sm mb-0">
<thead class="table-light"> <thead class="table-light">
<tr> <tr>
@@ -255,6 +258,7 @@
</table> </table>
</div> </div>
</div> </div>
</div>
} }
</div> </div>