Wrapped long tag text on small screens

Created on 4 April 2025, 20 days ago

Problem/Motivation

Since Tagify offers some nice features like reordering by drag and drop, I would like to extend its use beyond tagging texts to using it a default widget for (content) entity reference fields.

Referenced content entities can have longer texts that are pre-wrapped in the CSS by the .tagify__tag>div>* rule. This does not look nice in a form on small screens, as shown in the picture below.

Question: could we abandon the "white-space: pre-wrap;" setting (at least on small screen devices)?
Some other CSS tweaks may also be necessary in this case (like restyling the remove button).

Feature request
Status

Active

Version

1.2

Component

Code

Created by

🇮🇪Ireland marksmith

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

Comments & Activities

  • Issue created by @marksmith
  • First commit to issue fork.
  • @gxleano opened merge request.
  • 🇪🇸Spain gxleano Cáceres

    Thanks @marksmith to report this issue.

    I've introduced some changes which are going to fix the problem in mobile.

    See evidences:

    Maybe you could take a look at check if everything is working fine in your end.

  • 🇪🇸Spain gxleano Cáceres
  • 🇮🇪Ireland marksmith

    Thank you, @gxleano. I've tested quickly the emendations, by pasting the new css code adjustments into tagify.css.

    Since part of the css code is loaded into tagify via cdn (tagify.min.css, as defined in libraries.yml), there was some interaction with the max-width set there to 100%, for both the .tagify and the .tagify>div selectors. (I've tried to remove interference by unflagging the css grabbed from the cdn).

    Anyway, there is, as far as I can see, still some room for improvement.
    1. In the Claro theme, the tagify__tag-remove-button shrinks.
    2. In the Gin theme, the new max-width settings are not applied correctly (remove button is also missing for long texts). If I force it, (via !important), the max-width is also set in case of texts where it shouldn't (like short tags).

    See the attached screenshots for the same form:

    In Claro:

    In Gin:

  • 🇪🇸Spain gxleano Cáceres
  • 🇪🇸Spain gxleano Cáceres
  • 🇪🇸Spain gxleano Cáceres

    Thanks for the review @marksmith!

    Now it should works as expected.

  • 🇮🇪Ireland marksmith

    Thanks for your efforts! Almost there, except that the ellipsis (...) also appears for short tags (where it shouldn't), but only in case the tag contains no other included elements, like ID or info label. See attached screenshot (Gin and Claro is the same).

    I think it's a .tagify__tag-text selector issue (set to max-width: 75% !important), which should be 100% if there are no other included elements, and 75% with included elements (like info label).

  • 🇪🇸Spain gxleano Cáceres
  • 🇪🇸Spain gxleano Cáceres
Production build 0.71.5 2024