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
Environment
Laravel Version: 13.11.2
PHP Version: 8.4.20
Composer Version: 2.9.5
Environment: local
Debug Mode: ENABLED
Maintenance Mode: OFF
Timezone: UTC
Locale: en
Cache
Config: NOT CACHED
Events: NOT CACHED
Routes: NOT CACHED
Views: CACHED
Drivers
Broadcasting: log
Cache: file
Database: sqlite
Logs: stack / single
Mail: smtp
Queue: sync
Session: file
Storage
C:\Users\Josh\Herd\uams-statamic\public\storage: NOT LINKED
Statamic
Addons: 9
License Key: Not set
Sites: 255 (<redacted>)
Stache Watcher: Enabled (auto)
Static Caching: Disabled
Version: 6.19.0 PRO
Statamic Addons
el-schneider/statamic-admin-bar: 0.3.2
jacksleight/statamic-bard-mutator: 3.0.5
jacksleight/statamic-bard-texstyle: 4.1.0
statamic/eloquent-driver: 5.9.0
statamic/ssg: 4.1.0
stillat/relationships: 2.4.0
studio1902/statamic-peak-seo: 11.2.0
studio1902/statamic-peak-tools: 9.1.0
uams-web/wordpress-importer: dev-main
Statamic Eloquent Driver
Addon Settings: file
Asset Containers: file
Assets: eloquent
Blueprints: file
Collection Trees: file
Collections: file
Entries: file
Fieldsets: file
Form Submissions: file
Forms: file
Global Sets: file
Global Variables: file
Navigation Trees: file
Navigations: file
Revisions: file
Sites: file
Taxonomies: file
Terms: file
Tokens: 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.