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>
This commit is contained in:
2026-05-27 22:48:33 -04:00
parent efc4e9dadf
commit 0deef574c3
3 changed files with 23 additions and 8 deletions
@@ -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">