bug(dashboard): custom field tabs with long names overflow and overlap content

[Ryrahul]

Describe the bug
When Channel custom fields have many tabs with long names, the TabsList in the Dashboard uses flex-wrap which causes tabs to wrap into multiple rows. The wrapped rows overlap each other and bleed into the form content below, making the UI unusable.

To Reproduce
Steps to reproduce the behavior:

1. Configure Channel custom fields with many tabs that have long names (e.g. 10 fields across 10 differently-named tabs)
2. Go to the Channel detail page in the Dashboard
3. Scroll down to the custom fields section
4. See the tabs overflowing and overlapping the content below

Example configuration to reproduce:

customFields: {
    Channel: [
        { name: 'brandTagline', type: 'string', nullable: true, ui: { tab: 'Store branding & visual identity' } },
        { name: 'metaDescription', type: 'text', nullable: true, ui: { tab: 'Search engine optimization & metadata' } },
        { name: 'analyticsPropertyId', type: 'string', nullable: true, public: false, ui: { tab: 'Google Analytics & reporting integration' } },
        { name: 'webhookEndpoint', type: 'string', nullable: true, public: false, ui: { tab: 'Third-party webhooks & API callbacks' } },
        { name: 'emailOnNewOrder', type: 'boolean', defaultValue: false, ui: { tab: 'Order notification email preferences' } },
        { name: 'paymentProviderNotes', type: 'text', nullable: true, public: false, ui: { tab: 'Internal payment provider configuration notes' } },
        { name: 'defaultCarrierCode', type: 'string', nullable: true, ui: { tab: 'Default shipping carrier & fulfillment' } },
        { name: 'welcomeMessage', type: 'text', nullable: true, ui: { tab: 'Homepage welcome & promotional messaging' } },
        { name: 'termsVersion', type: 'string', nullable: true, ui: { tab: 'Legal terms, privacy & compliance' } },
        { name: 'supportContactEmail', type: 'string', nullable: true, ui: { tab: 'Customer support & helpdesk contact' } },
    ],
},

Expected behavior
Tabs should remain on a single row and be horizontally scrollable when they exceed the container width.

Actual behavior
Tabs wrap into multiple rows that overlap each other and the form content below. The TabsList has a fixed background height (h-9 from the base component) but flex-wrap causes content to extend beyond it, resulting in:

• Tab labels overlapping each other across rows
• Tabs bleeding into the custom field form inputs below
• Broken, unreadable UI

Screenshots/Videos

Environment (please complete the following information):

• @vendure/core version: (3.6.1)
• Nodejs version: 20+
• Database : any
• Operating System : any
• Browser : any
• Package manager : any

Configuration
See reproduction config above.

Workaround
Use shorter tab names in the ui.tab custom field configuration.