fix(web): adjust tab component styles for improved layout

- 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]>

apps/web/src/components/reui-kit/resource-page.tsx

@@ -289,7 +289,7 @@ export function ResourcePage<T extends object>({
         <FramePanel className="p-0 shadow-none!">
           {tabs && tabs.length > 0 ? (
             <>
-              {/* Line tabs: c-tabs-2 + filtering-2 (muted count + underline) */}
+              {/* Line tabs: c-tabs-2 underline; after:bottom-0 — FramePanel overflow-hidden клипает bottom-[-5px] */}
               <div className="px-(--frame-panel-header-px) pt-(--frame-panel-header-py)">
                 <Tabs value={activeTab} onValueChange={handleTabChange}>
                   <TabsList variant="line" className="gap-5">
@@ -297,7 +297,7 @@ export function ResourcePage<T extends object>({
                       <TabsTrigger
                         key={tab.id}
                         value={tab.id}
-                        className="text-muted-foreground hover:text-foreground h-auto gap-2 px-0 pb-3"
+                        className="text-muted-foreground hover:text-foreground h-auto gap-2 px-0 pb-3 after:bottom-0"
                       >
                         <span>{tab.label}</span>
                         <span className="bg-muted text-muted-foreground inline-flex min-w-5 items-center justify-center rounded-md px-1.5 py-0.5 text-xs tabular-nums">

apps/web/src/components/service-edit-sheet.tsx

@@ -404,7 +404,7 @@ export function ServiceEditSheet({
             orientation="horizontal"
             className="flex w-full flex-col gap-4"
           >
-            <TabsList variant="line" className="w-full gap-5">
+        <TabsList variant="line" className="mb-3.5 w-full gap-5">
               <TabsTrigger value="general" className="px-0 pb-2">
                 Основное
               </TabsTrigger>

packages/ui/src/components/tabs.tsx

@@ -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}