Contrib.social

Responsive tabs appearing on larger screen sizes and inconsistently

Open on Drupal.org →
Created on 16 December 2020, almost 5 years ago
Updated 16 February 2023, over 2 years ago

Problem/Motivation

I had a client who complained that some of the tabs were disappearing on one of their admin pages. When I reviewed it with him with screen sharing, I saw that the responsive tabs were kicking in when his browser window was still quite large. I pointed out that he could click on the "..." to see the rest, and then proceeded to test in various browsers with different settings.

We considered things like desktop scaling (Windows) and browser zoom level, both of which seemed to affect it each in different ways. He found his solution was to zoom to 67% in browser and then he could see all the tabs.

I tested in Safari, Chrome, Brave and Edge on macOS, and found that it only switched to responsive tabs at a reasonably small size. However, just now in Safari, I opened my web inspector to shrink the window down to test it again, and when I closed the inspector it kept the responsive tabs showing and did not switch to regular tabs (see attached screenshot).

When I tested Brave and Edge on Windows 10, it ONLY went to responsive tabs when I made the window extremely small, and my desktop scaling did not seem to make a difference (I have that on a 4K TV, normally with desktop scaled to 225%).

So something about the script that determines when to switch between responsive and standard tabs is wonky and works inconsistently in different browsers and operating systems.

Steps to reproduce

This may be hard to reproduce, depending on your environment and browser etc. However, I was able to see it in Windows 10 in Chrome (latest version) and Edge (latest version) working very inconsistently. Chrome for my client was, as I said, switching to responsive tabs when his window was still pretty wide, while Edge would only go responsive when he made the window extremely small.

Browser zoom level also made a difference, so test with various browser in different operating systems with different zoom levels to see the inconsistencies in action.

🐛 Bug report
Status

Needs review

Version

1.0

Component

Code

Created by

🇨🇦Canada teknocat

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

Merge Requests

Comments & Activities

Not all content is available!

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

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024