From 0deef574c3c51be686b5a9395230597bf3227742 Mon Sep 17 00:00:00 2001
From: Scott Pouliot <spouliot@scppowdercoating.com>
Date: Wed, 27 May 2026 22:48:33 -0400
Subject: [PATCH] Fix formula pages mobile responsiveness; fix missing mobile
 tabs

- Custom Formulas and Timeclock tabs were completely missing from the mobile
  dropdown selector, making them unreachable on phones; also adds AI Profile
  and Online Payments which were similarly absent
- Formula library header: flex-column on mobile so title and button stack
  cleanly instead of colliding
- Filter bar: icon-only button gets a visible label on mobile; added col-12
  so it renders full-width correctly at xs
- Import modal: add modal-dialog-scrollable so body scrolls on small screens;
  wrap field table in table-responsive to prevent horizontal overflow
- Settings card header: flex-column on mobile + flex-wrap on button group
  so the three buttons don't overflow off the right edge

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../Views/CompanySettings/Index.cshtml          | 17 +++++++++++++++--
 .../Views/FormulaLibrary/Index.cshtml           | 10 +++++-----
 .../wwwroot/js/formula-library.js               |  4 +++-
 3 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/src/PowderCoating.Web/Views/CompanySettings/Index.cshtml b/src/PowderCoating.Web/Views/CompanySettings/Index.cshtml
index ee41880..1b72c0e 100644
--- a/src/PowderCoating.Web/Views/CompanySettings/Index.cshtml
+++ b/src/PowderCoating.Web/Views/CompanySettings/Index.cshtml
@@ -27,6 +27,10 @@
         <select class="form-select" id="mobileTabSelector">
             <option value="company-info" selected>Company Info</option>
             <option value="operating-costs">Operating Costs</option>
+            @if (Model.AiPhotoQuotesEnabled)
+            {
+            <option value="ai-profile">AI Profile</option>
+            }
             <option value="quoting-calibration">Shop Equipment Profile</option>
             <option value="app-defaults">App Defaults</option>
             <option value="job-defaults">Job &amp; Workflow</option>
@@ -34,7 +38,16 @@
             <option value="data-retention">Data Retention</option>
             <option value="data-lookups">Data Lookups</option>
             <option value="pdf-templates">PDF Templates</option>
+            @if (Model.AllowOnlinePayments)
+            {
+            <option value="online-payments">Online Payments</option>
+            }
             <option value="kiosk">Kiosk</option>
+            <option value="timeclock">Timeclock</option>
+            @if (ViewBag.AllowCustomFormulas == true)
+            {
+            <option value="custom-formulas">Custom Formulas</option>
+            }
         </select>
     </div>
 
@@ -2174,9 +2187,9 @@
         {
         <div class="tab-pane fade" id="custom-formulas" role="tabpanel">
             <div class="card shadow-sm mt-3">
-                <div class="card-header d-flex justify-content-between align-items-center">
+                <div class="card-header d-flex justify-content-between align-items-start align-items-sm-center flex-column flex-sm-row gap-2">
                     <h5 class="mb-0"><i class="bi bi-calculator me-2"></i>Custom Formula Item Templates</h5>
-                    <div class="d-flex gap-2">
+                    <div class="d-flex flex-wrap gap-2">
                         <a asp-controller="FormulaLibrary" asp-action="Index"
                            class="btn btn-outline-info btn-sm">
                             <i class="bi bi-collection me-1"></i>Community Library
diff --git a/src/PowderCoating.Web/Views/FormulaLibrary/Index.cshtml b/src/PowderCoating.Web/Views/FormulaLibrary/Index.cshtml
index dcc2191..cf1b034 100644
--- a/src/PowderCoating.Web/Views/FormulaLibrary/Index.cshtml
+++ b/src/PowderCoating.Web/Views/FormulaLibrary/Index.cshtml
@@ -9,7 +9,7 @@
 }
 
 <div class="container-fluid px-4">
-    <div class="d-flex align-items-center justify-content-between mb-4">
+    <div class="d-flex align-items-start align-items-sm-center justify-content-between flex-column flex-sm-row gap-3 mb-4">
         <div>
             <h1 class="h3 mb-1">
                 <i class="bi bi-collection me-2 text-primary"></i>Community Formula Library
@@ -17,7 +17,7 @@
             <p class="text-muted mb-0">Browse and import pricing formulas shared by the Powder Coating Logix community.</p>
         </div>
         <a asp-controller="CompanySettings" asp-action="Index" asp-fragment="custom-formulas"
-           class="btn btn-outline-secondary">
+           class="btn btn-outline-secondary flex-shrink-0">
             <i class="bi bi-gear me-1"></i>My Formulas
         </a>
     </div>
@@ -47,9 +47,9 @@
                     <input type="text" name="industryHint" value="@industryHint"
                            class="form-control" placeholder="HVAC, Automotive&hellip;" />
                 </div>
-                <div class="col-md-1">
+                <div class="col-12 col-md-1">
                     <button type="submit" class="btn btn-primary w-100">
-                        <i class="bi bi-funnel-fill"></i>
+                        <i class="bi bi-funnel-fill"></i><span class="d-md-none ms-1">Apply Filters</span>
                     </button>
                 </div>
             </form>
@@ -194,7 +194,7 @@
 
 @* Import Preview Modal *@
 <div class="modal fade" id="importModal" tabindex="-1" aria-labelledby="importModalLabel" aria-hidden="true">
-    <div class="modal-dialog modal-lg">
+    <div class="modal-dialog modal-lg modal-dialog-scrollable">
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title" id="importModalLabel">
diff --git a/src/PowderCoating.Web/wwwroot/js/formula-library.js b/src/PowderCoating.Web/wwwroot/js/formula-library.js
index c8ed6e9..f4170dd 100644
--- a/src/PowderCoating.Web/wwwroot/js/formula-library.js
+++ b/src/PowderCoating.Web/wwwroot/js/formula-library.js
@@ -74,10 +74,12 @@
                     ${diagramHtml}
                     ${fields.length > 0 ? `
                     <h6 class="small fw-semibold mb-2">Input Fields (${fields.length})</h6>
+                    <div class="table-responsive">
                     <table class="table table-sm table-bordered">
                         <thead><tr><th>Field</th><th>Unit</th><th>Default</th></tr></thead>
                         <tbody>${fieldRows}</tbody>
-                    </table>` : '<p class="text-muted small">No fields defined.</p>'}
+                    </table>
+                    </div>` : '<p class="text-muted small">No fields defined.</p>'}
                     <div class="mt-2">
                         <h6 class="small fw-semibold mb-1">Formula Expression</h6>
                         <code class="d-block bg-light border rounded p-2 small text-break">${escHtml(d.formula)}</code>