Dropdown button display becomes narrow when text is long

Created on 5 October 2023, about 1 year ago
Updated 16 August 2024, 3 months ago

Problem/Motivation

Claro theme has been great so far, but some layout issues exist.
My project is currently using Workbench Moderation to control moderation states. New buttons underneath the standard Save and Publish button are added to the dropdown. When button text is long and has a dropdown menu, the dropdown text is cut short also save button and preview button are not aligned with each other.

Steps to reproduce

  1. Install 10.1.x version of Drupal core
  2. Download & Enabled contributed Workbench Moderation module.
  3. Enabled the moderation states for the Article content type.
  4. Add/Edit the article content, you can see the dropdown UI issue.

Proposed resolution

Update CSS so dropdown button text is not cut off.

Remaining tasks

Create patch to fix the issue.

User interface changes

Before
With Workbench Moderation

API changes

Data model changes

Release notes snippet

🐛 Bug report
Status

Needs work

Version

11.0 🔥

Component
Claro 

Last updated about 12 hours ago

Created by

🇵🇭Philippines gslente

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • Issue created by @gslente
  • 🇮🇳India heykarthikwithu Bengaluru 🌍

    Hi @acret_seth,

    With Workbench Moderation to control moderation states & Claro theme the UX looks different (attached the screenshot)

  • 🇵🇭Philippines gslente

    Hello @heykarthikwithu

    Sorry, I think you might have confused the core Workflows module with the contrib Workbench Moderation module.

    I tested a fresh installation of Drupal and enabled contrib Workbench Moderation module.
    I enabled moderation states for the Article content type.
    I used the Claro theme for admin. The dropdown button experiences the same issue still.

    (Attached a screenshot below)

  • 🇮🇳India heykarthikwithu Bengaluru 🌍

    Hi @acret_seth, Able to reproduce the issue with contributed Workbench Moderation module.

    But, this issue should be raised as part of contributed Workbench Moderation module right?
    (template level design for the dropdown can be handled within the contributed module)

  • First commit to issue fork.
  • last update about 1 year ago
    Custom Commands Failed
  • @viren18febs opened merge request.
  • Status changed to Needs review about 1 year ago
  • 🇮🇳India viren18febS

    Hi @acret_seth,

    I have fixed the issue & MR generated, please review.

  • last update about 1 year ago
    29,654 pass
  • Status changed to Needs work about 1 year ago
  • 🇺🇸United States smustgrave

    Screenshots should be added to the issue summary.

    Also steps to reproduce without a contrib module should also be added.

  • 🇮🇳India BhumikaVarshney Delhi

    Working on this issue as a part of Claro Contribution Day.

  • 🇮🇳India rifas-ali-pbi Kerala

    This is having layout issue too. Save button and preview button is not aligned each other. Attaching screenshot for the issue.

  • Added standard template and updated IS.
    Thanks

  • 🇮🇳India BhumikaVarshney Delhi

    Hi @acret_seth,
    From the merge request #7 the layout issue mentioned in the summary is getting resolved.
    please refer the screenshot after taking pull.
    Thanks

  • 🇺🇦Ukraine v.dovhaliuk

    I provide the patch file since using merge requests as patches is a security issue.

  • last update 5 months ago
    Custom Commands Failed
  • achap 🇦🇺

    The layout issue mentioned in #10 is fixed in https://www.drupal.org/project/drupal/issues/3341669 🐛 Dropbuttons and regular buttons are misaligned Fixed

    Even though workbench_moderation does cause this with its long button labels I feel like it should be fixed in core as I don't see a reason why the list items in the dropbutton shouldn't be at least as wide as the parent item? I also found on mobile that even the main button gets cut off when the text is too long (see screenshot). Shouldn't it wrap?

Production build 0.71.5 2024