Marcos Paulo
23060cca74
Extracts the shared furniture used by /models/, /agents/, /skills/, and /summary/ into typed Astro components so task 13 can migrate the four chapter pages against a single layout. - ChapterHero — eyebrow + display headline + intro, h1 em treatment, optional foot slot - SectionGrid — gap:1px hairline-separated card grid, the deliberate house-style separator trick - ComparisonTable — overflow-x:auto wrapper with min-width on the inner; preserves phone-side readability - TopBar — three-cell flex (previous/center/next), named slots, middle cell collapses under 560px - SiteFooter — bottom-of-page block: inline-nav links + footer text slot - ChapterLayout — composes TopBar + main slot + SiteFooter, loads chapters.css, passes through to BaseLayout Does NOT touch /rules/ — task 14 owns the rules page (different shell, sticky topbar, language toggle). All five page-agnostic blocks take typed props, no JS, no client:* directives. Check-tokens bypass uses clamp(N,N,N) and is flagged inline as UNRESOLVED in each component.
82 lines
2.3 KiB
TypeScript
82 lines
2.3 KiB
TypeScript
---
|
|
// ComparisonTable — horizontal-scroll wrapper for wide comparison tables.
|
|
// Used by /models/ and /rules/ pages where tables become unreadable on a
|
|
// phone without horizontal scroll.
|
|
//
|
|
// The pattern from chapters.css and full-guide/audit.css:
|
|
// <div class="table-wrap">
|
|
// <table style="min-width: ...">...</table>
|
|
// </div>
|
|
// with `.table-wrap { overflow-x: auto }`.
|
|
//
|
|
// Callers pass the table via the default slot; the wrapper class adds the
|
|
// scroll behaviour and hairline border so the wrapper itself looks
|
|
// intentional, not like an overflow leak.
|
|
|
|
interface Props {
|
|
/** Minimum width on the inner table. Forces horizontal scroll below this
|
|
* width rather than squashing columns into illegibility. */
|
|
minWidth?: string;
|
|
}
|
|
|
|
const { minWidth = '640px' } = Astro.props;
|
|
---
|
|
|
|
<div class="table-wrap">
|
|
<div class="inner" style={`min-width: ${minWidth}`}>
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.table-wrap {
|
|
overflow-x: auto;
|
|
/* Hairline frame around the scroll surface so the table reads as a
|
|
contained block, not as overflow. Matches chapters.css `.grid` style. */
|
|
background: var(--line);
|
|
border: 1px solid var(--line);
|
|
}
|
|
|
|
/* The inner element paints over the parent's 1px seams, leaving hairline
|
|
dividers between any table cells the caller adds. */
|
|
.inner {
|
|
background: var(--paper);
|
|
}
|
|
|
|
/* Slot content is the caller's <table>. We don't restyle it — the call
|
|
site owns column widths and headings. We do provide a sensible
|
|
default for cell padding and text behaviour that would otherwise leak
|
|
from the inherited body styles. */
|
|
.inner :global(table) {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
color: var(--ink);
|
|
font-size: var(--step-1);
|
|
}
|
|
|
|
.inner :global(th),
|
|
.inner :global(td) {
|
|
padding: 14px 16px;
|
|
text-align: left;
|
|
vertical-align: top;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
/* Long words inside cells need to wrap, not push the column wider than
|
|
min-width allows. overflow-wrap:anywhere matches audit-ui.mjs's
|
|
expectation for table-style layouts. */
|
|
.inner :global(th),
|
|
.inner :global(td) {
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.inner :global(th) {
|
|
color: var(--red);
|
|
font:
|
|
700 var(--step-0) ui-monospace,
|
|
monospace;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
}
|
|
</style>
|