Demo Shell block (advanced1) overflows card boundaries on mobile, causing horizontal scroll
Hello @TheOrcDev ,
I ran into a responsiveness bug on the advanced1 block demo page while browsing on an mobile phone. The issue does not appear on desktop viewports, so it may have been missed during development.
Environment
| Field |
Value |
| URL |
https://www.8bitcn.com/docs/blocks/advanced/advanced1 |
| Block |
Demo Shell (advanced1) |
| Affected file |
components/ui/8bit/blocks/advanced1.tsx |
| Affected viewports |
Mobile (tested on iPhone, also reproduced in browser DevTools) |
| Desktop behavior |
No issue, renders correctly |
Description
On mobile viewports, the terminal card inside the Demo Shell block does not clip its content. Text lines that are too long to fit within the card width overflow visually outside the card border, and in some cases extend beyond the page boundaries entirely. This triggers a horizontal scroll on the whole page, which breaks the layout experience.
The root cause appears to be missing overflow containment on the terminal card element and/or its parent container. The card renders with a fixed or unconstrained width that does not adapt to smaller screens, so long text lines such as file paths (e.g., components/ui/8bit/styles/retro.css, components/ui/8bit/blocks/hero1.tsx) bleed out.
Steps to Reproduce
- Open https://www.8bitcn.com/docs/blocks/advanced/advanced1 on a mobile device or in browser DevTools at a viewport width below ~430px.
- Observe the Demo Shell terminal card.
- Notice that lines containing long paths overflow the card border.
- Scroll horizontally to confirm the content extends beyond the page edge.
Screenshots
Figure 1 Browser DevTools simulation, full card view showing text overflowing card border on the right side.
Figure 2 Browser DevTools simulation, zoomed view confirming text escapes card boundaries.
Figure 3 iPhone (real device), portrait orientation, card centered but text overflowing right edge.
Figure 4 iPhone (real device), same page scrolled slightly, confirming horizontal scroll exists and content exceeds page width.
Expected Behavior
- The terminal card should contain all text within its boundaries at all viewport sizes.
- No horizontal scroll should be introduced by this block.
- Long path strings should either be clipped with
overflow: hidden, wrapped, or truncated gracefully within the card.
I am happy to open a pull request with the fix if that would be helpful. Just let me know if you have a preferred approach or any constraints around the styling, and I will follow them.
Thank you.
Demo Shell block (advanced1) overflows card boundaries on mobile, causing horizontal scroll
Hello @TheOrcDev ,
I ran into a responsiveness bug on the
advanced1block demo page while browsing on an mobile phone. The issue does not appear on desktop viewports, so it may have been missed during development.Environment
components/ui/8bit/blocks/advanced1.tsxDescription
On mobile viewports, the terminal card inside the Demo Shell block does not clip its content. Text lines that are too long to fit within the card width overflow visually outside the card border, and in some cases extend beyond the page boundaries entirely. This triggers a horizontal scroll on the whole page, which breaks the layout experience.
The root cause appears to be missing overflow containment on the terminal card element and/or its parent container. The card renders with a fixed or unconstrained width that does not adapt to smaller screens, so long text lines such as file paths (e.g.,
components/ui/8bit/styles/retro.css,components/ui/8bit/blocks/hero1.tsx) bleed out.Steps to Reproduce
Screenshots
Figure 1 Browser DevTools simulation, full card view showing text overflowing card border on the right side.
Figure 2 Browser DevTools simulation, zoomed view confirming text escapes card boundaries.
Figure 3 iPhone (real device), portrait orientation, card centered but text overflowing right edge.
Figure 4 iPhone (real device), same page scrolled slightly, confirming horizontal scroll exists and content exceeds page width.
Expected Behavior
overflow: hidden, wrapped, or truncated gracefully within the card.I am happy to open a pull request with the fix if that would be helpful. Just let me know if you have a preferred approach or any constraints around the styling, and I will follow them.
Thank you.