From 0b7aa7407ca60835477bc6b36f8e82bc929991c5 Mon Sep 17 00:00:00 2001
From: Denozordec <shatskiy.blog@gmail.com>
Date: Fri, 17 Jul 2026 01:15:03 +0700
Subject: [PATCH] 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 <cursoragent@cursor.com>
---
 apps/web/src/components/reui-kit/resource-page.tsx | 4 ++--
 apps/web/src/components/service-edit-sheet.tsx     | 2 +-
 packages/ui/src/components/tabs.tsx                | 7 ++++++-
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/components/reui-kit/resource-page.tsx b/apps/web/src/components/reui-kit/resource-page.tsx
index 8cff999..4d0f9b5 100644
--- a/apps/web/src/components/reui-kit/resource-page.tsx
+++ b/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">
diff --git a/apps/web/src/components/service-edit-sheet.tsx b/apps/web/src/components/service-edit-sheet.tsx
index d2c50ae..4493798 100644
--- a/apps/web/src/components/service-edit-sheet.tsx
+++ b/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>
diff --git a/packages/ui/src/components/tabs.tsx b/packages/ui/src/components/tabs.tsx
index 8f46a3b..8c914b0 100644
--- a/packages/ui/src/components/tabs.tsx
+++ b/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}