Skip to content

Conversation

@ShubhamOulkar
Copy link
Member

@ShubhamOulkar ShubhamOulkar commented Jun 12, 2025

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
Copy link

netlify bot commented Jun 12, 2025

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
Copy link
Member Author

@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. 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
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.

Copy link
Member Author

@ShubhamOulkar ShubhamOulkar Jun 26, 2025

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.

Copy link
Member

@bjohansebas bjohansebas left a comment

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
Copy link
Member Author

ShubhamOulkar commented Jul 3, 2025

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