fixed the cutting off of next and previous link in footer in Documentation website #192
Conversation
WalkthroughThe changes in the Changes
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 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: 0
🧹 Outside diff range and nitpick comments (2)
docs/src/styles/components/_pagination.scss (2)
41-41: LGTM! Symmetrical padding implementation.The padding and transform adjustments for the next button mirror the previous button changes, maintaining visual consistency.
Consider adding a comment explaining the calculation
calc(-100% + var(--icon-padding) * 2)for future maintainers, as it's not immediately obvious why the 100% offset is needed.Also applies to: 45-45, 51-51
58-60: Remove extra empty lines.Keep only one empty line at the end of the file, following common SCSS/CSS conventions.
} - - +
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
- docs/src/styles/components/_pagination.scss (3 hunks)
🧰 Additional context used
🔇 Additional comments (2)
docs/src/styles/components/_pagination.scss (2)
10-12: LGTM! Proper text overflow handling implemented.The combination of
white-space: nowrap,overflow: hidden, andtext-overflow: ellipsisis the correct approach to prevent text truncation while maintaining a clean UI with ellipsis.
22-22: Verify padding adjustments for the previous button.The padding and transform calculations have been doubled to provide more space. While the approach is sound, please verify:
- The arrow icon remains properly aligned
- No overlap occurs with the text
- The spacing looks consistent across different text lengths
Would you mind sharing a screenshot of the pagination with both short and long text to confirm the visual alignment?
Also applies to: 26-26, 32-32
Description
This PR addresses issue #191, where the first word of the previous page button and the last word of the next page button in the footer section are cutting off. The modifications include adjusting the CSS styles for the pagination buttons to ensure that text is fully visible and not truncated.
Steps to test
Pull the branch containing the changes.
Run the application using the command:
Navigate to a page with pagination in the footer section.
Verify that the first word of the previous page button and the last word of the next page button are completely visible and not cutting off.
Check for any other visual or functional issues with the pagination buttons.
References
Demo
Attached is a screen recording showcasing the changes made and confirming that the pagination buttons are now displaying correctly:
Summary by CodeRabbit