fix(qa): restore styles in example and docs apps#52
Merged
Conversation
Three root causes fixed:
1. **Tailwind v4 no utility classes** — `@import 'tailwindcss'` alone is
just a CSS file; it requires the `@tailwindcss/postcss` plugin to scan
sources and emit utility classes. Added `postcss.config.mjs` +
`@tailwindcss/postcss` devDep to both apps.
2. **Wrong `@source` glob path** — the old path `../../node_modules/…`
from `apps/*/app/globals.css` resolved two levels up to `apps/`,
missing the library entirely. Corrected to
`../../../packages/next-shell/src/**/*.{ts,tsx}` so Tailwind scans the
TypeScript source directly (PostCSS reads files as text for class
names, no compile step needed).
3. **Sidebar missing `<Sidebar>` wrapper** — `ShellSidebar` in the
example `(shell)/layout.tsx` was rendering `<SidebarNav>` directly
inside `AppShell`'s sidebar slot without the `<Sidebar>` +
`<SidebarContent>` shell. The `<Sidebar>` component provides the fixed
positioning, gap element, and `bg-sidebar` surface; without it the nav
items floated in the flex flow with no panel behind them.
Also carries docs-app improvements from an earlier session: local
BigBlue Terminal font, dark `<html>` class wired to Inter/JetBrains
font CSS variables, and `viewport` metadata. Added `next-env.d.ts` to
docs `.gitignore` (auto-generated, was triggering ESLint ignore-pattern
warning in lint-staged).
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
jonmatumdev
previously approved these changes
Apr 17, 2026
Collaborator
jonmatumdev
left a comment
jonmatumdev
left a comment
There was a problem hiding this comment.
All checks passed. AI review found no issues. Auto-approved.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
jonmatumdev
approved these changes
Apr 17, 2026
Collaborator
jonmatumdev
left a comment
jonmatumdev
left a comment
There was a problem hiding this comment.
All checks passed. AI review found no issues. Auto-approved.
jonmatumdev
approved these changes
Apr 17, 2026
Collaborator
jonmatumdev
left a comment
jonmatumdev
left a comment
There was a problem hiding this comment.
All checks passed. AI review found no issues. Auto-approved.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Closes three distinct style breakages in the example and docs apps.
@import 'tailwindcss'is just a CSS file import; the@tailwindcss/postcssplugin is required to scan sources and emit utilities. Addedpostcss.config.mjs+@tailwindcss/postcssdevDep to both apps.@sourcepath —../../node_modules/…fromapps/*/app/globals.cssresolved toapps/(two levels up), completely missing the library. Fixed to../../../packages/next-shell/src/**/*.{ts,tsx}— PostCSS scans TS source as plain text, no build needed.<Sidebar>wrapper — the exampleShellSidebarpassed<SidebarNav>directly intoAppShell's sidebar slot. The<Sidebar>component provides the fixed-position panel, gap element, andbg-sidebarsurface. Added the full<Sidebar>+<SidebarHeader>+<SidebarContent>shell.Also: docs-app font wiring (Inter, JetBrains Mono, BigBlue Terminal), dark
<html>class,viewportmetadata, andnext-env.d.tsadded to docs.gitignore.Verification
/dashboard— sidebar panel, topbar, 4-column stat cards, loading/empty states all render with full token-driven styles/data— paginated table, status badges, filter input all styled correctly/settings— profile form cards with proper surfaces/admin— role/session/adapter cards renderChecklist
Refs #13
🤖 Generated with Claude Code