From 0141d8f954db97ffcbf50a90f1e7e372ef0531f1 Mon Sep 17 00:00:00 2001
From: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Date: Thu, 5 Jan 2023 17:14:27 +0000
Subject: [PATCH] Adding border to tabs (#6284)

* Adding border to tabs

* Fix rounded

* Fixing mb on >= lg
---
 packages/ui/v2/core/navigation/tabs/HorizontalTabItem.tsx | 2 +-
 packages/ui/v2/core/navigation/tabs/HorizontalTabs.tsx    | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/ui/v2/core/navigation/tabs/HorizontalTabItem.tsx b/packages/ui/v2/core/navigation/tabs/HorizontalTabItem.tsx
index 7df96b8fdd..e0f3fa2594 100644
--- a/packages/ui/v2/core/navigation/tabs/HorizontalTabItem.tsx
+++ b/packages/ui/v2/core/navigation/tabs/HorizontalTabItem.tsx
@@ -27,7 +27,7 @@ const HorizontalTabItem = function ({ name, href, linkProps, ...props }: Horizon
       <a
         className={classNames(
           isCurrent ? "bg-gray-200 text-gray-900" : "  text-gray-600 hover:bg-gray-100 hover:text-gray-900 ",
-          "mb-2 inline-flex items-center justify-center whitespace-nowrap rounded-md py-[10px] px-4 text-sm font-medium leading-4 md:mb-0",
+          "inline-flex items-center justify-center whitespace-nowrap rounded-[4px] py-[10px] px-4 text-sm font-medium leading-4 md:mb-0",
           props.disabled && "pointer-events-none !opacity-30",
           props.className
         )}
diff --git a/packages/ui/v2/core/navigation/tabs/HorizontalTabs.tsx b/packages/ui/v2/core/navigation/tabs/HorizontalTabs.tsx
index 31bb14f848..9578f6c72f 100644
--- a/packages/ui/v2/core/navigation/tabs/HorizontalTabs.tsx
+++ b/packages/ui/v2/core/navigation/tabs/HorizontalTabs.tsx
@@ -10,8 +10,8 @@ export interface NavTabProps {
 
 const HorizontalTabs = function ({ tabs, linkProps, actions, ...props }: NavTabProps) {
   return (
-    <div className="-mx-6 mb-2 w-[calc(100%+40px)]">
-      <nav className="no-scrollbar flex space-x-1 overflow-scroll px-6" aria-label="Tabs" {...props}>
+    <div className="mb-2 max-w-[calc(100%+40px)] lg:mb-5">
+      <nav className="no-scrollbar flex overflow-scroll rounded-md border p-1" aria-label="Tabs" {...props}>
         {tabs.map((tab, idx) => (
           <HorizontalTabItem {...tab} key={idx} {...linkProps} />
         ))}