fix active tab lightning

Author: ankormoreankor

packages/ui/src/components/repo-subheader.tsx

@@ -39,7 +39,7 @@ export const RepoSubheader = ({
   }, [location.pathname])
 
   return (
-    <SandboxLayout.SubHeader className="top-14.5 h-11">
+    <SandboxLayout.SubHeader className="top-14.5 h-11 overflow-hidden">
       <Tabs variant="navigation" value={activeTab}>
         <TabsList>
           <TabsTrigger role="link" value="summary" onClick={makeHandleTabChange(RepoTabsKeys.SUMMARY)}>

packages/ui/src/components/tabs.tsx

@@ -33,7 +33,7 @@ const tabsTriggerVariants = cva(
         underline:
           'm-0 h-11 border-b-2 border-solid border-b-transparent px-0 font-normal data-[state=active]:border-primary',
         navigation:
-          'm-0 -mb-px h-[44px] border-b border-solid border-b-transparent px-0 font-normal text-foreground-2 duration-150 ease-in-out hover:text-foreground-1 data-[state=active]:border-borders-9',
+          'm-0 my-1 h-9 px-0 font-normal text-foreground-2 duration-150 ease-in-out after:absolute after:inset-[-0.25rem_0] after:block after:border-b after:border-solid after:border-b-transparent hover:text-foreground-1 data-[state=active]:after:border-borders-9',
         tabnav:
           'h-[36px] rounded-t-md border-x border-t border-transparent px-3.5 font-normal text-foreground-2 hover:text-foreground-1 data-[state=active]:border-borders-1 data-[state=active]:bg-background-1 data-[state=active]:text-foreground-1'
       }
@@ -116,7 +116,7 @@ const TabsTrigger = React.forwardRef<React.ElementRef<typeof TabsPrimitive.Trigg
         {...props}
       >
         {context.variant === 'navigation' && (
-          <span className="bg-tab-gradient-radial absolute left-1/2 top-1/2 -z-10 hidden h-[calc(100%+40px)] w-[calc(100%+60px)] -translate-x-1/2 -translate-y-1/2 group-data-[state=active]:block" />
+          <span className="bg-tab-gradient-radial absolute left-1/2 top-1/2 -z-10 hidden h-[calc(100%+3rem)] w-[calc(100%+4.25rem)] -translate-x-1/2 -translate-y-1/2 group-data-[state=active]:block" />
         )}
         {children}
       </TabsPrimitive.Trigger>

packages/ui/src/views/layouts/PullRequestLayout.tsx

@@ -1,14 +1,21 @@
 import { useCallback } from 'react'
 import { Outlet, useLocation, useNavigate } from 'react-router-dom'
 
-import { Badge, Icon, Spacer, Tabs, TabsList, TabsTrigger } from '@components/index'
+import { Badge, Icon, IconProps, Spacer, Tabs, TabsList, TabsTrigger } from '@components/index'
 import { TabsTriggerProps } from '@radix-ui/react-tabs'
 import { TranslationStore } from '@views/repo'
 import { PullRequestHeader } from '@views/repo/pull-request/components/pull-request-header'
 import { IPullRequestStore } from '@views/repo/pull-request/pull-request.types'
 
 import { SandboxLayout } from '..'
 
+const TabTitleWithIcon = ({ icon, title }: { icon: IconProps['name']; title: string }) => (
+  <div className="flex items-center gap-x-1">
+    <Icon size={14} name={icon} />
+    {title}
+  </div>
+)
+
 interface PullRequestLayoutProps {
   usePullRequestStore: () => IPullRequestStore
   spaceId?: string
@@ -78,25 +85,16 @@ const PullRequestLayout: React.FC<PullRequestLayoutProps> = ({
         <Tabs variant="tabnav">
           <TabsList className="left-1/2 w-[calc(100%+48px)] -translate-x-1/2 px-6">
             <TabsTrigger {...getTabProps(PullRequestTabsKeys.CONVERSATION)}>
-              <div className="flex items-center gap-x-1">
-                <Icon size={14} name="comments" />
-                {t('views:pullRequests.conversation')}
-              </div>
+              <TabTitleWithIcon icon="comments" title={t('views:pullRequests.conversation', 'Conversation')} />
             </TabsTrigger>
             <TabsTrigger {...getTabProps(PullRequestTabsKeys.COMMITS)}>
-              <div className="flex items-center gap-x-1">
-                <Icon size={14} name="tube-sign" />
-                {t('views:repos.commits')}
-              </div>
+              <TabTitleWithIcon icon="tube-sign" title={t('views:pullRequests.commits', 'Commits')} />
               <Badge variant="outline" size="xs" borderRadius="base">
                 {pullRequest?.stats?.commits}
               </Badge>
             </TabsTrigger>
             <TabsTrigger {...getTabProps(PullRequestTabsKeys.CHANGES)}>
-              <div className="flex items-center gap-x-1">
-                <Icon size={14} name="changes" />
-                {t('views:pullRequests.changes')}
-              </div>
+              <TabTitleWithIcon icon="changes" title={t('views:pullRequests.changes', 'Changes')} />
               <Badge variant="outline" size="xs" borderRadius="base">
                 {pullRequest?.stats?.files_changed}
               </Badge>

packages/ui/src/views/profile-settings/profile-settings-tab-nav.tsx

@@ -18,7 +18,7 @@ function ProfileSettingsTabNav({
 
   return (
     <>
-      <SandboxLayout.SubHeader className="h-11">
+      <SandboxLayout.SubHeader className="h-11 overflow-hidden">
         <Tabs variant="navigation" value={activeTab}>
           <TabsList fontSize="xs">
             <TabsTrigger role="link" value="general" onClick={makeHandleTabChange('general')}>

packages/ui/src/views/project/project-settings-tab-nav.tsx

@@ -18,7 +18,7 @@ const ProjectSettingsTabNav: FC<ProjectSettingsTabNavProps> = ({ useTranslationS
 
   return (
     <>
-      <SandboxLayout.SubHeader className="h-11">
+      <SandboxLayout.SubHeader className="h-11 overflow-hidden">
         <Tabs variant="navigation" value={activeTab}>
           <TabsList fontSize="xs">
             <TabsTrigger role="link" value="general" onClick={makeHandleTabChange('general')}>

packages/ui/src/views/repo/repo-layout/index.tsx

@@ -35,7 +35,7 @@ export const RepoLayout = ({ useTranslationStore }: { useTranslationStore: () =>
 
   return (
     <>
-      <SandboxLayout.SubHeader className="h-11 ">
+      <SandboxLayout.SubHeader className="h-11 overflow-hidden">
         <Tabs variant="navigation" value={activeTab}>
           <TabsList>
             <TabsTrigger role="link" value="summary" onClick={makeHandleTabChange(RepoTabsKeys.SUMMARY)}>

packages/ui/src/views/tailwind-values-exporter.tsx

@@ -1 +1 @@
-export const TailwindValuesExporter = () => <div className="top-14.5 h-14.5 sr-only" />
+export const TailwindValuesExporter = () => <div className="sr-only top-14.5 h-14.5 pt-14.5" />

packages/views/src/layouts/SandboxLayout.tsx

@@ -67,7 +67,7 @@ function Header({ children, className }: { children: React.ReactNode; className?
 function SubHeader({ children, className }: { children: React.ReactNode; className?: string }) {
   return (
     <header
-      className={cn('bg-background fixed left-[220px] right-0 top-3.625rem z-40 h-[2.75rem]', className)}
+      className={cn('bg-background fixed left-[220px] right-0 top-14.5 z-40 h-[2.75rem]', className)}
       role="banner"
     >
       {children}
@@ -93,7 +93,7 @@ function Main({
   hasLeftSubPanel?: boolean
 }) {
   const paddingTopClass =
-    hasHeader && hasSubHeader ? `pt-[calc(55px+45px)]` : hasHeader ? 'pt-[55px]' : hasSubHeader ? 'pt-[2.75rem]' : ''
+    hasHeader && hasSubHeader ? `pt-[calc(14.5rem+45px)]` : hasHeader ? 'pt-14.5' : hasSubHeader ? 'pt-[2.75rem]' : ''
 
   const paddingLeftClass =
     hasLeftPanel && hasLeftSubPanel