Fix overflowing style in article.css#15
Conversation
There was a problem hiding this comment.
Pull request overview
This pull request addresses overflow styling issues in article.css by modifying how links and tables are displayed. The changes aim to prevent content from overflowing its container by breaking long URLs and reducing table spacing.
Key Changes:
- Added word-breaking behavior to anchor tags to handle long URLs
- Reduced table cell padding by 73% (from 0.75em to 0.2em)
- Removed table margins entirely
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| th, td { | ||
| border: 1px solid #ddd; | ||
| padding: 0.75em; | ||
| padding: 0.2em; |
There was a problem hiding this comment.
The padding has been reduced from 0.75em to 0.2em (73% reduction), which may make table content too cramped and difficult to read. Consider a more moderate reduction like 0.5em or 0.4em to balance overflow prevention with readability.
| padding: 0.2em; | |
| padding: 0.5em; |
| } | ||
| table { | ||
| border-collapse: collapse; | ||
| width: 100%; |
There was a problem hiding this comment.
Removing the table margin entirely will cause tables to be positioned directly against adjacent content without any vertical spacing. Consider keeping at least a minimal margin like 0.5em 0 or 1em 0 to maintain proper spacing between tables and surrounding elements.
| width: 100%; | |
| width: 100%; | |
| margin: 1em 0; |
| a { | ||
| color: #3498db; | ||
| text-decoration: none; | ||
| word-break: break-word; |
There was a problem hiding this comment.
Applying word-break: break-word to all anchor elements may cause unintended breaking of short links and UI elements. Consider applying this style more selectively, such as targeting only links within article content (e.g., .container a) or using overflow-wrap: break-word instead, which only breaks when necessary to prevent overflow.
| word-break: break-word; | |
| overflow-wrap: break-word; |
Fixes #12