Skip to content

Conversation

@luandro
Copy link
Contributor

@luandro luandro commented Oct 3, 2025

Summary

Fixes table cell vertical alignment to improve readability and scannability of documentation tables.

Problem

Tables in the documentation were using middle (center) vertical alignment, which made content appear awkwardly positioned when row heights varied. This was particularly problematic for tables with different amounts of text in cells.

Solution

Changed all table cells (both td and th) to use vertical-align: top in markdown content.

Changes

  • Added CSS rule to src/css/custom.css for .theme-doc-markdown table cells
  • Simple, targeted fix with minimal scope

Testing

  • ✅ CSS formatted with Prettier
  • ✅ Pre-commit hooks passed
  • ✅ Change is isolated to table styling only

Visual Impact

Tables will now have content aligned to the top of cells, making them:

  • More professional looking
  • Easier to scan and read
  • Better aligned with standard documentation practices

Screenshots

See issue #33 for before/after comparison.

Fixes #33

- Tables now use top vertical alignment for better readability
- Applies to all table cells (td and th) in markdown content
- Fixes issue where varying cell content heights made tables hard to scan

Fixes #33
@luandro luandro closed this Oct 31, 2025
@luandro luandro reopened this Oct 31, 2025
@digidem digidem deleted a comment from github-actions bot Oct 31, 2025
@luandro
Copy link
Contributor Author

luandro commented Oct 31, 2025

Code Review Summary

What This PR Does

This PR improves table readability by changing the vertical alignment of table cells from middle to top alignment:

How It Solves the Issue

By setting vertical-align: top, cells with varying amounts of content will now have their content aligned to the top of each cell, making tables:

  • Easier to scan vertically
  • More visually consistent with standard documentation practices
  • Better aligned with user expectations for table reading (top-to-bottom, left-to-right)

Potential Issues & Considerations

Strengths:

  • ✅ Minimal, focused change (9 lines of CSS)
  • ✅ Applies to both header and data cells for consistency
  • ✅ Proper scoping to .theme-doc-markdown
  • ✅ No side effects on other components
  • ✅ Standard UX pattern for table alignment

Areas to Watch:

  • ⚠️ Existing Tables: Need to verify this doesn't negatively impact existing tables in the documentation. Some tables might have been designed expecting middle alignment.
  • ⚠️ Small Content Cells: Cells with 1-2 lines of text might look fine with middle alignment, but top alignment is generally more readable.
  • ⚠️ Tables with Images: Image cells might look different with top alignment - should be manually verified.

Code Quality:

  • Simple, straightforward CSS change
  • Well-commented with issue reference
  • Follows existing CSS patterns in the file

Testing:

Recommendation:Approve - Standard UX improvement with minimal risk. Top alignment is the conventional and more readable choice for documentation tables.

@luandro luandro marked this pull request as draft November 5, 2025 13:36
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: table cells use middle vertical alignment instead of top

2 participants