Vertical tabs: Force websites to recognize screen size minus tab bar

[superphysics]

I love vertical tabs, but one issue is that many websites (Chrome Extensions store is one example) are apparently coded to fit to the maximum screen width, not the maximum window width. With vertical tabs, the website doesn't fit horizontally, requiring a horizontal scroll (see below snapshots).

Is there a way to force Vivaldi to expose the screen width minus tabs width when websites query to obtain screen width for rendering?

[enc0re]

Interesting finding.

I would say that page is poorly written and hardcoded with too big minimum width without any dynamic resizing in mind.

Luckily I didn't faced any page where horizontal scrollbar appeared. All of them are dynamically resizing with window. Maybe some specific page like OpenManage from DELL or vSphere Client, but I think I even didn't faced it there too.

However I'm curious for possible solutions.

[mib2berlin]

@superphysics
Hi, can you tell us about your screen resolution, Vivaldi zoom settings?
I cant get the page to scroll even a panel is open + tabs.

Cheers, mib

[superphysics]

This post is deleted!

[superphysics]

Interesting finding.

I would say that page is poorly written and hardcoded with too big minimum width without any dynamic resizing in mind.

Luckily I didn't faced any page where horizontal scrollbar appeared. All of them are dynamically resizing with window. Maybe some specific page like OpenManage from DELL or vSphere Client, but I think I even didn't faced it there too.

However I'm curious for possible solutions.

I'm curious, too. I've actually run into quite a few sites like that, never kept a record. But what quite frustrated me is that the one I'm showing in the snapshots is actually an official Google Chrome related site. If they can't code cleanly, we certainly can't expect 99% of the internet to do so! And thus I'm panning around for a solution.

[superphysics]

@superphysics
Hi, can you tell us about your screen resolution, Vivaldi zoom settings?
I cant get the page to scroll even a panel is open + tabs.

Cheers, mib

My screen resolution is 1366 x 768, zoom is 100%, window maximized.

[mib2berlin]

@superphysics
Hm, I am on 1600x900 which is more or less the same ratio and I have minimum font size set to 21, it's really huge but no scroll bar.
No idea why it is so, I fear Vivaldi cant do anything in this case.

Cheers, mib

[superphysics]

Maybe there's something in vivaldi://vivaldi-urls/ that could help. Maybe one of the more pro Vivaldi users would know some trick to do this

[Zalex108]

@superphysics

Hi,

--

Please,
On each report add:

• Vivaldi Version: |
• Since when happens: |
• OS / Version / DE |

--

First of all,
Please try on Clean Profile, then the needed nexts.
Point 3

Start with the Basic Desktop Troubleshooting Steps.

Extras

• Clean Site Data
• Clean Service Workers
  vivaldi://serviceworker-internals/
• Reset Flags
  vivaldi://flags [If personally enabled]
• Disable CSS / JS Mods

---

Regarding Bug Hunting
Regarding Downgrades

[superphysics]

@Zalex108 Hi - this is not a bug (at least, not a Vivaldi bug). You can recreate the same effect by simply resizing the Vivaldi window away from maximized, to anything with less than 100% screen width.

The same happens when I turn on vertical tabs in another browser, such as Edge, and is almost certainly happening because poorly coded sites are using the screen width rather than window width.

My hope was that Vivaldi could offer a way to force the screen width to be forced to window width, regardless of the actual screen width, or alternately, screen width minus sidebar/vertical tab bar width. You get the drift, I hope.

[Zalex108]

@superphysics

Yes,
But since not happening to others, because of that.

[superphysics]

@Zalex108 Unless I misunderstood mib2berlin or enc0re, it appears they're affirming same/similar issues. Could you try the same? https://chromewebstore.google.com/category/extensions

[Zalex108]

@superphysics said in Vertical tabs: Force websites to recognize screen size minus tab bar:

@Zalex108 Unless I misunderstood mib2berlin or enc0re, it appears they're affirming same/similar issues. Could you try the same? https://chromewebstore.google.com/category/extensions

I've understood the opposite.

Not at desktop till later.

[superphysics]

@Zalex108 Hello again - did you get a chance to try on the desktop? I tried again on a virtual computer with a clean profile, unfortunately same, results. But that's not surprising, since it does seem like a website thing, not really Vivaldi's fault.

Still hoping against hope there's some script or something that could get Vivaldi to expose the effective window width when queried for screen width

[Zalex108]

@superphysics

Hi,
It happens here as well on a CP [Clean Profile].

[Pathduck]

@superphysics You need to read up on the concept of a viewport.
https://en.wikipedia.org/wiki/Viewport
https://www.w3schools.com/css/css_rwd_viewport.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/Viewport_concepts

If you actually manage to "trick" sites into believing your viewport is larger than it actually is, you'll just end up with a lot of horizontal scroll bars.

And no, I'm not writing a script for you - do your own research

[superphysics]

@Pathduck My apologies - perhaps I could have chosen my words better - I wasn't looking for a script, per se. I have dabbled in web design in the past, and am (slightly) familiar with how websites respond to visible window area (viewport), and screen size, though the exact term i.e. viewport, had escaped me - appreciate the reminder.

What I believe is happening, is that some/many websites (such as the mentioned website) assume that a browser window will be running maximized or assume a specific width / height ratio, equal to the screen width. They are not properly responsive to the viewport, but instead to the screen size. Vertical tabs or non-maximized windows throw that assumption out of the window (pun intended). The end result is horizontal scrollbars.

What I was wondering was, can Vivaldi force the screen size parameters visible to websites (perhaps by way of some buried, hidden flag) to a specific, different number? Specifically, the response to JS window.screen.width. Else, I haven't had time to read on how extensions work, but I guess an extension could probably do that, and I really don't have enough OCD to spend time writing one.

P.S. The easiest workaround (the one I'm currently using for badly coded sites), at least on a site-by-site basis, and on a browser that remembers zoom levels, is to zoom out a bit, perhaps 80-90%.

[Pathduck]

@superphysics said in Vertical tabs: Force websites to recognize screen size minus tab bar:

Vertical tabs or non-maximized windows throw that assumption out of the window (pun intended). The end result is horizontal scrollbars.

A lot of browsers now have side panels or side tabs. And a lot of users use a non-maximized window. If the website can't deal with that, it's a badly coded website.

What I was wondering was, can Vivaldi force the screen size parameters visible to websites (perhaps by way of some buried, hidden flag) to a specific, different number?

Of course not - Vivaldi is a browser, it's obligated to tell the site your actual viewport, i.e. the area available for display of the content.

Vivaldi is also a Chromium browser, so any flags in Vivaldi would be exactly the same as in any other such browser, like Edge, Chrome, Opera etc. There is no magic setting to do this in Vivaldi.

Possibly it might be doable with a userscript, but again in my opinion it would be pointless and you'd end up with more horizontal scrollbars because the site thinks your viewport is wider than it actually is. Unless you tell the site the viewport is smaller than it actually is, then you'd end up with a lot of strange looking sites... some sites will probably just serve you the mobile site.

I guess your topic just makes zero sense to me

[superphysics]

@Pathduck said in Vertical tabs: Force websites to recognize screen size minus tab bar:

A lot of browsers now have side panels or side tabs. And a lot of users use a non-maximized window. If the website can't deal with that, it's a badly coded website.

Precisely - that's exactly what it is! Websites responding not to viewport area, but only screen-width. Sadly, that example is Google Chrome's own extensions site

Vivaldi is also a Chromium browser, so any flags in Vivaldi would be exactly the same as in any other such browser, like Edge, Chrome, Opera etc. There is no magic setting to do this in Vivaldi.

Vivaldi exposes a lot more of its internals than Edge, Chrome, maybe even Opera. A person can dream, no?

I guess your topic just makes zero sense to me

Hahaha, potentially! To each their own! For me, looking at those two snapshots in the very first post still bugs me every time

[barbudo2005]

@superphysics

Look this links:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries

https://www.w3schools.com/css/css3_mediaqueries.asp