fix(docs): prevent component preview clipping

[jevin98]

Fixes component demos whose content is taller than the default preview area being clipped before it reaches the code panel. Commit 03554c98 changed the shared preview wrapper in ComponentPreviewTabs.vue from min-h-72 to the fixed height h-72; because the outer preview card uses overflow-hidden, taller demos such as Table lost their final rows, footer, and caption.

This restores min-h-72, preserving the 18rem default while allowing the preview wrapper to grow with its rendered component. The alignment changes from the original commit remain unchanged.

Summary by CodeRabbit

• Bug Fixes
  • Updated the component preview area to expand when its content exceeds the minimum height, preventing content from being constrained or clipped.

[coderabbitai]

📝 Walkthrough

Walkthrough

The preview container now uses min-h-72 instead of h-72, so content can expand beyond the 72-unit baseline.

Changes

Preview layout

Layer / File(s)	Summary
Allow preview expansion apps/v4/components/ComponentPreviewTabs.vue	The preview container uses a minimum height instead of a fixed height.

Estimated code review effort: 1 (Trivial) | ~2 minutes

Suggested reviewers: zernonia

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main change: preventing component preview clipping.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@apps/v4/components/ComponentPreviewTabs.vue`:
- Line 38: Update the preview class list in ComponentPreviewTabs to add
data-[chromeless=true]:min-h-0 alongside the existing chromeless height and
padding overrides, ensuring chromeless previews no longer retain the min-h-72
constraint.

🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 8ba2df41-ac23-4fb1-9497-361be97b1184

📥 Commits

Reviewing files that changed from the base of the PR and between 3f048df and 3b55da6.

📒 Files selected for processing (1)

• apps/v4/components/ComponentPreviewTabs.vue

[coderabbitai]

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -eu

file="apps/v4/components/ComponentPreviewTabs.vue"
printf '%s\n' '--- target file ---'
cat -n "$file" | sed -n '1,110p'

printf '%s\n' '--- related chromeless usage ---'
rg -n -C 3 'chromeless|ComponentPreviewTabs' apps/v4 --glob '*.vue' --glob '*.ts' --glob '*.tsx' | head -240

printf '%s\n' '--- Tailwind/config context ---'
rg -n -C 3 'min-h-72|data-\[chromeless=true\]:h-auto|tailwind|`@theme`' apps/v4 --glob '*.{vue,ts,js,css}' | head -240

Repository: unovue/shadcn-vue

Length of output: 23836

---

🏁 Script executed:

#!/bin/bash
set -eu

printf '%s\n' '--- chromeless prop definitions and call sites ---'
rg -n -C 5 'chromeLessOnMobile|chrome-less-on-mobile|chromeless' apps/v4 --glob '*.{vue,ts,tsx,js}' | head -320

printf '%s\n' '--- ComponentPreview prop forwarding ---'
cat -n apps/v4/components/content/ComponentPreview.vue | sed -n '1,90p'

printf '%s\n' '--- relevant change summary ---'
git diff --stat -- apps/v4/components/ComponentPreviewTabs.vue
git diff -- apps/v4/components/ComponentPreviewTabs.vue | sed -n '1,140p'

printf '%s\n' '--- available CSS tooling ---'
command -v node || true
command -v npm || true
test -d node_modules && echo root-node_modules-present || true
test -d apps/v4/node_modules && echo apps-v4-node_modules-present || true

Repository: unovue/shadcn-vue

Length of output: 5595

---

🏁 Script executed:

#!/bin/bash
set -eu

python3 - <<'PY'
# Read-only CSS cascade model for the two declarations in the reviewed class list.
# Both declarations apply to a chromeless element; the result depends on cascade
# order, not on h-auto removing min-height.
rules = [
    ("min-h-72", "min-height", "18rem", 0),
    ("data-[chromeless=true]:min-h-0", "min-height", "0px", 1),
]
chromeless = True
applicable = [
    rule for rule in rules
    if rule[0] == "min-h-72" or (chromeless and rule[0].startswith("data-[chromeless=true]:"))
]
winner = max(applicable, key=lambda rule: (rule[3],))
print("chromeless=true applicable min-height declarations:")
for rule in applicable:
    print(f"  {rule[0]} -> {rule[2]}")
print(f"modelled override: {winner[0]} -> {winner[2]}")
print("h-auto changes height, not min-height")
PY

Repository: unovue/shadcn-vue

Length of output: 362

---

🏁 Script executed:

#!/bin/bash
set -eu

node - <<'JS'
const fs = require('node:fs')
const path = require('node:path')

for (const base of ['node_modules/tailwindcss', 'apps/v4/node_modules/tailwindcss']) {
  const pkg = path.join(base, 'package.json')
  if (fs.existsSync(pkg)) {
    console.log(`${pkg}: ${JSON.parse(fs.readFileSync(pkg, 'utf8')).version}`)
  }
}
JS

node - <<'JS'
const fs = require('node:fs')
const path = require('node:path')

function load(name) {
  for (const base of ['node_modules', 'apps/v4/node_modules']) {
    try {
      return require(require.resolve(name, { paths: [path.resolve(base)] }))
    } catch {}
  }
  throw new Error(`Cannot resolve ${name}`)
}

const tailwind = load('tailwindcss')
const candidates = [
  'min-h-72',
  'h-auto',
  'data-[chromeless=true]:h-auto',
  'data-[chromeless=true]:min-h-0',
]
const source = `
  `@theme` { --spacing: 0.25rem; }
  `@tailwind` utilities;
`
const compile = tailwind.compile(source)
const css = compile.build(candidates)
console.log(css)
JS

Repository: unovue/shadcn-vue

Length of output: 743

---

🏁 Script executed:

#!/bin/bash
set -eu

printf '%s\n' '--- declared Tailwind dependencies ---'
rg -n -C 2 '"(`@tailwindcss/vite`|tailwindcss|tailwind-merge)"' package.json apps/v4/package.json pnpm-lock.yaml yarn.lock package-lock.json 2>/dev/null | head -160 || true

printf '%s\n' '--- arbitrary data variants using min-height utilities ---'
rg -n 'data-\[[^]]+\]:min-h-|data-\[[^]]+\]:h-|min-h-72|data-\[[^]]+\]:p-0' apps/v4 --glob '*.{vue,ts,tsx,css,html}' | head -240

printf '%s\n' '--- installed Tailwind-related package directories ---'
find node_modules apps/v4/node_modules -maxdepth 2 -type d \( -iname '*tailwind*' -o -iname '*oxide*' \) -print 2>/dev/null | head -120

Repository: unovue/shadcn-vue

Length of output: 50373

---

Reset the minimum height in chromeless mode.

When data-chromeless="true", h-auto does not remove min-h-72. Short chromeless previews can retain an unnecessary 18rem minimum height. Add data-[chromeless=true]:min-h-0.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/v4/components/ComponentPreviewTabs.vue` at line 38, Update the preview
class list in ComponentPreviewTabs to add data-[chromeless=true]:min-h-0
alongside the existing chromeless height and padding overrides, ensuring
chromeless previews no longer retain the min-h-72 constraint.

[jevin98]

@zernonia I noticed that commit 03554c9 changed the component preview container from min-h-72 to the fixed height h-72. Could you share the reason for this adjustment?
Restoring min-h-72 fixes the clipping for taller demos, but I want to avoid affecting the behavior that the original change intended to support. If this revert impacts a specific scenario or design requirement, could you point it out? I’ll adjust the fix accordingly.

[zernonia]

Thanks for the fix @jevin98 , I've gone through and fix those previewClass, should be all good now