Add borders to content Tabs component by dbrian57 · Pull Request #2867 · wandb/docs

dbrian57 · 2026-07-06T20:05:41Z

Description

Adds a border box around the Mintlify content <Tabs>/<Tab> component so each tabbed section reads as one clearly outlined region, matching the site's existing card chrome.

BEFORE

AFTER

Wrap the Mintlify content <Tabs>/<Tab> block (.tab-container) in the site's standard card chrome — 1px --color-stroke border, 12px radius, --color-card-rest fill, overflow:hidden — so each tabbed section reads as one outlined region. The tab strip's existing border-b becomes the divider between the tab header and the panel body; the panel gets padding and the strip's default 24px bottom gap is removed. Also suppress a stray vertical scrollbar in the tab title row: Mintlify sets overflow:auto on the strip and the tab buttons' -mb-px/border-b overlap leaves the scroll height 1px taller than the client height. overflow-y:hidden kills the scrollbar while keeping overflow-x:auto so many tabs still scroll horizontally on narrow screens. Edited the source partial (scripts/css-minify/cards.css) and rebuilt the minified css/styles.css via `npm run build`. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

mintlify · 2026-07-06T20:08:51Z

Preview deployment for your docs. Learn more about Mintlify Previews.

Project	Status	Preview	Updated (UTC)
wandb	🟢 Ready	View Preview	Jul 6, 2026, 8:17 PM

The .tab-container shipped with margin-bottom:0, so the only separation from the following element was its ~20px top margin, leaving the outlined tab box crowding the next paragraph/heading. Add margin-bottom:2rem so the block has clear breathing room below it. Rebuilt css/styles.css via `npm run build`. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

github-actions · 2026-07-06T20:18:19Z

🔗 Link Checker Results

✅ All links are valid!

No broken links were detected.

Checked against: https://wb-21fd5541-css-tab-borders.mintlify.app

Per review feedback, give each content tab button its own bordered chip in addition to the container border. Mintlify ships the buttons with a bottom-only border (the active underline) and no horizontal padding; replace that with a full 1px --color-stroke box, 6px radius, and horizontal padding so each tab reads as a distinct button. The active chip gets a --color-text-primary border plus a --color-sidebar-hover fill to stand out from the resting chips. margin-bottom:0 cancels Mintlify's -mb-px underline-overlap offset so the chips sit cleanly above the strip divider; the strip gains bottom padding (10px) to lift the chips off the divider and gap:8px (down from gap-x-6/24px) so the chips read as a group. Rebuilt css/styles.css via `npm run build`. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

w-b-hivemind · 2026-07-08T21:41:04Z

HiveMind Sessions

2 sessions · 20m · $6.44

Session	Agent	Duration	Tokens	Cost	Lines
Weave Traffic Report Analysis and HTML Summary `417d8ed7-e236-43f1-8cae-7526850fb24e`	claude	6m	45.9K	$2.39	+260 -0
Create OTel Agent Tracing Weave Documentation `60c26cf3-0f35-4caf-8cb7-904d18b90277`	claude	14m	27.9K	$4.05	+0 -0
Total		20m	73.8K	$6.44	+260 -0

View all sessions in HiveMind →

Run claude --resume 417d8ed7-e236-43f1-8cae-7526850fb24e to pickup where you left off.

Per review feedback the bordered chips made the tab strip look busy. Replace them with plain-text labels separated by a short, vertically centered 1px --color-stroke rule (a ::before on each tab that follows another), and restore Mintlify's understated bottom underline as the active indicator. The first tab sits flush left and the strip gap is zeroed so the dividers define the spacing. Rebuilt css/styles.css via `npm run build`. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Many Weave pages used <Tabs>/<Tab> purely to switch between language variants of a code example (e.g. Python vs. TypeScript). A <CodeGroup> is the idiomatic component for that, so switch every <Tabs> block whose tabs contain nothing but a single code fence over to <CodeGroup>, moving each tab's title into the code fence's info string (e.g. ```python lines -> ```python Python lines) so the tab labels are preserved. Highlight and twoslash annotations are kept intact. Blocks whose tabs mix prose with code are left as <Tabs>, since a CodeGroup can only hold code. 79 blocks across 25 files were converted; 71 mixed blocks remain as Tabs. Translations (fr/ja/ko) are untouched and regenerate from these sources. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

github-actions · 2026-07-09T19:55:18Z

📚 Mintlify Preview Links

🔗 View Full Preview

📝 Changed (25 total)

📄 Pages (25)

File	Preview
`weave.mdx`	Weave
`weave/guides/core-types/datasets.mdx`	Datasets
`weave/guides/core-types/prompts.mdx`	Prompts
`weave/guides/evaluation/custom-monitors.mdx`	Custom Monitors
`weave/guides/evaluation/evaluation_logger.mdx`	Evaluation Logger
`weave/guides/integrations/anthropic.mdx`	Anthropic
`weave/guides/integrations/inference.mdx`	Inference
`weave/guides/integrations/openai-realtime-audio.mdx`	Openai Realtime Audio
`weave/guides/tools/attributes.mdx`	Attributes
`weave/guides/tools/weave-in-workspaces.mdx`	Weave In Workspaces
... and 15 more files

🤖 Generated automatically when Mintlify deployment succeeds
📍 Deployment: 17f6c13 at 2026-07-10 18:21:35 UTC

Copilot

Pull request overview

This PR updates the docs site’s tabbed UI to render tab groups as a bordered “card” (matching existing card styling), and refactors many Weave docs pages to use Mintlify’s <CodeGroup> for language-switched code samples.

Changes:

Add global styling for Mintlify tab containers (.tab-container) to provide a bordered, rounded, card-like chrome.
Convert many Weave docs code examples from <Tabs>/<Tab> to <CodeGroup> code fences (Python/TypeScript, plus other variants like uv/pip).
Update the minified stylesheet output to include the new tab-container rules.

Reviewed changes

Copilot reviewed 26 out of 27 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
weave/tutorial-weave_models.mdx	Convert code examples from `<Tabs>` to `<CodeGroup>`.
weave/tutorial-tracing_2.mdx	Convert code examples from `<Tabs>` to `<CodeGroup>`.
weave/tutorial-rag.mdx	Convert multiple code sections from `<Tabs>` to `<CodeGroup>`.
weave/tutorial-eval.mdx	Convert code examples from `<Tabs>` to `<CodeGroup>`.
weave/quickstart.mdx	Convert the main quickstart code example from `<Tabs>` to `<CodeGroup>`.
weave/quickstart-inference.mdx	Convert multiple sections from `<Tabs>` to `<CodeGroup>`.
weave/guides/tracking/trace-generator-func.mdx	Convert example from `<Tabs>` to `<CodeGroup>`.
weave/guides/tracking/trace-disable.mdx	Convert examples from `<Tabs>` to `<CodeGroup>`.
weave/guides/tracking/trace-agents.mdx	Convert multiple examples from `<Tabs>` to `<CodeGroup>`.
weave/guides/tracking/trace-agents-batch.mdx	Convert examples from `<Tabs>` to `<CodeGroup>`.
weave/guides/tracking/trace-agents-attributes.mdx	Convert examples from `<Tabs>` to `<CodeGroup>`.
weave/guides/tracking/otel.mdx	Convert dependency install snippets from `<Tabs>` to `<CodeGroup>`.
weave/guides/tracking/ops.mdx	Convert “kinds and colors” example from `<Tabs>` to `<CodeGroup>`.
weave/guides/tracking/feedback.mdx	Convert multiple examples from `<Tabs>` to `<CodeGroup>`.
weave/guides/tracking/call-schema-reference.mdx	Convert examples from `<Tabs>` to `<CodeGroup>`.
weave/guides/tools/weave-in-workspaces.mdx	Convert example from `<Tabs>` to `<CodeGroup>`.
weave/guides/tools/attributes.mdx	Convert examples from `<Tabs>` to `<CodeGroup>`.
weave/guides/integrations/openai-realtime-audio.mdx	Convert uv/pip install steps from `<Tabs>` to `<CodeGroup>`.
weave/guides/integrations/inference.mdx	Convert Bash/Python examples from `<Tabs>` to `<CodeGroup>`.
weave/guides/integrations/anthropic.mdx	Convert examples from `<Tabs>` to `<CodeGroup>`.
weave/guides/evaluation/evaluation_logger.mdx	Convert examples from `<Tabs>` to `<CodeGroup>`.
weave/guides/evaluation/custom-monitors.mdx	Convert examples from `<Tabs>` to `<CodeGroup>`.
weave/guides/core-types/prompts.mdx	Convert examples from `<Tabs>` to `<CodeGroup>`.
weave/guides/core-types/datasets.mdx	Convert examples from `<Tabs>` to `<CodeGroup>`.
weave.mdx	Convert install instructions from `<Tabs>` to `<CodeGroup>`.
scripts/css-minify/cards.css	Add `.tab-container` styling rules (border, padding, dividers, spacing).
css/styles.css	Include the minified `.tab-container` styling rules.

Files not reviewed (1)

css/styles.css: Generated file

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

mintlify Bot deployed to staging July 6, 2026 20:17 View deployment

mintlify Bot deployed to staging July 6, 2026 20:34 View deployment

mintlify Bot deployed to staging July 8, 2026 20:21 View deployment

mintlify Bot deployed to staging July 9, 2026 19:34 View deployment

mintlify Bot deployed to staging July 9, 2026 19:54 View deployment

johndmulhausen requested a review from Copilot July 9, 2026 20:33

dbrian57 marked this pull request as ready for review July 9, 2026 20:33

dbrian57 requested a review from a team as a code owner July 9, 2026 20:33

Copilot started reviewing on behalf of johndmulhausen July 9, 2026 20:33 View session

Copilot AI reviewed Jul 9, 2026

View reviewed changes

Comment thread weave/tutorial-rag.mdx

Comment thread weave/tutorial-rag.mdx

Comment thread weave/tutorial-rag.mdx

Comment thread weave/tutorial-rag.mdx Outdated

Apply suggestions from code review

e48ebae

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

mintlify Bot deployed to staging July 10, 2026 16:01 View deployment

Merge branch 'main' into css-tab-borders

17f6c13

mintlify Bot deployed to staging July 10, 2026 18:21 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add borders to content Tabs component#2867

Add borders to content Tabs component#2867
dbrian57 wants to merge 7 commits into
mainfrom
css-tab-borders

dbrian57 commented Jul 6, 2026 •

edited

Loading

Uh oh!

mintlify Bot commented Jul 6, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jul 6, 2026

Uh oh!

w-b-hivemind Bot commented Jul 8, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jul 9, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

dbrian57 commented Jul 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Uh oh!

mintlify Bot commented Jul 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jul 6, 2026

🔗 Link Checker Results

Uh oh!

w-b-hivemind Bot commented Jul 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

HiveMind Sessions

Uh oh!

github-actions Bot commented Jul 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📚 Mintlify Preview Links

📝 Changed (25 total)

📄 Pages (25)

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

dbrian57 commented Jul 6, 2026 •

edited

Loading

mintlify Bot commented Jul 6, 2026 •

edited

Loading

w-b-hivemind Bot commented Jul 8, 2026 •

edited

Loading

github-actions Bot commented Jul 9, 2026 •

edited

Loading