Close icon is ovrlapping the title text in modal in claro

Created on 15 April 2024, 7 months ago

Problem/Motivation

Steps to reproduce

1.use claro as frontend theme.
2.enable the layout builder module .
3.use layout build module for any block type .
4.Add a long title for any section .

Proposed resolution

There should be word-break as it is in olivero theme for body .

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

🐛 Bug report
Status

Active

Version

11.0 🔥

Component
Claro 

Last updated 1 day ago

Created by

🇮🇳India Sandeep Sanwale

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

Merge Requests

Comments & Activities

  • Issue created by @Sandeep Sanwale
  • Status changed to Needs review 7 months ago
  • 🇮🇳India Sandeep Sanwale

    Added the css so that close icon does not overlap the title.

  • Pipeline finished with Failed
    7 months ago
    Total: 406s
    #146609
  • Status changed to Needs work 7 months ago
  • 🇺🇸United States smustgrave

    MR appears to have issues.

    But not sure we want to add that css to the global body selector.

  • Pipeline finished with Success
    7 months ago
    Total: 1493s
    #147581
  • Status changed to Needs review 7 months ago
  • 🇮🇳India Sandeep Sanwale

    The MR issue has been resolved . I have added the css in body selector because in the olivero theme also this css added in body selector.Please review .

  • Status changed to RTBC 7 months ago
  • Hello @Sandeep, I've successfully reproduced the issue you were talking about, and the patch provided by you also got applied successfully. After applying the patch the issue is resolved now and there is a breathing space between the section title and the close button. So moving it to RTBC++.
    Attaching screenshots before and after applying the patch for reference!

  • 🇮🇳India gauravvvv Delhi, India

    I have a question? Why're we using Claro as a frontend theme?
    Claro is an admin theme. Do we support using Claro as frontend theme?
    FYI: This is working fine with Olivero frontend theme.

  • Hi, @Gauravvvv
    As far as I know there is no hard and fast rules regarding the usage of theme. Its completely subjective. Though I've also seen Claro being used as admin theme predominantly, but one might choose to opt it for their frontend theme based on their needs. So I think it'll be better to address the issue and fix it, no matter if someone is using it as frontend theme or admin theme, we should fix the flaws in the respective theme!

  • Status changed to Needs work 7 months ago
  • 🇫🇷France nod_ Lille

    We have the same rule in olivero, What's missing here would be to remove the hyphen rules in other places it is used in claro like the pcss files: media-library, vertical-tabs, form--managed-file, details,

  • Status changed to Needs review 7 months ago
  • 🇮🇳India gauravvvv Delhi, India
  • Status changed to Needs work 7 months ago
  • 🇫🇷France nod_ Lille

    comment in mr

  • Pipeline finished with Canceled
    7 months ago
    Total: 760s
    #148970
  • Status changed to Needs review 7 months ago
  • 🇮🇳India gauravvvv Delhi, India

    Feedback addressed.

  • 🇫🇷France nod_ Lille

    we can still remove the hyphens: auto from the managed file css, we just need to keep break-word since it's different from the default

  • Pipeline finished with Success
    7 months ago
    Total: 989s
    #148984
  • Pipeline finished with Success
    7 months ago
    Total: 986s
    #148995
  • Assigned to meghasharma
  • Issue was unassigned.
  • Status changed to RTBC 7 months ago
  • 🇮🇳India meghasharma

    Hello @here, Commit is successfully removing the hyphens: auto from css & .pcss.css files. Looks good to me., So moving it to RTBC++. Thanks!.

    • nod_ committed 98b21533 on 11.x
      Issue #3440959 by Sandeep Sanwale, Gauravvvv, sourojeetpaul, smustgrave...
    • nod_ committed 26e64d11 on 10.3.x
      Issue #3440959 by Sandeep Sanwale, Gauravvvv, sourojeetpaul, smustgrave...
  • 🇫🇷France nod_ Lille

    Committed 98b2153 and pushed to 11.x. Thanks!

  • Status changed to Fixed 7 months ago
  • Automatically closed - issue fixed for 2 weeks with no activity.

  • "body {hyphens: auto}" is in 10.3.x/11.x and git blame is pointing to this issue.
    Can someone check if the commits were merged correctly?

  • 🇺🇸United States kevinb623

    Echoing Lars' comment #21.

    We have had feedback from our editors regarding hyphens appearing in editor textareas. This is causing confusion between legit hyphen usage and those inserted by the CSS.

  • 🇺🇸United States trackleft2 Tucson, AZ 🇺🇸

    I am here to second kevinb623, and also, why do we not want WYSIWYG anymore? Let's keep the WYG as close to the WYS as we can.

Production build 0.71.5 2024