Skip to content

fix: add horizontal scroller on middleware table to prevent overflow on the small screen#1968

Merged
ShubhamOulkar merged 3 commits intoexpressjs:gh-pagesfrom
Mohit5Upadhyay:fix-middleware-func-image-responsiveness
Jul 18, 2025
Merged

fix: add horizontal scroller on middleware table to prevent overflow on the small screen#1968
ShubhamOulkar merged 3 commits intoexpressjs:gh-pagesfrom
Mohit5Upadhyay:fix-middleware-func-image-responsiveness

Conversation

@Mohit5Upadhyay
Copy link
Copy Markdown
Contributor

Description

This PR resolve issue: #1967 there middleware guide contains a table with an image and callouts that exceeds the viewport width on mobile devices, causing horizontal overflow and breaking layout.

Solve

  • Wrapped the diagram table in a horizontally scrollable div (.mw-fig-scroll) with overflow-x: auto based on media-query
horizontal-scrollbar.mp4

This preserves the readability of the middleware diagram without distorting the layout on mobile.

Closes #1967

@Mohit5Upadhyay Mohit5Upadhyay requested a review from a team as a code owner July 8, 2025 17:06
@netlify
Copy link
Copy Markdown

netlify Bot commented Jul 8, 2025

Deploy Preview for expressjscom-preview ready!

Name Link
🔨 Latest commit e976cf9
🔍 Latest deploy log https://app.netlify.com/projects/expressjscom-preview/deploys/68786ad14764480008af89c2
😎 Deploy Preview https://deploy-preview-1968--expressjscom-preview.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@Mohit5Upadhyay
Copy link
Copy Markdown
Contributor Author

Hi team 👋

This PR resolves #1967 , where the middleware guide diagram was overflowing the mobile viewport and causing layout issues.
I’ve wrapped the table containing the diagram in a horizontally scrollable container.

Let me know if you’d prefer any adjustments or some tweaks..
Thanks!

Copy link
Copy Markdown
Member

@ShubhamOulkar ShubhamOulkar left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All the changes are irrelevant. Just use predefined CSS class table-scroller.

I just checked it looks good.
image

Comment thread en/guide/writing-middleware.md Outdated
@Mohit5Upadhyay
Copy link
Copy Markdown
Contributor Author

Hi @ShubhamOulkar,

I’ve updated the markup to use the .table-scroller class as suggested and removed the custom CSS wrapper.

All the changes are irrelevant. Just use predefined CSS class table-scroller.

Thanks!

@ShubhamOulkar ShubhamOulkar changed the title fix(docs): add horizontal scroll wrapper to middleware diagram to prevent overflow on mobile (#1967) fix: add horizontal scroller on middleware table to prevent overflow on the small screen Jul 17, 2025
Copy link
Copy Markdown
Member

@ShubhamOulkar ShubhamOulkar left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@ShubhamOulkar ShubhamOulkar merged commit 0f143c1 into expressjs:gh-pages Jul 18, 2025
12 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

The image explaining the middleware guide is getting overflowed and goes out of the screen context in mobile view

2 participants