Fix/module name overlap #1556
Fix/module name overlap #1556
Conversation
WalkthroughThis update modifies CSS and LESS files to improve the alignment and spacing of module names and icons in the modules section, ensuring that module names are no longer obscured by icons. It introduces flexbox properties to relevant button and icon classes and adjusts margins for plugin card text. Additionally, the GitHub Actions workflow is updated to replace deprecated output syntax with the recommended method for setting output variables. Changes
Assessment against linked issues
Suggested labels
Suggested reviewers
Poem
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
.github/workflows/phpcs.yml(2 hunks)assets/css/admin.css(3 hunks)assets/less/admin.less(3 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: test
🔇 Additional comments (8)
.github/workflows/phpcs.yml (1)
20-20: Use new output file syntax for Composer cache directory
The command correctly replaces the deprecated::set-outputsyntax by appendingdir=...to$GITHUB_OUTPUT.assets/css/admin.css (3)
688-697: Enhance upgrade button alignment with inline-flex
Addingdisplay: inline-flex,align-items: center,gap, andwhite-space: nowrapwill correctly align the icon and text in the “Upgrade to Pro” button.
710-713: Vertically center the Pro icon wrapper
Using aninline-flexcontainer for.pro-iconwithalign-items: centerensures consistent vertical alignment of the SVG icon.
1354-1356: Offset plugin card text to prevent overlap
The added rule correctly applies a left margin (148px !important) to plugin card name and description to avoid overlapping the icon.assets/less/admin.less (4)
896-901: Mirror inline-flex upgrade button styles in LESS
These declarations in LESS align with the CSS changes, ensuring the “Upgrade to Pro” button usesinline-flexand proper spacing.
917-920: Center-align Pro icon container in LESS
Good to introduce aninline-flexwrapper for.pro-icon, aligning icons horizontally and vertically.
922-925: Add left margin to SVG icons in LESS
Addingmargin-left: 5pxwill space the SVG away from preceding text, matching the CSS behavior.
1234-1236: Indent plugin card name and description in LESS
Replicating themargin-left: 148px !importantensures consistency across your compiled CSS and LESS outputs.
| run: | | ||
| URL="https://api.github.com/repos/${{ github.repository }}/pulls/${{ github.event.pull_request.number }}/files" | ||
| FILES=$(curl -s -X GET -G $URL | jq -r '.[] | .filename' | xargs) | ||
| echo "::set-output name=files::$FILES" | ||
| echo "files=$FILES" >> $GITHUB_OUTPUT | ||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion
Filter changed files to PHP before running PHPCS
You’re now collecting all changed filenames, but passing CSS/LESS (and other non-PHP) files into phpcs will cause it to error. Filter the list to only PHP files.
Apply this diff:
run: |
URL="https://api.github.com/repos/${{ github.repository }}/pulls/${{ github.event.pull_request.number }}/files"
- FILES=$(curl -s -X GET -G $URL | jq -r '.[] | .filename' | xargs)
+ FILES=$(curl -s -X GET -G $URL \
+ | jq -r '.[] | .filename' \
+ | grep -E '\.php$' \
+ | xargs)
echo "files=$FILES" >> $GITHUB_OUTPUT📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| run: | | |
| URL="https://api.github.com/repos/${{ github.repository }}/pulls/${{ github.event.pull_request.number }}/files" | |
| FILES=$(curl -s -X GET -G $URL | jq -r '.[] | .filename' | xargs) | |
| echo "::set-output name=files::$FILES" | |
| echo "files=$FILES" >> $GITHUB_OUTPUT | |
| run: | | |
| URL="https://api.github.com/repos/${{ github.repository }}/pulls/${{ github.event.pull_request.number }}/files" | |
| FILES=$(curl -s -X GET -G $URL \ | |
| | jq -r '.[] | .filename' \ | |
| | grep -E '\.php$' \ | |
| | xargs) | |
| echo "files=$FILES" >> $GITHUB_OUTPUT |
Rubaiyat-E-Mohammad
added
QA In Progress
QA Approved
close #1555
Fix: Adjust plugin card text alignment
Screenshot:
Summary by CodeRabbit
Style
Chores