Skip to content

style(tables): bring roomier Rich-like table styling to main #69

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
saforem2 merged 1 commit into from
Nov 12, 2026
Merged

style(tables): bring roomier Rich-like table styling to main #69

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 10 additions & 10 deletions web/src/styles/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3041,9 +3041,9 @@ html[data-webtui-theme='catppuccin-latte'] {
padding-top: 0 !important;
}

/* Default table style: simple 1px borders on every cell, no webtui pseudo
borders. Opt out per-table by adding `data-table-style="terminal"` to use
the original webtui ascii-box style. */
/* Default table style: Rich-like square grid, with roomier cells and a
distinct header. Opt out per-table with `data-table-style="terminal"`
for the denser variant below. */
table:not([data-table-style='terminal']) {
width: max-content;
border-collapse: collapse;
Expand All @@ -3066,20 +3066,22 @@ html[data-webtui-theme='catppuccin-latte'] {
content: none !important;
}
/* Exclude the CodePreview code-table (:has(.line-code)) — it's a
borderless line-numbered listing, not a content table, and this
1px cell border was drawing a grid across the HTML/CSS panes. */
borderless line-numbered listing, not a content table. */
table:not([data-table-style='terminal']):not(:has(.line-code))
tr
:is(td, th) {
border: 1px solid var(--foreground3);
padding: 0 1ch;
padding: 0.4lh 1.25ch;
}

@sourcery-ai sourcery-ai Bot Nov 12, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟡 Medium · Slide tables become much taller

When a slide contains a dense Markdown table, the default-table rule also adds 0.4lh above and below every cell in presentation tables. Dense slides therefore need substantially more vertical space and their content becomes scrollable instead of fitting in the slide.

Scope the roomier cell padding to non-presentation tables, or preserve the compact padding for tables inside presentations.

Prompt for AI agents 
In `web/src/styles/global.css` at line 3075:

**Slide tables become much taller**

When a slide contains a dense Markdown table, the default-table rule also adds `0.4lh` above and below every cell in presentation tables. Dense slides therefore need substantially more vertical space and their content becomes scrollable instead of fitting in the slide.

Scope the roomier cell padding to non-presentation tables, or preserve the compact padding for tables inside presentations.

table:not([data-table-style='terminal']) tr :is(td, th):first-of-type {
padding-left: 1ch;
}
table:not([data-table-style='terminal']) thead :is(td, th),
table:not([data-table-style='terminal']) tr:first-child :is(th) {
background-color: var(--background1);
border-bottom: 1px solid var(--foreground3);
color: var(--accent, var(--blue));
font-weight: 700;
}
/* Zebra striping for body rows. Soft tint = --background1 at low
opacity so the stripe is "barely there" — visible as a row
Expand Down Expand Up @@ -3113,14 +3115,12 @@ html[data-webtui-theme='catppuccin-latte'] {
> :is(td, th):first-child {
box-shadow: inset 3px 0 0 0 var(--accent, var(--blue));
}
/* Drop the webtui first-row top-padding (it makes room for the ascii box
border, which we don't render in the default style). Slide tables
retain their symmetric padding so header text stays centered. */
/* Keep first-row padding symmetric with the rest of the table. */
table:not([data-table-style='terminal']):not([is-~='presentation'] table)
:first-child
> tr:first-child
> :is(td, th) {
padding-top: 0 !important;
padding-top: 0.4lh !important;

@sourcery-ai sourcery-ai Bot Nov 12, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟡 Medium · Code previews gain a top gap

When a CodePreview table contains .line-code cells, the new first-row padding-top: 0.4lh !important rule overrides the existing table:has(.line-code) zero-padding reset, leaving a gap above the first code line while later lines remain tight.

Restrict the first-row padding rule to terminal tables so CodePreview tables retain zero padding.

Also at web/src/styles/global.css:3124.

Prompt for AI agents 
In `web/src/styles/global.css` at line 3123:

**Code previews gain a top gap**

When a CodePreview table contains `.line-code` cells, the new first-row `padding-top: 0.4lh !important` rule overrides the existing `table:has(.line-code)` zero-padding reset, leaving a gap above the first code line while later lines remain tight.

Restrict the first-row padding rule to terminal tables so CodePreview tables retain zero padding.

Also at `web/src/styles/global.css:3124`.

}

/* ── Terminal table style (`data-table-style="terminal"`) ────────────
Expand Down
Loading