Fix TypeError in tabs.js for non-scrollable Translate tabs

[buzkall]

Problem

When using the Translate component on a Filament 5 page, the browser console throws:

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'clientWidth')
    at Proxy.calculateDropdownIconWidth (tabs.js)
    at Proxy.updateTabsWithinDropdown (tabs.js)

Root Cause

The translate.blade.php template loads Filament's tabsSchemaComponent Alpine component without passing isScrollable, which defaults to false. This triggers the non-scrollable dropdown overflow logic in tabs.js, which expects a dropdown trigger element (.fi-tabs-item:last-child containing a .fi-icon) to be present in the DOM.

However, the Translate component renders tabs using <x-filament::tabs> (the presentation component) which does not include the dropdown trigger markup that Filament 5's native tabs.blade.php schema component renders (lines 167-209). When updateTabsWithinDropdown() runs, triggerEl.querySelector('.fi-icon') returns null, causing the crash.

Fix

Pass isScrollable: true to tabsSchemaComponent in the Alpine data. This skips the dropdown overflow logic entirely, which is appropriate since locale/translation tabs are always a small fixed set and don't need responsive overflow handling.

[Copilot]

Pull request overview

This PR addresses a client-side crash in Filament 5 tabs initialization when the Translate form component renders non-scrollable tabs markup that lacks Filament’s dropdown-trigger element expected by the tabsSchemaComponent overflow logic.

Changes:

• Pass isScrollable: true into Filament’s tabsSchemaComponent Alpine initializer for the Translate component.
• Avoid triggering the non-scrollable “tabs within dropdown” overflow logic path that was causing a null dereference.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.