Skip to content

fix: content overflow on small screen - #1948

Merged
bjohansebas merged 6 commits into
expressjs:gh-pagesfrom
ShubhamOulkar:table
Jul 3, 2025
Merged

fix: content overflow on small screen #1948
bjohansebas merged 6 commits into
expressjs:gh-pagesfrom
ShubhamOulkar:table

Conversation

@ShubhamOulkar

@ShubhamOulkar ShubhamOulkar commented Jun 12, 2025

Copy link
Copy Markdown
Member

Note: Grid layout is introduced in our design

closes #1831

preview https://deploy-preview-1948--expressjscom-preview.netlify.app/en/5x/api

image

@ShubhamOulkar
ShubhamOulkar requested review from a team as code owners June 12, 2025 09:06
@netlify

netlify Bot commented Jun 12, 2025

Copy link
Copy Markdown

Deploy Preview for expressjscom-preview ready!

Name Link
🔨 Latest commit d1ac72e
🔍 Latest deploy log https://app.netlify.com/projects/expressjscom-preview/deploys/6864b8f861f5d00008546455
😎 Deploy Preview https://deploy-preview-1948--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.

@ShubhamOulkar ShubhamOulkar self-assigned this Jun 12, 2025
@ShubhamOulkar ShubhamOulkar added enhancement design Change, update, or fix for site UI (not content) labels Jun 12, 2025

@ShubhamOulkar ShubhamOulkar left a comment

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

LGTM. I suggest fast-tracking this PR, as the overflow issue is affecting a all of users.

</table>
<div class="methods-columns">
<ul>
<li><code>checkout</code></li>

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

I think we should keep the Markdown as it is. Jekyll performs several processes behind the scenes, especially for code highlighting, so I don't think we should move this to HTML.

@ShubhamOulkar ShubhamOulkar Jun 26, 2025

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

I don't think we should move this to HTML.

Tables aren't responsive by default, and the original layout caused horizontal overflow on small screens. I used semantic HTML <ul> with Flexbox to solve this. It’s now responsive and easier to maintain for future design updates.

The only downside is having HTML in Markdown, which may slightly affect doc editing for contributors — but I think the improved UX and maintainability are worth it.

I think we should keep the Markdown as it is

As an alternative, we could also wrap Markdown lists in a styled <div class=""> to avoid full HTML, but that still requires some custom CSS.

<div class="">
  - mkcol
  - move
  - m-search
  - notify
  - options
  - patch
  - post
</div>

We need to remove this unnecessary table. Let me know if you have any concerns with this approach.

@bjohansebas bjohansebas left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

LGTM, Sorry for the delay.

@bjohansebas
bjohansebas merged commit 7743e0f into expressjs:gh-pages Jul 3, 2025
12 checks passed
@ShubhamOulkar
ShubhamOulkar deleted the table branch July 3, 2025 02:32
@ShubhamOulkar

ShubhamOulkar commented Jul 3, 2025

Copy link
Copy Markdown
Member Author

Sorry for the delay.

Do not mention, Understandable 😊

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

design Change, update, or fix for site UI (not content) enhancement

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Fix Content Overflow on API Pages for Mobile Devices

2 participants