Skip to content

fix(sidebar): add min-w-0 to SidebarInset #1747

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
rogelioRuiz wants to merge 2 commits into
base: dev
Choose a base branch
from
Open

fix(sidebar): add min-w-0 to SidebarInset #1747

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2dc8935
feat: add Luma visual style support
rogelioRuiz Apr 1, 2026
05af093
fix(sidebar): add min-w-0 to SidebarInset to prevent content overflow
rogelioRuiz Apr 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions apps/v4/assets/css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,14 @@
@import "../../registry/styles/style-lyra.css" layer(base);
@import "../../registry/styles/style-maia.css" layer(base);
@import "../../registry/styles/style-mira.css" layer(base);
@import "../../registry/styles/style-luma.css" layer(base);

@custom-variant style-vega (&:where(.style-vega *));
@custom-variant style-nova (&:where(.style-nova *));
@custom-variant style-lyra (&:where(.style-lyra *));
@custom-variant style-maia (&:where(.style-maia *));
@custom-variant style-mira (&:where(.style-mira *));
@custom-variant style-luma (&:where(.style-luma *));


@custom-variant dark (&:is(.dark *));
Expand Down
2 changes: 1 addition & 1 deletion apps/v4/registry/bases/reka/ui/sidebar/SidebarInset.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const props = defineProps<{
<main
data-slot="sidebar-inset"
:class="cn(
'cn-sidebar-inset relative flex w-full flex-1 flex-col',
'cn-sidebar-inset relative flex min-w-0 w-full flex-1 flex-col',
props.class,
)"
>
Expand Down
15 changes: 15 additions & 0 deletions apps/v4/registry/config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -205,6 +205,21 @@ export const PRESETS: Preset[] = [
menuColor: "default",
radius: "default",
},
{
name: "reka-luma",
title: "Luma",
description: "Luma / Lucide / Inter",
base: "reka",
style: "luma",
baseColor: "neutral",
theme: "neutral",
iconLibrary: "lucide",
font: "inter",
item: "Item",
menuAccent: "subtle",
menuColor: "default",
radius: "default",
},
]

export function getThemesForBaseColor(baseColorName: string) {
Expand Down
2 changes: 1 addition & 1 deletion apps/v4/registry/new-york-v4/ui/sidebar/SidebarInset.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const props = defineProps<{
<main
data-slot="sidebar-inset"
:class="cn(
'bg-background relative flex w-full flex-1 flex-col',
'bg-background relative flex min-w-0 w-full flex-1 flex-col',
'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
props.class,
)"
Expand Down
23 changes: 23 additions & 0 deletions apps/v4/registry/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,29 @@ export const STYLES = [
</svg>
`,
},
{
name: "luma",
title: "Luma",
description: "Fluid, luminous, and glassy.",
icon: `
<svg
xmlns="http://www.w3.org/2000/svg"
width="128"
height="128"
viewBox="0 0 24 24"
fill="none"
role="img"
color="currentColor"
>
<path
d="M2 12C2 8.134 5.134 5 9 5H15C18.866 5 22 8.134 22 12C22 15.866 18.866 19 15 19H9C5.134 19 2 15.866 2 12Z"
stroke="currentColor"
strokeWidth="2"
strokeLinejoin="round"
></path>
</svg>
`,
},
] as const

export type Style = (typeof STYLES)[number]
1,325 changes: 1,325 additions & 0 deletions apps/v4/registry/styles/style-luma.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion packages/cli/src/registry/config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const DEFAULT_BASE = "reka"
// Visual styles that are transformations of the base style
// These styles don't have separate registry entries - they use new-york-v4
// and apply CSS class transformations during installation
const VISUAL_STYLES = ["vega", "nova", "maia", "lyra", "mira"]
const VISUAL_STYLES = ["vega", "nova", "maia", "lyra", "mira", "luma"]

/**
* Resolves the registry style to use for fetching components.
Expand Down
19 changes: 19 additions & 0 deletions packages/cli/src/registry/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,11 @@ export const STYLES = [
label: "Mira",
description: "Compact. Made for dense interfaces.",
},
{
name: "luma",
label: "Luma",
description: "Fluid, luminous, and glassy.",
},
] as const

// Available fonts with Google Fonts configuration
Expand Down Expand Up @@ -195,6 +200,20 @@ export const PRESETS = [
menuColor: "default" as const,
radius: "default",
},
{
name: "reka-luma",
title: "Luma",
description: "Luma / Lucide / Inter",
base: "reka",
style: "luma",
baseColor: "neutral",
theme: "neutral",
iconLibrary: "lucide",
font: "inter",
menuAccent: "subtle" as const,
menuColor: "default" as const,
radius: "default",
},
] as const

export const BASE_COLORS = [
Expand Down
6 changes: 4 additions & 2 deletions packages/cli/src/registry/resolver.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
buildUrlAndHeadersForRegistryItem,
resolveRegistryUrl,
} from "@/src/registry/builder"
import { resolveRegistryStyle } from "@/src/registry/config"
import { setRegistryHeaders } from "@/src/registry/context"
import {
RegistryNotConfiguredError,
Expand Down Expand Up @@ -95,7 +96,8 @@ export async function fetchRegistryItems(
}
}

const path = `styles/${config?.style ?? "new-york-v4"}/${item}.json`
const registryStyle = resolveRegistryStyle(config?.style)
const path = `styles/${registryStyle}/${item}.json`
const [result] = await fetchRegistry([path], options)
try {
return registryItemSchema.parse(result)
Expand Down Expand Up @@ -488,7 +490,7 @@ async function resolveRegistryDependencies(

const style = config.resolvedPaths?.cwd
? await getTargetStyleFromConfig(config.resolvedPaths.cwd, config.style)
: config.style
: resolveRegistryStyle(config.style)
Comment on lines 491 to +493
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Apr 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Use resolved visual style before getTargetStyleFromConfig.

Line 492 currently passes raw config.style; in Tailwind v3 this can keep luma and generate styles/luma/*.json paths, which diverges from the fallback mapping used elsewhere.

💡 Suggested fix 
-  const style = config.resolvedPaths?.cwd
-    ? await getTargetStyleFromConfig(config.resolvedPaths.cwd, config.style)
-    : resolveRegistryStyle(config.style)
+  const resolvedStyle = resolveRegistryStyle(config.style)
+  const style = config.resolvedPaths?.cwd
+    ? await getTargetStyleFromConfig(config.resolvedPaths.cwd, resolvedStyle)
+    : resolvedStyle
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@packages/cli/src/registry/resolver.ts` around lines 491 - 493, Compute the
resolved visual style first using resolveRegistryStyle(config.style) and then
pass that resolved value into getTargetStyleFromConfig when
config.resolvedPaths?.cwd is present; i.e., call
resolveRegistryStyle(config.style) to produce a resolvedStyle, and then use
await getTargetStyleFromConfig(config.resolvedPaths.cwd, resolvedStyle) for the
cwd branch (otherwise return resolvedStyle). This ensures
getTargetStyleFromConfig receives the fallback-mapped style instead of the raw
config.style.


const urls = registryNames.map(name =>
resolveRegistryUrl(isUrl(name) ? name : `styles/${style}/${name}.json`),
Expand Down
Loading