[raj-dubey1]

Description

On /docs/chat-call, the npx @cometchat/skills add block in the hero is broken. The block is about 2px wide, the command is clipped to "np", and the feedback, copy and ask-AI buttons sit to the left of the content column, partly off-screen.

Cause: #348 added this CSS, which applies to every div inside the block:

.hero-skills-code pre,
.hero-skills-code div {
  background-color: #000 !important;
  max-width: fit-content !important;
}

Mintlify's inner code wrapper is w-0 min-w-full, so its content width is effectively 0. fit-content then shrinks the outer .code-block to almost nothing. The toolbar is positioned right-4 from that block, so it ends up on the left.

Fix: remove the <style> block and the hero-skills-code wrapper, so the page uses the default Mintlify code block. That class isn't used anywhere else.

The fix doesn't keep a black background at full width. Mintlify renders the light-theme code colours here, such as rgb(10, 48, 105), and those are hard to read on #000.

Type of Change

• Documentation correction/update

Checklist

• My branch name follows the naming convention
• My changes are accurately described in this pull request

Additional Information

Measured by removing the CSS from the live page in Chrome:

Viewport	Block width before	Block width after	Toolbar start before	Toolbar start after
1280px	2px	516px	x = -5	x = 509
390px	2px	350px	x = -85	x = 263

Light and dark themes gave the same widths and positions. Neither viewport scrolls horizontally.

🤖 Generated with Claude Code

https://claude.ai/code/session_01XbguTwdQxd6Vh7nDdURGwM

[mintlify]

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

Project	Status	Preview	Updated
cometchat	🟢 Ready	View Preview	Nov 2, 2026, 1:40 PM

💡 Tip: Enable Automations to automatically generate PRs for you.

[ketanyekale]

Review: verified, approving

I reproduced the bug on the live page and re-measured the preview deployment in both themes at 1280px and 390px. Every claim in the description holds up.

Baseline reproduced — live /docs/chat-call at 390px: block width 2px, toolbar buttons at x = -85 / -53 / -21 (off-screen left). Matches the reported numbers exactly.

Diagnosis confirmed — the inner Mintlify wrapper really is w-0 min-w-full max-w-full, so max-width: fit-content on every descendant div collapses .code-block to ~2px and drags the right-4 toolbar off the left edge. Correct root cause, not a symptom fix.

Fix verified on the preview:

Viewport	Theme	Block width	Toolbar x	Horizontal overflow
1280px	dark	516px	509 / 541 / 573	0
390px	light	350px	263 / 295 / 327	0

Toolbar sits inside the block on the right in both cases, the full command renders, and .hero-skills-code is gone from the DOM with no leftover <style> tag. Code search finds no other use of that class, so removing it is self-contained. Mintlify Deployment and link-rot checks are green.

Non-blocking observations:

1. At 390px the command is wider than the block (scrollWidth 391 vs clientWidth 348), so add sits under the toolbar's fade. The container is overflow-x: scroll, so the text is reachable and the copy button returns the full command — this is stock Mintlify behaviour for a long line on mobile, not something this PR introduces. Worth knowing the hero command is not fully visible on a phone at a glance.
2. This drops the full-width black background #348 was going for. Agree with the call given the light-theme token colours, but whoever owns the hero design may want to revisit it deliberately rather than inherit the default by way of a hotfix.

Net: removes a visibly broken element with a correctly diagnosed, minimal, well-scoped change. Approving.