fix: ui

Kong · Dec 3, 2024 · e33eaf6 · e33eaf6
1 parent bb5d158
commit e33eaf6
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 8 deletions.
diff --git a/packages/insomnia/src/ui/components/tabs/tab.tsx b/packages/insomnia/src/ui/components/tabs/tab.tsx
@@ -151,7 +151,7 @@ export const InsomniaTab = ({ tab }: { tab: BaseTab }) => {
             <span className={`block absolute bottom-[0px] left-0 right-0 h-[1px] bg-[--color-bg] ${isSelected ? 'opacity-100' : 'opacity-0'}`} />
             <span className={`block absolute bottom-[0px] left-0 right-0 h-[1px] bg-[--hl-sm] ${!isSelected ? 'opacity-100' : 'opacity-0'}`} />
           </div>
-          <Button slot="drag" />
+          <Button slot="drag" className="hidden" />
         </Tooltip>
       )}
     </GridListItem>

diff --git a/packages/insomnia/src/ui/components/tabs/tabList.tsx b/packages/insomnia/src/ui/components/tabs/tabList.tsx
@@ -330,8 +330,8 @@ export const OrganizationTabList = ({ showActiveStatus = true, currentPage = ''
   };
 
   return (
-    <div className="flex box-content border-b border-solid border-[--hl-sm] bg-[--color-bg]" style={{ height: `${INSOMNIA_TAB_HEIGHT}px` }} >
-      <Button onPress={scrollLeft} isDisabled={leftScrollDisable} className={`${leftScrollDisable && 'cursor-not-allowed'}`}>
+    <div className="flex box-content bg-[--color-bg]" style={{ height: `${INSOMNIA_TAB_HEIGHT + 1}px` }} >
+      <Button onPress={scrollLeft} isDisabled={leftScrollDisable} className={`${leftScrollDisable && 'cursor-not-allowed'} border-b border-solid border-[--hl-sm]`}>
         <Icon icon="chevron-left" className={`w-[30px] ${isOverFlow ? 'block' : 'hidden'}`} />
       </Button>
       <div className='max-w-[calc(100%-40px)] overflow-x-scroll hide-scrollbars' ref={tabListWrapperRef} onScroll={handleScroll}>
@@ -344,20 +344,18 @@ export const OrganizationTabList = ({ showActiveStatus = true, currentPage = ''
           selectionBehavior='replace'
           className="flex h-[41px] w-fit"
           dragAndDropHooks={dragAndDropHooks}
-          // Use +1 height to mask the wrapper border, and let the custom element in InsomniaTab act as the fake border.（we need different border for active tab）
-          style={{ height: `${INSOMNIA_TAB_HEIGHT + 1}px` }}
           items={tabList}
           ref={tabListInnerRef}
         >
           {item => <InsomniaTab tab={item} />}
         </GridList>
       </div>
-      <Button onPress={scrollRight} isDisabled={rightScrollDisable} className={`${rightScrollDisable && 'cursor-not-allowed'}`} >
+      <Button onPress={scrollRight} isDisabled={rightScrollDisable} className={`${rightScrollDisable && 'cursor-not-allowed'} border-b border-solid border-[--hl-sm]`} >
         <Icon icon="chevron-right" className={`w-[30px] ${isOverFlow ? 'block' : 'hidden'}`} />
       </Button>
-      <div className='flex items-center w-[40px] justify-center flex-shrink-0'>
+      <div className='flex items-center justify-start flex-shrink-0 flex-grow border-b border-solid border-[--hl-sm]'>
         <MenuTrigger>
-          <Button aria-label="Menu">
+          <Button aria-label="Menu" className="w-[40px] text-center">
             <Icon icon="plus" className='cursor-pointer' />
           </Button>
           <Popover>