Skip to content

fix(chat): honour column alignment in markdown tables#5591

Open
BrunooMoniz wants to merge 1 commit into
odysseus-dev:devfrom
BrunooMoniz:fix/table-column-align
Open

fix(chat): honour column alignment in markdown tables#5591
BrunooMoniz wants to merge 1 commit into
odysseus-dev:devfrom
BrunooMoniz:fix/table-column-align

Conversation

@BrunooMoniz

Copy link
Copy Markdown
Contributor

Summary

The chat markdown renderer (mdToHtml in static/js/markdown.js) parsed GFM pipe tables but discarded the separator row's alignment markers, writing a hard-coded text-align: left on every <th>/<td>. As a result a :---: (centre) or ---: (right) column rendered exactly like a left column, so numeric columns and centred labels never lined up the way the Markdown asked. This PR parses the separator row once, computes a per-column alignment (:--- left, :---: centre, ---: right, and a plain --- keeps the existing left default), and applies that alignment to each column's header and body cells. Columns with no alignment marker keep the previous left default, so existing tables render unchanged — only :---: and ---: columns move. The change is limited to the table pass; it reuses the separator-row detection already present and the cell's existing inline style (no new CSS variables, colours, fonts, or classes).

Target branch

  • This PR targets dev, not main. All PRs land in dev; main is curated by the maintainer at each release. If your PR is on main by accident, click "Edit" on this PR and change the base.

Linked Issue

Fixes #5590

Type of Change

  • Bug fix (non-breaking — fixes a confirmed issue)
  • New feature (non-breaking — adds new behaviour)
  • Breaking change (changes or removes existing behaviour)
  • Refactor / cleanup (behaviour unchanged)
  • Documentation only
  • CI / tooling / configuration

Checklist

  • I searched open issues and open PRs — this is not a duplicate.
  • This PR targets dev
  • My changes are limited to the scope described above — no unrelated refactors or whitespace changes mixed in.
  • I actually ran the app (docker compose up or uvicorn app:app) and verified the change works end-to-end. Type-checks and unit tests are not enough.

How to Test

Steps a reviewer can reproduce (full app):

  1. docker compose up -d --build, open the chat.
  2. Get the assistant to echo exactly this Markdown:
    | Feature | Priority | Score |
    | :--- | :---: | ---: |
    | Search indexing | High | 9 |
    | Offline cache | Medium | 42 |
    | Keyboard shortcuts | Low | 128 |
    
  3. On current dev: every column is left-aligned — Priority and Score ignore the :---: / ---: markers. With this branch: Priority is centred and Score is right-aligned, Feature stays left. Inspecting the cells in DevTools shows text-align: center / right on the aligned columns.

What was verified for this change:

  • The alignment was confirmed in a browser at desktop (1280px) and mobile (390px) widths, current dev (before) vs this branch (after) — see the screenshots below. The computed text-align on the header cells is ["left","left","left"] before and ["left","center","right"] after.
  • node --check static/js/markdown.js — passes.
  • python -m pytest tests/test_markdown_rendering_js.py — 15 passed (2 new alignment cases plus the existing table / list / thinking / autolink / math contracts).
  • python -m pytest (full suite) — no new failures versus a clean dev baseline (4620 passed / 5 skipped, i.e. the baseline 4618 passed / 5 skipped plus the 2 new cases).

Files changed:

  • static/js/markdown.js — the pipe-table pass now derives per-column alignment from the separator row and applies it to <th>/<td> instead of a hard-coded text-align: left. Columns without a marker keep the left default.
  • tests/test_markdown_rendering_js.py — new cases asserting :--- / :---: / ---: map to left / centre / right on both header and body cells, and that a plain --- column stays left.

Visual / UI changes — REQUIRED if you touched anything that renders

Anything that changes what the UI looks like — buttons, icons, padding, colors, fonts, spacing, layout, CSS, HTML, SVG, or any static/js/ module that draws to the DOM — needs all of the following.

  • Screenshot or short clip of the change in the running app, attached below. Mobile screenshot too if the change affects mobile.
    • How the screenshots were captured: rendered through the app's own chat renderer (mdToHtml) and static/style.css in Chromium (desktop, 1280px) and WebKit (mobile, 390px) at the default dark theme, before (current dev) vs after (this branch).
  • Style match: the change uses Odysseus's existing visual language. Specifically:
    • Reuse existing CSS variables (--red, --fg, --bg, --card, --border, etc.) — do not introduce new color values, font sizes, or spacing units.
    • Reuse existing button/input/card/border classes. Don't invent parallel styling.
    • No Unicode emoji in UI or code. Use inline SVG (matching the monochrome icon style already in static/index.html) or plain text.
    • Monospaced font (Fira Code) for primary UI text. Don't override.
    • Dark theme is the default; any light-mode work must be wired through the existing theme system, not hard-coded.
  • No new component patterns. If a similar widget already exists in the app, extend it instead of writing a parallel one.
  • I am not an LLM agent submitting a bulk PR. If you are, please open an issue describing the problem first — bulk auto-generated PRs that don't match the project's visual style are closed on sight, even when the underlying fix is correct.

Screenshots / clips

Desktop — before (current dev)

table alignment before, desktop

Desktop — after (this PR)

table alignment after, desktop

Mobile — before (current dev)

table alignment before, mobile

Mobile — after (this PR)

table alignment after, mobile

The pipe-table pass in mdToHtml discarded the GFM separator row's
alignment markers and wrote a hard-coded `text-align: left` on every
cell, so `:---:` (centre) and `---:` (right) columns rendered exactly
like a left column.

Parse the separator row once, map each column (`:---` left,
`:---:` center, `---:` right, plain `---` keeps the left default), and
apply that alignment to the column's header and body cells. Columns
without a marker keep the previous left default, so existing tables
render unchanged.

Adds node-driven regression tests covering left/centre/right and the
default-left case.
@github-actions github-actions Bot added the ready for review Description complete — ready for maintainer review label Jul 18, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

ready for review Description complete — ready for maintainer review

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Markdown table column alignment (:---: / ---:) is ignored — cells always left-align

1 participant