[DevTools Bug]: Settings panel layout broken

[thany]

Website or app

https://www.enexis.nl/

Repro steps

Website is actually irrelevant, but required.

1. Open the devtools
2. Press the settings button.
3. Observe the layout being broken (causing horizontal scrollbar).

Screenshot

How often does this bug happen?

Every time

DevTools package (automated)

No response

DevTools version (automated)

No response

Error message (automated)

No response

Error call stack (automated)

No response

Error component stack (automated)

No response

GitHub query string (automated)

No response

[bvaughn]

@thany Can you provide some more information? Browser (and version), operating system (and version), DevTools extension version, etc.

I can't reproduce this.

[thany]

Firefox 89, Windows 10, latest extension. It's really not that far-fetched.

[bvaughn]

@thany I'm not sure why there's hostility in your responses (both to this issue and #21717). This is a free software product and I'm trying to help you. Providing basic info like browser and operating system version along with a bug report is generally useful, regardless of how far fetched you think the configuration is 😄

[heytulsiprasad]

Not sure if this is confirmed by anyone else, but I can reproduce this on Firefox. I'll paste my device information so you can try that out in order to repro.

How it looks:

Machine: Windows 10 Home
Browser: Firefox version 89.0.1 (64-bit)

Let me know if you need more details, I'll be more than happy to take this up.

Update: It also happens on chrome dev tools when you resize your dev tools to some specific width.

Google Chrome | 91.0.4472.114 (Official Build) (64-bit)
OS | Windows 10 OS Version 2009 (Build 19043.1052)

[bvaughn]

If I enable scroll bars on OS X, I can also reproduce this in Firefox. Should be able to fix it then. (Did not have access to a Windows machine to test with.)

Edit 1: It looks like this is caused by the tab bar containing too many tabs now (General, Debugging, Components, Profiler, and "x" button). Should be an easy fix.

Edit 2: I think the reason for the difference between Firefox and Chrome is that the (supposedly hidden) <input type=radio> buttons used for the Tab bar accessibility isn't 0 width for Firefox.

[thany]

@thany I'm not sure why there's hostility in your responses (both to this issue and #21717). This is a free software product and I'm trying to help you. Providing basic info like browser and operating system version along with a bug report is generally useful, regardless of how far fetched you think the configuration is 😄

Sorry mate, but I don't understand the question then. You asked for browser & OS, and I gave that exact answer. That's really, honestly, genuinely, everything needed to a repro. I've seen this on every pc running Windows 10 + Firefox so far, which is why it's not that far-fetched. I don't see how that's hostile.

And actually, we're trying help each other, aren't we 😉

Also how am I responding hostile in #21717? I'm suggesting a fix. I'm Dutch, so I'm just being direct, not hostile at all. It's my culture, please respect that 🤗