Primary tabs disappear instead of collapsing if there are too many of them for the screen width

Created on 31 May 2024, 6 months ago
Updated 15 July 2024, 5 months ago

Problem/Motivation

For sites with many primary tabs, the breakpoint that collapses the tabs is wider than the breakpoint that removes the is-horizontal class. The result is tabs that disappear instead being available in a collapsed navigation.

Steps to reproduce

1. Create an entity type with 12 or so primary tabs and view the page on typical 13-inch laptop.

As seen in the screenshot, the use case as having this many primary tabs on entity type is pretty rare. Even in this scenario, our editors rarely see the issue because we don't give them access to delete or devel. That said, the tabs should always default to collapsing rather than disappearing into a line on screen.

Proposed resolution

TBD

Remaining tasks

1. Create a merge request with a proposed fix.

User interface changes

  • Primary tabs within Claro module could appear collapsed on more device widths.

API changes

None.

Data model changes

None.

Release notes snippet

TBD.

🐛 Bug report
Status

Needs work

Version

11.0 🔥

Component
Claro 

Last updated about 6 hours ago

Created by

🇺🇸United States joshuami Portland, OR

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

Merge Requests

Comments & Activities

  • Issue created by @joshuami
  • 🇮🇳India sanket.tale

    @joshuami Could you please add the appropriate reproducible steps. I was not able to reproduce this problem in my local.

    Steps to reproduced

    - Go to /admin/structure/views and create views
    - In the page settings add path - admin/content/{node name} and menu - select Menu tab and add details and save it.

  • 🇺🇸United States joshuami Portland, OR

    @sanket.tale, I didn't see the issue on views with menu settings set by a view. It was in views off of an entity type were the the tabs were added via a mymodule.links.tasks.yml that defined the tabs using the menu api per https://www.drupal.org/docs/drupal-apis/menu-api/providing-module-define... .

    This is similar to how the media module in core adds the views.view.media.yml to the system.admin_content base route:

    entity.media.collection:
      title: Media
      route_name: entity.media.collection
      base_route: system.admin_content
      weight: 10
    

    If you create the multiple views and add them via a custom module in mymodule.links.tasks.yml, I think you should be able to reproduce, but I haven't tried this on a view that has both primary and secondary menu tabs like /admin/content.

  • First commit to issue fork.
  • Status changed to Needs work 5 months ago
  • Merge request !87113451656: Primary tabs overflow → (Open) created by Unnamed author
  • Pipeline finished with Success
    5 months ago
    Total: 469s
    #219398
  • Status changed to Needs review 5 months ago
  • Status changed to Needs work 5 months ago
  • 🇺🇸United States smustgrave

    Since this is talking about disappearing tabs sounds like we should have test coverage for such a scenario.

Production build 0.71.5 2024