fix(frontend): address tailwind v4 migration review comments

- Fix invalid `in-data-` prefix to `group-data-` in sidebar rail
- Fix variant order: group-data before hover in sidebar rail
- Fix invalid `--theme()` to `theme()` in container media query
- Make navbar background translucent for backdrop-blur effect

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Lluis Agusti
2026-03-11 23:25:02 +08:00
parent 2d28629a89
commit d179a6031b
3 changed files with 4 additions and 4 deletions

View File

@@ -10,7 +10,7 @@
@utility container {
margin-inline: auto;
padding-inline: 2rem;
@media (width >= --theme(--breakpoint-sm)) {
@media (width >= theme(--breakpoint-sm)) {
max-width: none;
}
@media (width >= 1400px) {

View File

@@ -62,7 +62,7 @@ export function Navbar() {
<PreviewBanner branchName={previewBranchName} />
) : null}
<nav
className="inline-flex w-full items-center border border-none bg-[#FAFAFA] p-3 backdrop-blur-[26px]"
className="inline-flex w-full items-center border border-none bg-[#FAFAFA]/80 p-3 backdrop-blur-[26px]"
style={{ height: NAVBAR_HEIGHT_PX }}
>
{/* Left section */}

View File

@@ -316,9 +316,9 @@ const SidebarRail = React.forwardRef<
title="Toggle Sidebar"
className={cn(
"absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex",
"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
"group-data-[side=left]:cursor-w-resize group-data-[side=right]:cursor-e-resize",
"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
"group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar",
"group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
className,