Bug description
In the asset crop editor, the aspect-ratio picker (rendered by resources/js/components/assets/Editor/CropEditor.vue, line 479 on current 6.x) uses a <Select> with class="w-48" (12rem fixed width). Custom crop_aspect_ratios labels wider than the Select button are truncated with an ellipsis — so the user can't read the option they're selecting. Statamic already ships an adaptiveWidth prop on both the Select and Combobox UI primitives (resources/js/components/ui/Select/Select.vue, resources/js/components/ui/Combobox/Combobox.vue; see storybook docs resources/js/stories/docs/Select.mdx and Combobox.mdx) — "When true, the dropdown will expand to fit longer option labels." The CropEditor doesn't pass it, so the dropdown menu inherits the Select button's 12rem and stays clipped regardless of how much room the page has for a wider menu.
How to reproduce
- In a Statamic project's
config/statamic/assets.php, define crop_aspect_ratios with at least one label longer than ~12rem. For example:
'crop_aspect_ratios' => [
[
'label' => 'Marketing Landing Page Header (Desktop Cover Image)',
'ratio' => '16:5',
],
[
'label' => 'Text and Image Overlay Block (one section only)',
'ratio' => '8:3',
],
],
- In the CP, open an image asset and click the crop editor.
- Click the aspect-ratio Select. The Select button and the dropdown menu are both ~12rem wide; the longer labels are truncated with an ellipsis even when the dropdown has room to grow.
Logs
Environment
EnvironmentLaravel Version: 13.11.2PHP Version: 8.4.20Composer Version: 2.9.5Environment: localDebug Mode: ENABLEDMaintenance Mode: OFFTimezone: UTCLocale: enCacheConfig: NOT CACHEDEvents: NOT CACHEDRoutes: NOT CACHEDViews: CACHEDDriversBroadcasting: logCache: fileDatabase: sqliteLogs: stack / singleMail: smtpQueue: syncSession: fileStorageC:\Users\Josh\Herd\uams-statamic\public\storage: NOT LINKEDStatamicAddons: 9License Key: Not setSites: 255 (<redacted>)Stache Watcher: Enabled (auto)Static Caching: DisabledVersion: 6.19.0 PROStatamic Addonsel-schneider/statamic-admin-bar: 0.3.2jacksleight/statamic-bard-mutator: 3.0.5jacksleight/statamic-bard-texstyle: 4.1.0statamic/eloquent-driver: 5.9.0statamic/ssg: 4.1.0stillat/relationships: 2.4.0studio1902/statamic-peak-seo: 11.2.0studio1902/statamic-peak-tools: 9.1.0uams-web/wordpress-importer: dev-mainStatamic Eloquent DriverAddon Settings: fileAsset Containers: fileAssets: eloquentBlueprints: fileCollection Trees: fileCollections: fileEntries: fileFieldsets: fileForm Submissions: fileForms: fileGlobal Sets: fileGlobal Variables: fileNavigation Trees: fileNavigations: fileRevisions: fileSites: fileTaxonomies: fileTerms: fileTokens: file
Installation
Existing Laravel app
Additional details
Suggested fix is small and self-contained: in resources/js/components/assets/Editor/CropEditor.vue, pass :adaptive-width="true" on the aspect-ratio <Select> (and optionally relax or drop the w-48 constraint so the Select button itself can grow if a host project has unusually long labels). This is a one-line change, not a new feature — adaptiveWidth is already implemented on the UI primitive.
Bug description
In the asset crop editor, the aspect-ratio picker (rendered by
resources/js/components/assets/Editor/CropEditor.vue, line 479 on current6.x) uses a<Select>withclass="w-48"(12rem fixed width). Customcrop_aspect_ratioslabels wider than the Select button are truncated with an ellipsis — so the user can't read the option they're selecting. Statamic already ships anadaptiveWidthprop on both theSelectandComboboxUI primitives (resources/js/components/ui/Select/Select.vue,resources/js/components/ui/Combobox/Combobox.vue; see storybook docsresources/js/stories/docs/Select.mdxandCombobox.mdx) — "Whentrue, the dropdown will expand to fit longer option labels." The CropEditor doesn't pass it, so the dropdown menu inherits the Select button's 12rem and stays clipped regardless of how much room the page has for a wider menu.How to reproduce
config/statamic/assets.php, definecrop_aspect_ratioswith at least one label longer than ~12rem. For example:Logs
Environment
Installation
Existing Laravel app
Additional details
Suggested fix is small and self-contained: in
resources/js/components/assets/Editor/CropEditor.vue, pass:adaptive-width="true"on the aspect-ratio<Select>(and optionally relax or drop thew-48constraint so the Select button itself can grow if a host project has unusually long labels). This is a one-line change, not a new feature —adaptiveWidthis already implemented on the UI primitive.