Problem/Motivation

I couldn't find an issue about it, so decided to create a new one.
When you create a lot of view displays and display them horizontally, CSS breaks and we can see only the first part of the view modes list.

view-modes-bug

Steps to reproduce

Create a lot of view displays or displays with long names to fill the whole container width.

Proposed resolution

Adds the flex-wrap: wrap; CSS property.
Then, it will look like this:
fix

CommentFileSizeAuthor
#9 Screenshot at Aug 01 12-19-22.png305.97 KBshweta__sharma
#8 Screenshot 2023-08-01 at 10.43.54 AM.png164.38 KBkeshavv
2023-07-27_17-55.png69.54 KB_shy
2023-07-27_17-53.png69.97 KB_shy

Issue fork drupal-3377490

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

_shY created an issue. See original summary.

_shY opened merge request !4496

_shy’s picture

_shy
Primary language Ukrainian
Location Ukraine, Lutsk 🇺🇦
commented
Status: Active » Needs review

Gauravvvv made their first commit to this issue’s fork.

gauravvvv’s picture

gauravvvv commented

Updated the tabs.pcss.css file as it was not updated earlier

smustgrave’s picture

smustgrave commented
Status: Needs review » Needs work
Issue tags: +Needs subsystem maintainer review

CC failure. Also think this will need claro maintainer sign off on.

gauravvvv’s picture

gauravvvv commented
Status: Needs work » Needs review

Fixed CC failure.

keshavv’s picture

keshavv commented
StatusFileSize
new Screenshot 2023-08-01 at 10.43.54 AM.png164.38 KB

I have tried to replicate the issue but in my case, Tabs are converted to vertical if I add more view modes.
Is there anything else that needs to be done to reproduce the issue?

Screenshot

shweta__sharma’s picture

shweta__sharma commented
StatusFileSize
new Screenshot at Aug 01 12-19-22.png305.97 KB

Hi, I am also facing the same experience, If I add more view modes then the horizontal tabs are converted in to vertical tabs.

_shy’s picture

_shy
Primary language Ukrainian
Location Ukraine, Lutsk 🇺🇦
commented
Status: Needs review » Closed (won't fix)

I reviewed the code and found that styles were broken due to custom js, which does not remove .is-horizontal class, that's why view modes are displayed in one line and move out of the container.

Thank you, everyone, for your efforts, there is nothing to fix.

_shy’s picture

_shy
Primary language Ukrainian
Location Ukraine, Lutsk 🇺🇦
commented
Status: Closed (won't fix) » Closed (works as designed)