bug: buttons half-unclickable in the expanded details popup in Chrome

[maximedrouhin]

(Problem encountered on Windows 11, Chrome 128.0.6613.138)

The green area is unclickable, causing issues when clicking buttons on the right.

The problem is this property (attached to the expanded details popup that has class="sd-detailsPopup sd-focusPopup"), it seems there's an invisible vertical scrollbar that takes up 16.667 pixels on the right, and that's what causes issues.

overflow: hidden auto !important

It can be fixed by using this instead:

overflow: hidden hidden !important

I'm not sure if this should be edited directly, of if you rely on some programming logic/some framework to generate this property, but given the info given, I think fixing this shouldn't be a too hard fix ^^

[digas99]

I can't recreate the issue, but I will change the approach on those elements to prevent that padding to affect those buttons. I can't apply your idea (which will in fact remove the padding) because I need the area to be scrollable.
I will, instead, apply the overflow auto only to the element that actually needs it, leaving those buttons on the right in the clear.

[maximedrouhin]

Oh, you're right, I didn't notice it disabled scrolling 😂

This sounds like it should fix the issue ^^

After testing this a bit more, it looks like I don't have this issue on all websites, I think it's related to websites that have a custom scroll bar. I had this problem in ChatGPT, it's there I took the screenshot.

The problem seems to be that the CSS of the ChatGPT website affects the injected code, so the scrollbar styling meant to be for the ChatGPT website applies to your scrollbar.

I'm not sure if there's a way to stop the CSS from the parent website to affect your popup, though that would be a nice way to prevent similar future issues with other websites.

[digas99]

Yes, unfortunately, because the popup is "injected" onto the web page, it takes any CSS from that page that hasn't been overriden by me. At the time, I tried applying some "unsets" with "!important" to some properties of the popup, thus overriding whatever is set by the web page, but I must have missed some.
I guess a cleaner approach would be to put the popup on an iframe, maybe. Or there might be another way to "isolate" the popup, but I haven't really found anything.

[maximedrouhin]

I think Shadow DOM might be what you're looking for!

https://developer.mozilla.org/docs/Web/API/Web_components/Using_shadow_DOM

This reply from ChatGPT 4o should help if you want to use it:

https://chatgpt.com/share/66e88d7e-e8f4-800a-a4bb-de7d02794116

[digas99]

Oh, it might actually be the solution. I will look into it, thanks!

[maximedrouhin]

No, thank you for your hard work on this extension ^^

[maximedrouhin]

Perfect, that fixes it! Should I create an issue for using Shadow DOM to prevent future bugs related to the CSS of the parent page?

[digas99]

Yes, go for it, it helps me remember it later. Thanks!

[maximedrouhin]

Done -> #40