Skip to content

CP asset crop editor: aspect-ratio Select button truncates long labels (w-48 fixed width) #14703

@joshdaugherty

Description

@joshdaugherty

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

  1. 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',
        ],
    ],
  2. In the CP, open an image asset and click the crop editor.
  3. 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions