explorer icon indicating copy to clipboard operation
explorer copied to clipboard

Layout shifts when switching tabs due to scrollbar

Open ginny-stacks opened this issue 2 weeks ago • 1 comments

When switching between tabs (i.e transactions to tokens here https://explorer.hiro.so/address/SP3EG6JX2R8PTY81J8515W7KC7Y92KEYKM97ZBHS4?chain=mainnet&tab=transactions), the page layout shifts horizontally. This happens because some tabs require vertical scrolling (scrollbar visible) while others do not, causing the viewport to “jump” when changing tabs.

https://github.com/user-attachments/assets/6d66fd0a-e697-4ad8-a5a3-0a43bdfa660a

✅ Expected behavior Switching tabs should not cause any horizontal layout shift, regardless of whether the tab content overflows vertically.

💡 Proposed solution Reserve space for the scrollbar at all times using CSS:

html {
  scrollbar-gutter: stable;
}

This prevents viewport width changes when the scrollbar appears or disappears.

ginny-stacks avatar Dec 15 '25 10:12 ginny-stacks