Skip to content

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

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

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions