fix: prevent horizontal overflow on mobile portal pages
- PetProfiles.tsx: add flex-shrink-0 to tab row to prevent collapse underflow - BillingPayments.tsx: add flex-shrink-0 to tab button row Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
@@ -130,7 +130,7 @@ function BillingPaymentsInner({ sessionId, readOnly }: BillingPaymentsProps) {
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
<div className="flex gap-2 flex-wrap flex-shrink-0">
|
||||
{([
|
||||
{ id: "invoices" as const, label: "Invoices", icon: DollarSign },
|
||||
{ id: "payment" as const, label: "Payment Methods", icon: CreditCard },
|
||||
|
||||
@@ -182,7 +182,7 @@ export function PetProfiles({ sessionId, readOnly }: Props) {
|
||||
)}
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="flex gap-1 bg-white rounded-xl border border-stone-200 p-1 overflow-x-auto">
|
||||
<div className="flex gap-1 bg-white rounded-xl border border-stone-200 p-1 overflow-x-auto flex-shrink-0">
|
||||
{([
|
||||
{ id: "info", label: "Basic Info", icon: PawPrint },
|
||||
{ id: "medical", label: "Medical", icon: Heart },
|
||||
|
||||
Reference in New Issue
Block a user