fix(GRO-766): fix portal mobile overflow at 390px viewport

- CustomerPortal.tsx: change main from overflow-x-hidden to overflow-hidden
  to properly clip child overflow in both axes
- BillingPayments.tsx: add overflow-x-auto to tab button row so long
  button labels scroll instead of causing page-level overflow
- PetProfiles.tsx: already has overflow-x-auto on tab row — no change needed

Discovered in UAT by Shedward (DEF-2 and DEF-3 on GRO-754).

Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Test User
2026-04-24 11:35:13 +00:00
parent 6bddd6203d
commit fb9c922182
2 changed files with 2 additions and 2 deletions
@@ -130,7 +130,7 @@ function BillingPaymentsInner({ sessionId, readOnly }: BillingPaymentsProps) {
</div>
)}
<div className="flex gap-2 flex-wrap">
<div className="flex gap-2 flex-wrap overflow-x-auto">
{([
{ id: "invoices" as const, label: "Invoices", icon: DollarSign },
{ id: "payment" as const, label: "Payment Methods", icon: CreditCard },