Skip to content

chore: Apply shadcn latest styling changes to components #722

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
ntatoud wants to merge 4 commits into
base: main
Choose a base branch
from
Open

chore: Apply shadcn latest styling changes to components #722

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b31fdb9
chore: apply shadcn latest styling changes to components
ntatoud Mar 14, 2026
adf17e3
fix: remove disabled prop and story from ButtonLink
ntatoud Mar 14, 2026
61857ea
fix: revert card to pre-update styles and fix login-hint whitespace
ntatoud Mar 17, 2026
f6f66bc
fix: restore z-50 on dialog/drawer overlays and pass forceRenderOverl…
ntatoud Mar 17, 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
20 changes: 15 additions & 5 deletions src/components/ui/alert.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@ import * as React from 'react';
import { cn } from '@/lib/tailwind/utils';

const alertVariants = cva(
'relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
"group/alert relative grid w-full gap-0.5 rounded-lg border px-4 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",

@coderabbitai coderabbitai Bot Mar 17, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

Use logical-direction utilities to keep Alert RTL-safe.

Line 7 (text-left) and Line 70 (right-3) hardcode LTR direction. This can misalign alert content/actions in RTL locales.

💡 Proposed fix 
-  "group/alert relative grid w-full gap-0.5 rounded-lg border px-4 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
+  "group/alert relative grid w-full gap-0.5 rounded-lg border px-4 py-3 text-start text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
-      className={cn('absolute top-2.5 right-3', className)}
+      className={cn('absolute top-2.5 end-3', className)}

Also applies to: 70-70

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/components/ui/alert.tsx` at line 7, The alert component hardcodes LTR
utilities ("text-left" and a "right-3" positioning) which break RTL layouts;
update the main class string in the group/alert element (the long class that
currently contains "text-left") to use logical-direction utilities (replace
"text-left" with "text-start"), and update any positioning instances that use
"right-3" (e.g., the action/icon wrapper referenced in this file) to their
logical equivalents (e.g., "end-3") so the Alert becomes RTL-safe while keeping
the same visual layout in LTR.

{
variants: {
variant: {
default: 'bg-card text-card-foreground',
destructive:
'bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current',
'bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current',
},
},
defaultVariants: {
Expand Down Expand Up @@ -39,7 +39,7 @@ function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
<div
data-slot="alert-title"
className={cn(
'col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight',
'font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground',
className
)}
{...props}
Expand All @@ -55,12 +55,22 @@ function AlertDescription({
<div
data-slot="alert-description"
className={cn(
'col-start-2 grid justify-items-start gap-1 text-sm text-muted-foreground [&_p]:leading-relaxed',
'text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4',
className
)}
{...props}
/>
);
}

export { Alert, AlertDescription, AlertTitle };
function AlertAction({ className, ...props }: React.ComponentProps<'div'>) {
return (
<div
data-slot="alert-action"
className={cn('absolute top-2.5 right-3', className)}
{...props}
/>
);
}

export { Alert, AlertAction, AlertDescription, AlertTitle };
4 changes: 2 additions & 2 deletions src/components/ui/avatar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ function Avatar({
data-slot="avatar"
data-size={size}
className={cn(
'group/avatar relative flex size-8 shrink-0 rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6',
'group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten',
className
)}
{...props}
Expand Down Expand Up @@ -140,7 +140,7 @@ function AvatarBadge({ className, ...props }: React.ComponentProps<'span'>) {
<span
data-slot="avatar-badge"
className={cn(
'absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground ring-2 ring-background select-none',
'absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none',
'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden',
'group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2',
'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2',
Expand Down
25 changes: 0 additions & 25 deletions src/components/ui/button-link.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,28 +142,3 @@ export const FixedWidth = () => {
</div>
);
};

export const Disabled = () => {
return (
<div className="flex gap-4">
<ButtonLink to="/" disabled>
Default
</ButtonLink>
<ButtonLink to="/" disabled variant="secondary">
Secondary
</ButtonLink>
<ButtonLink to="/" disabled variant="destructive">
Destructive
</ButtonLink>
<ButtonLink to="/" disabled variant="destructive-secondary">
Destructive
</ButtonLink>
<ButtonLink to="/" disabled variant="ghost">
Ghost
</ButtonLink>
<ButtonLink to="/" disabled variant="link">
Link
</ButtonLink>
</div>
);
};
2 changes: 1 addition & 1 deletion src/components/ui/button-link.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ function ButtonLink({
size,
...props
}: VariantProps<typeof buttonVariants> &
ComponentProps<'a'> &
Omit<ComponentProps<'a'>, 'disabled'> &
LinkProps & { className?: string }) {
return (
<Link
Expand Down
2 changes: 1 addition & 1 deletion src/components/ui/button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { cn } from '@/lib/tailwind/utils';
import { Spinner } from '@/components/ui/spinner';

const buttonVariants = cva(
"relative inline-flex w-fit max-w-full min-w-0 shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-md border border-transparent text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-40 disabled:grayscale aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-40 data-disabled:grayscale dark:disabled:opacity-20 dark:aria-invalid:ring-destructive/40 dark:data-disabled:opacity-20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&>span]:gap-2",
"group/button relative inline-flex w-fit max-w-full min-w-0 shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:translate-y-px disabled:pointer-events-none disabled:opacity-40 disabled:grayscale aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-40 data-disabled:grayscale dark:disabled:opacity-20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 dark:data-disabled:opacity-20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&>span]:gap-2",
{
variants: {
variant: {
Expand Down
8 changes: 4 additions & 4 deletions src/components/ui/dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ function DialogOverlay({
<DialogPrimitive.Backdrop
data-slot="dialog-overlay"
className={cn(
'fixed inset-0 isolate z-50 bg-black/80 backdrop-blur-xs duration-100 data-closed:animate-out data-closed:fade-out-0 data-open:animate-in data-open:fade-in-0',
'fixed inset-0 isolate z-50 bg-black/10 duration-100 data-closed:animate-out data-closed:fade-out-0 data-open:animate-in data-open:fade-in-0 supports-backdrop-filter:backdrop-blur-xs',

@coderabbitai coderabbitai Bot Mar 17, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major

Significant overlay opacity reduction may cause visual regression.

The overlay opacity changed from bg-black/80 (80%) to bg-black/10 (10%) — an 8× reduction. Combined with the conditional supports-backdrop-filter:backdrop-blur-xs, this makes the overlay nearly transparent by default.

Given the visual regressions reported in PR comments, this dramatic change may reduce dialog prominence and affect readability of content behind the overlay. Consider whether this aligns with the project's design intent or if a middle-ground value (e.g., bg-black/50) would better balance the update with existing UX.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/components/ui/dialog.tsx` at line 34, The overlay opacity was reduced
from bg-black/80 to bg-black/10 in the dialog overlay class string, which makes
the backdrop nearly transparent and may cause visual regressions; update the
class in the Dialog overlay (the fixed inset-0 isolate z-50 ... string in
src/components/ui/dialog.tsx) to use a stronger semi-transparent value (for
example bg-black/50 or bg-black/70) and retain the
supports-backdrop-filter:backdrop-blur-xs token so the blur still applies
conditionally—choose the value that matches your design tokens or theme
variables and adjust the class string accordingly to restore appropriate dialog
prominence.

className
)}
{...props}
Expand Down Expand Up @@ -88,7 +88,7 @@ function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
return (
<div
data-slot="dialog-header"
className={cn('flex flex-col gap-1 text-left', className)}
className={cn('flex flex-col gap-2', className)}
{...props}
/>
);
Expand Down Expand Up @@ -118,7 +118,7 @@ function DialogFooter({
<div
data-slot="dialog-footer"
className={cn(
'flex flex-col-reverse gap-2 sm:flex-row sm:justify-between',
'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
className
)}
{...props}
Expand All @@ -137,7 +137,7 @@ function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
return (
<DialogPrimitive.Title
data-slot="dialog-title"
className={cn('text-lg leading-none font-semibold', className)}
className={cn('leading-none font-medium', className)}
{...props}
/>
);
Expand Down
8 changes: 4 additions & 4 deletions src/components/ui/dropdown-menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ function DropdownMenuItem({
data-inset={inset}
data-variant={variant}
className={cn(
"relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-accent data-highlighted:text-accent-foreground data-inset:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 data-[variant=destructive]:data-highlighted:text-destructive dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!",
"group/dropdown-menu-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
className
)}
{...props}
Expand Down Expand Up @@ -167,7 +167,7 @@ function DropdownMenuLabel({
data-slot="dropdown-menu-label"
data-inset={inset}
className={cn(
'px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',
'px-2 py-1.5 text-xs font-medium text-muted-foreground data-inset:pl-8',
className
)}
{...props}
Expand Down Expand Up @@ -196,7 +196,7 @@ function DropdownMenuShortcut({
<span
data-slot="dropdown-menu-shortcut"
className={cn(
'ml-auto text-xs tracking-widest text-muted-foreground',
'ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground',
className
)}
{...props}
Expand All @@ -221,7 +221,7 @@ function DropdownMenuSubTrigger({
data-slot="dropdown-menu-sub-trigger"
data-inset={inset}
className={cn(
"flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
"flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-8 data-open:bg-accent data-open:text-accent-foreground data-popup-open:bg-accent data-popup-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
className
)}
{...props}
Expand Down
2 changes: 1 addition & 1 deletion src/components/ui/label.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import * as React from 'react';
import { cn } from '@/lib/tailwind/utils';

const labelVariants = cva(
'flex items-baseline gap-1.5 text-sm peer-disabled:cursor-not-allowed peer-disabled:opacity-50'
'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50'

@coderabbitai coderabbitai Bot Mar 14, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Search for usages of "group" class combined with data-disabled in form-related components
echo "=== Checking FormField for group class ==="
rg -n "group" src/components/form/form-field.tsx

echo ""
echo "=== Checking for data-disabled usage in form components ==="
rg -n "data-disabled" src/components/form/

echo ""
echo "=== Checking Label usage contexts that might have group + data-disabled ==="
rg -B5 -A5 "<Label" --type=tsx | head -100

Repository: BearStudio/start-ui-web

Length of output: 292

🏁 Script executed:

#!/bin/bash

echo "=== Checking label.tsx content ==="
cat -n src/components/ui/label.tsx

echo ""
echo "=== Checking form-field.tsx content ==="
cat -n src/components/form/form-field.tsx

echo ""
echo "=== Searching for group-data-[disabled usage ==="
rg "group-data-\[disabled" .

echo ""
echo "=== Searching for data-disabled attribute ==="
rg "data-disabled" .

echo ""
echo "=== Searching for 'group' class in form components ==="
rg "group" src/components/form/ -A2 -B2

echo ""
echo "=== Checking if Label is wrapped by group-enabled components ==="
rg -B10 "Label" src/components/form/ | head -150

Repository: BearStudio/start-ui-web

Length of output: 35449

🏁 Script executed:

#!/bin/bash

echo "=== Checking form-field-controller.tsx ==="
cat src/components/form/form-field-controller.tsx | head -80

echo ""
echo "=== Checking if any component adds group class to FormField ==="
rg "FormField" src/components/form/ -A3 | grep -E "(group|data-disabled)" | head -20

Repository: BearStudio/start-ui-web

Length of output: 1996

🏁 Script executed:

#!/bin/bash

echo "=== Finding form-field-controller ==="
find src/components/form -name "*field-controller*" -type f

echo ""
echo "=== Checking FormFieldContainer ==="
find src/components/form -name "*form-field-container*" -type f | xargs cat -n

echo ""
echo "=== Search for where data-disabled or group might be added to form fields ==="
rg "disabled" src/components/form/form-field-container.tsx -B2 -A2

Repository: BearStudio/start-ui-web

Length of output: 526

🏁 Script executed:

#!/bin/bash

echo "=== Checking if any component wraps FormField with group class ==="
rg -B5 "FormField" src/components/ | grep -E "(className.*group|group.*className)" | head -20

echo ""
echo "=== Checking how Label is actually used in practice (find complete examples) ==="
rg "FormFieldLabel" src/components/form/*/docs.stories.tsx -B3 -A3 | head -60

Repository: BearStudio/start-ui-web

Length of output: 6079

Clarify if group-data-[disabled=true] selectors are intentional or dead code.

The new group-data-[disabled=true]:pointer-events-none and group-data-[disabled=true]:opacity-50 classes require a parent element with both the group Tailwind class and data-disabled="true" attribute. However, FormField (the primary container) only renders <div className={cn('flex flex-col gap-1.5', props.className)}> without these attributes. This means these selectors cannot activate in the standard form field context.

The peer-disabled selector will still work when an input element is disabled, but the group-data-[disabled=true] rules appear unused. If this is preparation for a future FormField update, add a TODO comment explaining the intent. Otherwise, remove these unused classes.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/components/ui/label.tsx` at line 7, The Tailwind classes
'group-data-[disabled=true]:pointer-events-none' and
'group-data-[disabled=true]:opacity-50' in the label string in
src/components/ui/label.tsx are dead unless a parent uses both the 'group' class
and a data-disabled="true" attribute; either remove these two classes from the
label class list or, if they're intentional for a planned change, add a short
TODO comment in the FormField component next to the div rendering (the one using
className={cn('flex flex-col gap-1.5', props.className)}) stating that FormField
should add 'group' and toggle data-disabled when disabled so those selectors
will be effective.

);

function Label({
Expand Down
6 changes: 1 addition & 5 deletions src/components/ui/scroll-area.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,11 +40,7 @@ function ScrollBar({
data-slot="scroll-area-scrollbar"
orientation={orientation}
className={cn(
'flex touch-none p-px transition-colors select-none',
orientation === 'vertical' &&
'h-full w-2.5 border-l border-l-transparent',
orientation === 'horizontal' &&
'h-2.5 flex-col border-t border-t-transparent',
'flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent',

@coderabbitai coderabbitai Bot Mar 17, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🌐 Web query:

In @base-ui/react/scroll-areav1.2.0, what orientation data attributes are emitted on ScrollArea.Scrollbar? Does it emitdata-horizontal/data-vertical, or only data-orientation="horizontal|vertical"?

💡 Result:

In @base-ui/react/scroll-area@1.2.0, ScrollArea.Scrollbar emits only:

  • data-orientation="vertical" or data-orientation="horizontal" (derived from the orientation state key) [1]

It does not emit data-horizontal / data-vertical. The default state→data-attribute behavior is data-${key.toLowerCase()} (or a custom mapping where provided), which yields data-orientation=..., not data-horizontal/data-vertical [2].

Sources:
[1] Base UI v1.2.0 ScrollAreaScrollbarDataAttributes.ts (orientation = data-orientation) https://github.com/mui/base-ui/blob/v1.2.0/packages/react/src/scroll-area/scrollbar/ScrollAreaScrollbarDataAttributes.ts
[2] Base UI v1.2.0 getStateAttributesProps.ts (default data-${key.toLowerCase()} mapping) https://github.com/mui/base-ui/blob/v1.2.0/packages/react/src/utils/getStateAttributesProps.ts

Replace data-horizontal / data-vertical selectors with data-orientation.

The @base-ui/react/scroll-area@1.2.0 primitive emits only data-orientation="horizontal|vertical", not data-horizontal/data-vertical attributes. The current selectors are no-ops and won't style the scrollbar. Update to:

'flex touch-none p-px transition-colors select-none data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:border-t data-[orientation=horizontal]:border-t-transparent data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2.5 data-[orientation=vertical]:border-l data-[orientation=vertical]:border-l-transparent',
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/components/ui/scroll-area.tsx` at line 43, The scroll-area component's
orientation selectors use non-existent attributes data-horizontal/data-vertical,
so in the ScrollArea (the CSS/string that builds the scrollbar/track classes)
replace those selectors with the attribute form using
data-[orientation=horizontal] and data-[orientation=vertical] (e.g., change
data-horizontal:h-2.5 ... data-vertical:w-2.5 to
data-[orientation=horizontal]:h-2.5 ... data-[orientation=vertical]:w-2.5) so
the primitive's emitted data-orientation attribute actually applies the styles.

className
)}
{...props}
Expand Down
3 changes: 1 addition & 2 deletions src/components/ui/separator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,7 @@ function Separator({
data-slot="separator"
orientation={orientation}
className={cn(
'shrink-0 bg-border',
orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-auto w-[1px]',
'shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch',
className
)}
{...props}
Expand Down
15 changes: 4 additions & 11 deletions src/components/ui/sheet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
<SheetPrimitive.Backdrop
data-slot="sheet-overlay"
className={cn(
'fixed inset-0 z-50 bg-black/80 backdrop-blur-xs duration-300 data-closed:animate-out data-closed:fade-out-0 data-open:animate-in data-open:fade-in-0',
'fixed inset-0 z-50 bg-black/10 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs',
className
)}
{...props}
Expand All @@ -53,16 +53,9 @@ function SheetContent({
<SheetOverlay />
<SheetPrimitive.Popup
data-slot="sheet-content"
data-side={side}
className={cn(
'fixed z-50 flex flex-col gap-4 bg-background shadow-lg transition ease-in-out data-closed:animate-out data-closed:duration-300 data-open:animate-in data-open:duration-500',
side === 'right' &&
'inset-y-0 right-0 h-full w-3/4 border-l data-closed:slide-out-to-right data-open:slide-in-from-right sm:max-w-sm',
side === 'left' &&
'inset-y-0 left-0 h-full w-3/4 border-r data-closed:slide-out-to-left data-open:slide-in-from-left sm:max-w-sm',
side === 'top' &&
'inset-x-0 top-0 h-auto border-b data-closed:slide-out-to-top data-open:slide-in-from-top',
side === 'bottom' &&
'inset-x-0 bottom-0 h-auto border-t data-closed:slide-out-to-bottom data-open:slide-in-from-bottom',
'fixed z-50 flex flex-col gap-4 bg-background bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm',
className
)}
initialFocus
Expand Down Expand Up @@ -113,7 +106,7 @@ function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
return (
<SheetPrimitive.Title
data-slot="sheet-title"
className={cn('font-semibold text-foreground', className)}
className={cn('font-medium text-foreground', className)}
{...props}
/>
);
Expand Down
4 changes: 2 additions & 2 deletions src/components/ui/tooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';
import { cn } from '@/lib/tailwind/utils';

function TooltipProvider({
delay = 500,
delay = 0,
...props
Comment thread
ntatoud marked this conversation as resolved.
}: TooltipPrimitive.Provider.Props) {
return (
Expand Down Expand Up @@ -52,7 +52,7 @@ function TooltipContent({
<TooltipPrimitive.Popup
data-slot="tooltip-content"
className={cn(
'z-50 w-fit max-w-xs origin-(--transform-origin) rounded-md bg-foreground px-3 py-1.5 text-xs text-background data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95',
'z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95',
className
)}
{...props}
Expand Down
8 changes: 4 additions & 4 deletions src/features/devtools/login-hint.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,9 +36,9 @@ export const LoginEmailHint = () => {
{envClient.VITE_IS_DEMO ? 'Demo mode' : 'Dev mode'}
</AlertTitle>
<AlertDescription className="flex flex-wrap gap-x-1 text-sm leading-4">
You can login with{' '}
You can login with
<LoginEmailButton email="admin@admin.com" form={form} />
{' or '}
or
<LoginEmailButton email="user@user.com" form={form} />
</AlertDescription>
</Alert>
Expand All @@ -58,8 +58,8 @@ export const LoginEmailOtpHint = () => {
<AlertTitle>
{envClient.VITE_IS_DEMO ? 'Demo mode' : 'Dev mode'}
</AlertTitle>
<AlertDescription className="flex text-sm leading-4">
Use the code{' '}
<AlertDescription className="flex gap-x-1 text-sm leading-4">
Use the code
<button
type="button"
className="cursor-pointer font-medium text-neutral-900 underline underline-offset-4 hover:no-underline dark:text-white"
Expand Down
Loading