denozord/cloudflare-domain-manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 48 Wiki Activity

fix(web): adjust tab component styles for improved layout
Build, Test, and Push CFDM Docker Image / test (push) Successful in 3m33s
Details
Build, Test, and Push CFDM Docker Image / build-and-push (push) Successful in 1m47s
Details
Build, Test, and Push CFDM Docker Image / update-wiki (push) Successful in 7s
Details
Build, Test, and Push CFDM Docker Image / create-release (push) Has been skipped
Details

Browse Source 
- Added margin to TabsList in ServiceEditSheet for better spacing.
- Updated comments in ResourcePage to clarify tab styling.
- Enhanced Tabs component to support horizontal and vertical orientations with appropriate data attributes for better styling control.

Co-authored-by: Cursor <[email protected]>
This commit is contained in:
Denozordec
2026-07-17 01:15:03 +07:00
co-authored by Cursor
parent 600044d6b2
commit 0b7aa7407c
3 changed files with 9 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/tabs.tsx
+6 -1
View File
@@ -14,6 +14,10 @@ function Tabs({
<TabsPrimitive.Root
data-slot="tabs"
data-orientation={orientation}
// Tailwind group-data-horizontal/vertical expects these attrs (Base UI only sets data-orientation).
{...(orientation === "vertical"
? { "data-vertical": "" as const }
: { "data-horizontal": "" as const })}
className={cn(
"group/tabs flex gap-2 data-horizontal:flex-col",
className
@@ -63,7 +67,8 @@ function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
"group-data-[variant=line]/tabs-list:flex-none group-data-[variant=line]/tabs-list:rounded-none group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:shadow-none group-data-[variant=line]/tabs-list:data-active:bg-transparent group-data-[variant=line]/tabs-list:data-active:shadow-none dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
"group-data-[variant=default]/tabs-list:data-active:bg-background group-data-[variant=default]/tabs-list:data-active:text-foreground dark:group-data-[variant=default]/tabs-list:data-active:border-input dark:group-data-[variant=default]/tabs-list:data-active:bg-input/30 dark:group-data-[variant=default]/tabs-list:data-active:text-foreground",
"data-active:text-foreground",
"after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-0 group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
// Line underline (c-tabs-2): size/position need data-horizontal on root; active → opacity-100
"after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
className
)}
{...props}