Skip to content

bug: table cells use middle vertical alignment instead of top #33

@jencastrodoesstuff

Description

@jencastrodoesstuff

Problem

Tables in the documentation use middle (center) vertical alignment for cell content, which doesn't work well for the type of content being displayed. This makes tables harder to read, especially when cells contain different amounts of text.

Current Behaviour

  • Table cells are vertically centered (middle-aligned)
  • Content appears awkwardly positioned when row heights vary
  • Text with hyperlinks shows color changes mid-word due to alignment issues

Screenshot

Table alignment issue

Note: Color changes mid-word in screenshot are due to hyperlinked text styling, which is a separate issue.

Expected Behaviour

  • Table cells should use top vertical alignment (vertical-align: top)
  • Content should align to the top of each cell
  • Tables should be more scannable and readable

Technical Context

This is a CSS styling issue that likely needs to be addressed in:

  • Global table styles in src/css/custom.css
  • Or theme overrides for markdown tables
  • May involve Docusaurus's default table styling

Acceptance Criteria

  • All table cells use top vertical alignment
  • Alignment works correctly across all documentation pages with tables
  • Change applies consistently to markdown-generated tables
  • Verify on at least 3 pages with different table structures
  • No layout regressions introduced

Implementation Approach

Add or modify CSS for markdown tables:

/* In src/css/custom.css */
table td,
table th {
  vertical-align: top;
}

May also need to check for:

  • Docusaurus theme overrides
  • MDX table components
  • Existing conflicting styles

Investigation Steps

  1. Identify pages with tables showing the issue
  2. Inspect table CSS in browser dev tools
  3. Locate table styling in src/css/custom.css
  4. Check for theme overrides in src/theme/
  5. Test fix across multiple table examples

Related Files

  • src/css/custom.css
  • src/theme/ (if table components are overridden)
  • Example pages with tables for testing

Related Issues

The hyperlinked text color issue mentioned in the screenshot may warrant a separate issue if it's not already tracked.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions