Skip to content
dbx tools

Variable: TABLE\_WRAPPER\_CLASSES

const TABLE_WRAPPER_CLASSES: string

Wrapper class layered on every chat table (markdown + statement results). It frames the table as a distinct card so it reads as a separate block in the conversation. AppKit’s Table family already owns row borders, hover, and color tokens - on top of that we add:

  • not-prose to escape @tailwindcss/typography’s table styles (margins, font-weight, etc.) which fight the AppKit defaults
  • a rounded-lg border + bg-card + shadow-sm card frame with overflow-hidden so the rounded corners clip the scroll area
  • compact text-xs + tabular-nums so columns of numbers align
  • right-alignment for every column except the first label column
  • a max-h-[60vh] vertical cap so tall tables scroll their body instead of running off the viewport, plus overflow-auto so wide tables scroll horizontally inside the card rather than pushing the chat past its max width. AppKit’s Table nests the <table> in its own scroll container (<div> - the wrapper’s only child), so the cap + overflow land there, making it the scroll ancestor the sticky header pins to.
  • a prominent, sticky header: tinted (bg-muted), bold, opaque (so rows don’t bleed through while scrolling), and divided from the body with a bottom border.