Fix table overflow

[pettinarip]

Description

Adds relative position to the table container to avoid overflows.

Related Issue

• Fixes The table is too large for small screens #12119
• Fixes Opcode table horizontal scrolling #7163

[netlify]

✅ Deploy Preview for ethereumorg ready!

Name	Link
🔨 Latest commit	dcb61d1
🔍 Latest deploy log	https://app.netlify.com/sites/ethereumorg/deploys/65cc749767e37b0008734b87
😎 Deploy Preview	https://deploy-preview-12128--ethereumorg.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[TylerAPfledderer]

@pettinarip it still does not seem to be fixed 🤔

[pettinarip]

@TylerAPfledderer thanks for testing. Could you double-check it? using incognito could be better, just to avoid any potential cache.

I tested this on ios (safari and chrome), linux & win (chrome & brave) and it is working fine. LMK what OS and browser you are testing.

[TylerAPfledderer]

@TylerAPfledderer thanks for testing. Could you double-check it? using incognito could be better, just to avoid any potential cache.

I tested this on ios (safari and chrome), linux & win (chrome & brave) and it is working fine. LMK what OS and browser you are testing.

So what I showed above is from Chrome on Android 14. Also breaking similarly in:

• Firefox Android 14 (Incognito)
• Chrome Android 14 (Incognito)
• Brave Windows OS (normal and private window)

[pettinarip]

@TylerAPfledderer tested it using BrowserStack and it worked fine in a Samsung Galaxy S24, android 14, Chrome & FF.

Its weird. I've also tested it in my personal android phone and worked too. Perhaps it is the browser version? 🤔 Im using Chrome v121.0.6167.164

[wackerow]

@pettinarip Yeah, I am seeing the same thing as @TylerAPfledderer... both on iOS (Brave and Safari), and Android (Chrome... technically Vanadium)... and also when mocking mobile sizes using a desktop browser.

The horizontal scroll only goes away if I remove the table entirely, otherwise it's definitely persisting for me.

[pettinarip]

@wackerow wow, this is even weirder haha

I've tested it on my personal phone (android), on a physical iphone, on different laptops, and they all work fine for me! what is going on! xD

Are we all using the correct preview deploy? it is https://deploy-preview-12128--ethereumorg.netlify.app/developers/docs/evm/opcodes

[TylerAPfledderer]

@wackerow wow, this is even weirder haha

I've tested it on my personal phone (android), on a physical iphone, on different laptops, and they all work fine for me! what is going on! xD

Are we all using the correct preview deploy? it is https://deploy-preview-12128--ethereumorg.netlify.app/developers/docs/evm/opcodes

@pettinarip actually look at this page:
https://deploy-preview-12128--ethereumorg.netlify.app/energy-consumption

[wackerow]

Yeah, +1 to @TylerAPfledderer... @pettinarip I am not having issues with the opcodes page, but I am getting horizontal scroll on the energy consumption page (caused by the table)

[pettinarip]

Aha! @TylerAPfledderer @wackerow I missed that case! 🙃 for some reason I always thought you were testing the opcodes page haha...my bad.

Ok! I've set a width to one of the containers that were used in the Static layout and that should fix the issue.

[TylerAPfledderer]

Aha! @TylerAPfledderer @wackerow I missed that case! 🙃 for some reason I always thought you were testing the opcodes page haha...my bad.

Ok! I've set a width to one of the containers that were used in the Static layout and that should fix the issue.

Good with me!

[minimalsm]

Fixed for me now :)

[wackerow]

Working great! Thanks @pettinarip!