Skip to content

docs: color-code v2 API method badges + responsive API endpoint tables#130

Merged
tbantle22 merged 12 commits into
devfrom
api-v2-colored-method-badges
Jul 9, 2026
Merged

docs: color-code v2 API method badges + responsive API endpoint tables#130
tbantle22 merged 12 commits into
devfrom
api-v2-colored-method-badges

Conversation

@tbantle22

@tbantle22 tbantle22 commented Jul 9, 2026

Copy link
Copy Markdown
Collaborator

Summary

  • Color-code the HTTP method in v2 API endpoint headers (GET /api/v2/user → colored GET badge + path), reusing the same .api-method/.api-path markup and palette the hand-written v1alpha1 pages already use (repurposes the previously-unused methodBadge helper into methodSpan).
  • A chain of mobile-responsiveness fixes for the API reference tables, found via live review on a phone-width viewport:
    • Higher-contrast badge text (dark slate instead of white — the palette is too light for white text) and more spacing after the badge.
    • Clip .api-endpoint card corners to its border-radius (header fill was bleeding past the rounded corner).
    • Contain wide tables in a horizontal scroll (.table-scroll rehype wrapper for v2's Markdown tables; overflow-x: auto on .api-section/.api-response-body for v1alpha1's raw-HTML tables, since rehype-raw runs after user rehype plugins so the wrapper plugin can't see those).
    • Let long endpoint paths and inline <code> wrap (tuned from anywhere → break-word after anywhere let table auto-layout shrink columns enough to break short words like "owner" into single-letter orphans).
    • Make table columns deterministic on mobile (table-layout: fixed + min-width per cell below 640px) instead of reactive to content, with the scroll containers above as a last-resort fallback rather than the primary mechanism.
    • Strip the v1alpha1 endpoint card's now-unnecessary chrome (outer border, header background fill, its bottom border, and the leftover 1rem horizontal padding that came from the border) so it doesn't eat into content width and aligns flush-left with the rest of the page.

Test plan

  • npm run build:dolt / :doltlab / :doltgres all pass
  • npm run compile passes
  • Verified compiled CSS/HTML at each step (badge colors, .table-scroll wrapping, overflow-wrap values, media-query breakpoint, removed rules)
  • Iterated against live phone-width screenshots across several rounds to catch regressions (word-mangling, page-level horizontal overflow, lost margins)

🤖 Generated with Claude Code

tbantle22 and others added 12 commits July 9, 2026 14:00
@tbantle22 @claude
docs: color-code the HTTP method in v2 API endpoint headers
03a98cf 
Replace the plain `GET /api/v2/user`-style inline code with the same
.api-method / .api-path markup and color palette the hand-written
v1alpha1 pages already use (see DocsLayout.astro) — GET teal, POST
blue, PATCH/PUT orange, DELETE red. Repurposes the previously-unused
methodBadge helper (a shields.io badge nobody called) into methodSpan.

Regenerated database.md, operations.md, and user.md.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
@tbantle22 @claude
fix: more spacing and higher contrast on .api-method badges
48ce506 
Move the method/path gap from .api-endpoint-header's flex `gap`
(which only helped v1alpha1's card layout) onto .api-method's own
margin-right, so the v2 pages' plain inline usage gets the same
spacing without wrapping in .api-endpoint-header.

Switch the badge text from white to a dark slate — the palette (teal,
light blue, orange, red) is too light for white text to read clearly.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
@tbantle22 @claude
fix: clip .api-endpoint card corners to its border-radius
5f4f066 
.api-endpoint-header's square background fill wasn't clipped to the
parent card's rounded corners, so the top corners looked cut off
instead of rounded. Add overflow: hidden to the card.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
@tbantle22 @claude
fix: contain wide tables in a horizontal scroll instead of overflowing
0319590 
On narrow viewports, wide tables (5-column parameter tables, long
unbroken paths) pushed past the content column instead of scrolling
in place.

Two cases, since the API docs mix real Markdown tables with raw HTML:
- v2 pages' tables come from Markdown — add a rehype plugin
  (rehype-wrap-tables.mjs) that wraps every rendered <table> in a
  .table-scroll div with overflow-x-auto.
- v1alpha1 pages hand-author <table class="api-params"> as raw HTML,
  which rehype-raw only expands into real nodes *after* our
  rehypePlugins run (@astrojs/markdown-remark's pipeline order), so
  the wrap plugin above can't see them. They're already nested inside
  .api-section / .api-response-body, so give those overflow-x: auto
  directly instead.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
@tbantle22 @claude
fix: wrap long endpoint paths, restore table bottom margin
e063d30 
- .api-path had no way to break a long, space-less path (e.g.
  /databases/{owner}/{database}/pulls/{pull_number}/comments),
  so it overflowed its paragraph unconstrained and could blow out
  the whole page horizontally on narrow viewports — the table
  underneath just rode along with that page-level scroll. Add
  overflow-wrap: anywhere + min-width: 0 (the latter for the
  v1alpha1 flex-header case, where flex items default to
  min-width: auto and ignore overflow-wrap otherwise).

- Giving .api-section overflow-x: auto (previous commit) forces
  overflow-y to auto too (CSS requires both axes to leave
  'visible' together), which establishes a block formatting
  context and stops the child <h5>'s margin-top from collapsing
  through into the visible gap the way it used to — v1alpha1's
  .api-params tables lost their trailing space. Give .api-params
  an explicit 1rem bottom margin instead of relying on collapse.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
@tbantle22 @claude
fix: let inline <code> wrap so table cells shrink on mobile
a14860c 
Table cells like the Name column (\`owner\`, \`page_token\`, ...) and
inline references in Description text (\`meta.next_page_token\`) are
all <code> spans, which don't break without help. Even wrapped in
.table-scroll, a table full of unbreakable code tokens still sizes
itself to that unwrapped min-content width, forcing a wide scroll
for tables that would otherwise fit fine. Add overflow-wrap: anywhere
to code generally, so the browser's table auto-layout can actually
shrink columns to the available width.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
@tbantle22 @claude
fix: tone down code wrapping from anywhere to break-word
731ad80 
overflow-wrap: anywhere also feeds into how browsers compute a table
column's min-content width for auto-layout, so it let columns shrink
far enough that even short words like "owner" or "Problem" no longer
fit on one line and broke into single-letter orphans. break-word
still wraps long tokens when a cell genuinely needs it, without
telling the layout algorithm it's free to assume every word can
split anywhere.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
@tbantle22 @claude
fix: make table columns deterministic on mobile instead of content-re…
4b0ee39 
…active

Auto layout gives each column exactly as much room as its content
demands. For tables mixing several short columns (In/Type/Required)
with a prose column (Description), that reliably exceeds a phone
viewport — and every attempt to fix it by tuning how <code> wraps
just traded one failure mode for another (mangled short words vs.
page overflow), because the column widths were never the thing under
control.

Below 640px, switch to table-layout: fixed with a 4rem min-width per
cell. Column widths are now deterministic: short cells (owner, yes,
string) get guaranteed room to sit on one line, prose wraps normally,
and only if the floors themselves can't all fit does the existing
overflow-x: auto (.table-scroll / .api-section / .api-response-body)
kick in as a fallback — scroll as a last resort, not the primary
mechanism. Above 640px, untouched — auto layout already looked right
there.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
@tbantle22 @claude
fix: drop the outer border on v1alpha1 API endpoint cards
24e2996 
The card border ate into content width for no real benefit — the
header's own background fill already separates it from the body, so
the outer border was redundant framing. Keep the rounded corners and
header separator, just lose the border (and the now-dead dark-mode
border-color override that went with it).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
@tbantle22 @claude
fix: drop the header background fill and bottom border on API endpoints
23c0d11 
Continues stripping unnecessary chrome from the v1alpha1 endpoint
header now that the outer card border is gone too — the method badge
and path text carry enough visual weight on their own. Also removes
the now-dead dark-mode override for the fill/border that went with it.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
@tbantle22 @claude
fix: drop leftover 1rem horizontal padding on API endpoint content
f57fcdd 
.api-endpoint-header, .api-summary, .api-description, and .api-section
all had 1rem left/right padding inherited from when they sat inside a
bordered card. Now that the border and header fill are gone, that
padding was just an unexplained indent relative to the surrounding
prose (headings, paragraphs) — drop it so this content sits flush
left like everything else on the page. .api-response-body keeps its
own left margin; that one's an intentional nesting indent (response
body under its status line), not leftover card padding.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
@tbantle22
Merge remote-tracking branch 'origin/dev' into api-v2-colored-method-…
9b0a67d 
…badges

# Conflicts:
#	site/dolt/src/content/products/dolthub/api/v2/database.md
@tbantle22 tbantle22 merged commit 7da2137 into dev Jul 9, 2026
7 checks passed
@tbantle22 tbantle22 deleted the api-v2-colored-method-badges branch July 9, 2026 22:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@tbantle22