Skip to content

Fix the positioning of the markdown dropdown #344

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
JakeSCahill merged 1 commit into from
Nov 11, 2025
Merged

Fix the positioning of the markdown dropdown #344

JakeSCahill merged 1 commit into from
Nov 11, 2025

Conversation

@JakeSCahill
Copy link
Contributor

@JakeSCahill JakeSCahill commented Nov 11, 2025

This pull request updates the positioning logic for the dropdown menu in the markdown-dropdown component to improve its behavior, especially on mobile devices.

Dropdown menu positioning improvements:

  • Set the position property of .markdown-dropdown-menu to absolute to ensure proper overlay behavior.
  • On mobile viewports (within a media query), changed .markdown-dropdown-menu alignment from right: 0 to left: 0 for better accessibility and layout consistency.

@netlify
Copy link

netlify bot commented Nov 11, 2025 •
edited
Loading

✅ Deploy Preview for docs-ui ready!

Name Link
🔨 Latest commit 582a838
🔍 Latest deploy log https://app.netlify.com/projects/docs-ui/deploys/691376ba5de30900089cb453
😎 Deploy Preview https://deploy-preview-344--docs-ui.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse		 1 paths audited
Performance: 27 (no change from production)
Accessibility: 93 (no change from production)
Best Practices: 100 (no change from production)
SEO: 88 (no change from production)
PWA: -
View the detailed breakdown and full score reports

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

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Nov 11, 2025 •
edited
Loading

📝 Walkthrough

Walkthrough

CSS modifications to the dropdown menu positioning behavior. The .markdown-dropdown-menu class now uses absolute positioning anchored to its nearest positioned ancestor with a top offset of calc(100% + 0.25rem) and right alignment. A responsive breakpoint at 768px pixels adjusts the menu to left-align on smaller viewports by overriding the right property with left: 0.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

  • Single file modified with straightforward CSS property additions
  • No complex logic or control flow changes
  • Purely layout and positioning adjustments

Suggested reviewers

  • paulohtb6
  • micheleRP

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately summarizes the main change: fixing the positioning of the markdown dropdown menu, which is the primary focus of the changeset.
Description check ✅ Passed The description is directly related to the changeset, providing specific details about the positioning changes (absolute positioning, mobile alignment adjustments) that match the code modifications.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
✨ Finishing touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch markdown-button-fiox
📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

  • Jira integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 9847a6c and 582a838.

📒 Files selected for processing (1)
  • src/css/markdown-dropdown.css (2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
  • GitHub Check: build
🔇 Additional comments (2)
src/css/markdown-dropdown.css (2)

68-69: Position absolute is the correct approach for dropdown overlay behavior.

Setting position: absolute on .markdown-dropdown-menu correctly converts the menu to an overlay that doesn't disrupt document flow. Since the parent .markdown-dropdown already has position: relative (line 11), the positioning context is properly established.

159-162: Mobile alignment adjustment improves layout consistency.

The responsive override from right: 0 to left: 0 is appropriate for mobile viewports where screen space is constrained. Using right: auto; to explicitly reset the desktop rule is correct CSS practice. However, ensure this doesn't cause the menu to overflow on very narrow screens (the menu has a min-width: 200px).

Please verify the dropdown menu doesn't clip or overflow horizontally on small mobile viewports (e.g., < 320px width). If issues occur, you may need to add additional responsive rules or constraints to prevent overflow.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@JakeSCahill JakeSCahill merged commit 28c0f7c into main Nov 11, 2025
6 checks passed
@JakeSCahill JakeSCahill deleted the markdown-button-fiox branch November 11, 2025 17:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@paulohtb6 paulohtb6 paulohtb6 approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@JakeSCahill @paulohtb6