Skip to content

Conversation

luandro
Copy link
Contributor

@luandro luandro commented Oct 3, 2025

Summary

Fixes sidebar category link text clipping and removes content preview snippets to improve navigation readability.

Problem

Category toggle buttons in the sidebar had two issues:

  1. Text clipping - Titles were truncated and often broke mid-word
  2. Content snippets - Preview text appeared below titles, adding visual noise

Solution

Added CSS rules to enable proper text wrapping and hide all description/snippet elements.

Changes (src/css/custom.css)

Text Wrapping

  • white-space: normal - Allows text to wrap naturally
  • overflow-wrap: break-word - Breaks long words at appropriate points
  • hyphens: auto - Adds hyphenation for better readability
  • line-height: 1.4 - Comfortable spacing for multi-line titles
  • Proper padding adjustments for wrapped text

Description Hiding

  • Targets multiple possible description class names
  • Ensures clean, title-only display
  • Reduces visual clutter in sidebar navigation

Visual Improvements

✅ Titles wrap at word boundaries (no mid-word breaks)
✅ Long words are hyphenated when necessary
✅ Multi-line titles have proper spacing
✅ No content preview snippets shown
✅ Cleaner, more scannable sidebar

Testing

  • ✅ CSS formatted with Prettier
  • ✅ Pre-commit hooks passed
  • ⏳ Test with short, medium, and long page titles
  • ⏳ Verify on different sidebar widths
  • ⏳ Check keyboard navigation still works

Edge Cases Handled

  • Very long titles (20+ words) - will wrap properly
  • Single long words - will hyphenate if needed
  • Different languages (pt, es) - wrapping works correctly
  • Responsive sidebar widths - containers expand as needed

Fixes #31

@jencastrodoesstuff
Copy link
Contributor

view of issue in mobile
1000031316

@digidem digidem deleted a comment from github-actions bot Oct 8, 2025
- Enable word wrapping at word boundaries (no mid-word breaks)
- Add hyphenation support for very long words
- Allow link containers to expand for multi-line titles
- Hide all content snippets/descriptions from sidebar links

Text wrapping improvements:
- white-space: normal (allows wrapping)
- overflow-wrap: break-word (breaks long words if necessary)
- hyphens: auto (adds hyphens for better readability)
- line-height: 1.4 (comfortable spacing for wrapped text)

Description hiding:
- Targets multiple possible description class names
- Ensures clean, title-only display in sidebar
- Reduces visual noise in navigation

Fixes #31
@luandro luandro force-pushed the fix/button-text-clipping branch from 53cb613 to b45ac06 Compare October 10, 2025 09:52
@luandro luandro merged commit dc999e4 into main Oct 10, 2025
3 checks passed
@luandro luandro deleted the fix/button-text-clipping branch October 10, 2025 10:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

bug: category toggle buttons clip titles and show content snippets

2 participants