github/sim
1
1
Fork 0
mirror of https://github.com/simstudioai/sim.git synced 2026-04-06 03:00:16 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix(docs): use named grid lines instead of numeric column indices (#3487)

Browse Source 
Root cause: the fumadocs grid template has 3 columns in production but
5 columns in local dev. Our CSS used `grid-column: 3 / span 2` which
targeted the wrong column in the 3-column grid, placing content in
the near-zero-width TOC column instead of the main content column.

Fix: use `grid-column: main-start / toc-end` which uses CSS named grid
lines from grid-template-areas, working regardless of column count.

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Waleed
2026-03-09 00:50:28 -07:00
committed by GitHub
parent 13d2a134d0
commit 2bdc073d7b
2 changed files with 28 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/docs/app/[lang]/[[...slug]]/page.tsx
View File

@@ -233,7 +233,7 @@ export default async function Page(props: { params: Promise<{ slug?: string[]; l
lang={lang}
breadcrumb={breadcrumbs}
/>
<style>{`#nd-page { grid-column: 3 / span 2 !important; max-width: 1400px !important; }`}</style>
<style>{`#nd-page { grid-column: main-start / toc-end !important; max-width: 1400px !important; }`}</style>
<DocsPage
toc={data.toc}
breadcrumb={{

38
apps/docs/app/global.css
View File

@@ -552,11 +552,10 @@ video {
/* API Reference Pages — Mintlify-style overrides */
/* OpenAPI pages: span main + TOC grid columns for wide two-column layout.
The grid has columns: spacer | sidebar | main | toc | spacer.
By spanning columns 3-4, the article fills both main and toc areas,
while the grid structure stays identical to non-OpenAPI pages (no jitter). */
Use named grid lines from grid-template-areas so this works regardless
of whether the grid has 3 columns (production) or 5 columns (local dev). */
#nd-page:has(.api-page-header) {
grid-column: 3 / span 2 !important;
grid-column: main-start / toc-end !important;
max-width: 1400px !important;
}
@@ -698,7 +697,9 @@ div.flex.flex-row.items-start.bg-fd-secondary.border.rounded-lg.text-xs {
background-color: rgb(249 250 251) !important;
border-color: rgb(229 231 235) !important;
}
html.dark #nd-page:has(.api-page-header) div.flex.flex-row.items-center.rounded-xl.border.not-prose {
html.dark
#nd-page:has(.api-page-header)
div.flex.flex-row.items-center.rounded-xl.border.not-prose {
--color-fd-card: rgb(24 24 27) !important;
background-color: rgb(24 24 27) !important;
border-color: rgb(63 63 70) !important;
@@ -795,7 +796,10 @@ html.dark
padding: 0 !important;
font-size: 0.8125rem !important;
}
html.dark #nd-page:has(.api-page-header) div.flex.flex-row.items-center.rounded-xl.border.not-prose code {
html.dark
#nd-page:has(.api-page-header)
div.flex.flex-row.items-center.rounded-xl.border.not-prose
code {
color: rgb(229 231 235) !important;
}
@@ -1008,7 +1012,8 @@ html.dark
}
/* Required badge — order 3, red pill */
#nd-page:has(.api-page-header) .flex.flex-wrap.items-center.gap-3.not-prose:has(span.text-red-400)::after {
#nd-page:has(.api-page-header)
.flex.flex-wrap.items-center.gap-3.not-prose:has(span.text-red-400)::after {
content: "required";
order: 3;
display: inline-flex;
@@ -1030,7 +1035,9 @@ html.dark
}
/* Optional "?" indicator — hide it */
#nd-page:has(.api-page-header) span.font-medium.font-mono.text-fd-primary > span.text-fd-muted-foreground {
#nd-page:has(.api-page-header)
span.font-medium.font-mono.text-fd-primary
> span.text-fd-muted-foreground {
display: none;
}
@@ -1099,7 +1106,10 @@ html.dark
font-weight: 500;
font-family: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
}
html.dark #nd-page:has(.api-page-header) div.my-4 > .flex.flex-wrap.items-center.gap-3.not-prose::before {
html.dark
#nd-page:has(.api-page-header)
div.my-4
> .flex.flex-wrap.items-center.gap-3.not-prose::before {
background-color: rgb(51 51 56);
color: rgb(212 212 220);
}
@@ -1119,7 +1129,10 @@ html.dark #nd-page:has(.api-page-header) div.my-4 > .flex.flex-wrap.items-center
font-weight: 500;
font-family: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
}
html.dark #nd-page:has(.api-page-header) div.my-4 > .flex.flex-wrap.items-center.gap-3.not-prose::after {
html.dark
#nd-page:has(.api-page-header)
div.my-4
> .flex.flex-wrap.items-center.gap-3.not-prose::after {
background-color: rgb(153 27 27 / 0.3);
color: rgb(252 165 165);
}
@@ -1183,7 +1196,10 @@ html.dark #nd-page:has(.api-page-header) .text-sm.border-t {
font-family: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
}
html.dark #nd-page:has(.api-page-header) .flex.flex-wrap.items-center.gap-3.not-prose > button,
html.dark #nd-page:has(.api-page-header) .flex.flex-wrap.items-center.gap-3.not-prose > span:has(> button) {
html.dark
#nd-page:has(.api-page-header)
.flex.flex-wrap.items-center.gap-3.not-prose
> span:has(> button) {
background-color: rgb(51 51 56);
color: rgb(212 212 220);
}