Fix Mobile Friends Page Welcome Message#567
Merged
akirk merged 2 commits intoOct 26, 2025
Merged
Conversation
akirk
force-pushed
the
claude/fix-mobile-friends-view-011CUU6oyYdYcpYr6Q2g8pwY
branch
from
8da70f6 to
808a989
Compare
Contributor
Test this PR in WordPress PlaygroundYou can test this pull request directly in WordPress Playground: This will install and activate the plugin with the changes from this PR. |
- Set ul/ol left margin to 0 and padding-left to 1rem on mobile - Added specific rules for nested lists (ul ul, ol ol, etc.) to prevent compounding margins - Removed left and right margins on p.note elements on mobile - Added word-wrap and overflow-wrap for links to handle long URLs gracefully The nested list structure in the welcome message (with plugin recommendations) was causing additional overflow on mobile. This fix ensures both top-level and nested lists, along with long URLs, display properly within screen boundaries. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
akirk
force-pushed
the
claude/fix-mobile-friends-view-011CUU6oyYdYcpYr6Q2g8pwY
branch
3 times, most recently
from
27f1e4a to
dd6c580
Compare
The welcome message contains a button with the text "Add Alex Kirk, creator of the Friends plugin, as a friend now" which was preventing wrapping due to the default white-space: nowrap on buttons. Changed buttons within .card-body on mobile devices to: - white-space: normal (allows text wrapping) - margin-bottom: 1.2rem (matches paragraph spacing) This allows the long button text to wrap properly and prevents the page from overflowing the screen width while maintaining proper spacing with the following content. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
akirk
force-pushed
the
claude/fix-mobile-friends-view-011CUU6oyYdYcpYr6Q2g8pwY
branch
from
dd6c580 to
8ab872d
Compare
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR fixes a mobile display issue where the welcome message on the Friends page was extending beyond screen boundaries. The fix applies proper text wrapping to buttons and adds spacing, while also enhancing the WordPress Playground testing workflow by setting a default landing page.
- Adds
white-space: normalto buttons to prevent text overflow on mobile - Includes bottom margin for better button spacing
- Updates Playground URL to open directly to the Friends page for easier testing
Reviewed Changes
Copilot reviewed 2 out of 4 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| friends.scss | Adds button text wrapping and spacing within .card-body for mobile viewport |
| .github/workflows/pr-playground-comment.yml | Sets landing page to /friends/ in Playground URL for direct navigation |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
akirk
deleted the
claude/fix-mobile-friends-view-011CUU6oyYdYcpYr6Q2g8pwY
branch
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The welcome message content now displays properly within the screen boundaries on mobile devices without requiring horizontal scrolling.
🤖 Generated with Claude Code