From d6d4e246f91406ddbf88b5c90a8b8e2b1ab77c68 Mon Sep 17 00:00:00 2001
From: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Date: Thu, 10 Aug 2023 09:49:17 +0100
Subject: [PATCH] chore: Fix UI NITs (#10691)

---
 packages/features/ee/teams/components/MemberListItem.tsx  | 4 +---
 packages/features/ee/users/components/UsersTable.tsx      | 2 +-
 packages/ui/components/data-table/index.tsx               | 2 +-
 packages/ui/components/navigation/tabs/HorizontalTabs.tsx | 2 +-
 packages/ui/components/table/TableNew.tsx                 | 5 ++++-
 5 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/features/ee/teams/components/MemberListItem.tsx b/packages/features/ee/teams/components/MemberListItem.tsx
index c6d07c8862..7271e5f5fb 100644
--- a/packages/features/ee/teams/components/MemberListItem.tsx
+++ b/packages/features/ee/teams/components/MemberListItem.tsx
@@ -29,7 +29,6 @@ import {
 } from "@calcom/ui";
 import { ExternalLink, MoreHorizontal, Edit2, Lock, UserX } from "@calcom/ui/components/icon";
 
-import { useOrgBranding } from "../../organizations/context/provider";
 import MemberChangeRoleModal from "./MemberChangeRoleModal";
 import TeamAvailabilityModal from "./TeamAvailabilityModal";
 import TeamPill, { TeamRole } from "./TeamPill";
@@ -54,7 +53,6 @@ const checkIsOrg = (team: Props["team"]) => {
 
 export default function MemberListItem(props: Props) {
   const { t } = useLocale();
-  const orgBranding = useOrgBranding();
 
   const utils = trpc.useContext();
   const [showChangeMemberRoleModal, setShowChangeMemberRoleModal] = useState(false);
@@ -115,7 +113,7 @@ export default function MemberListItem(props: Props) {
   return (
     <li className="divide-subtle divide-y px-5">
       <div className="my-4 flex justify-between">
-        <div className="flex w-full flex-col justify-between sm:flex-row">
+        <div className="flex w-full flex-col justify-between truncate sm:flex-row">
           <div className="flex">
             <Avatar
               size="sm"
diff --git a/packages/features/ee/users/components/UsersTable.tsx b/packages/features/ee/users/components/UsersTable.tsx
index 0063fbe283..c3134de67f 100644
--- a/packages/features/ee/users/components/UsersTable.tsx
+++ b/packages/features/ee/users/components/UsersTable.tsx
@@ -109,7 +109,7 @@ function UsersTableBare() {
         onChange={(e) => setSearchTerm(e.target.value)}
       />
       <div
-        className="rounded-md border"
+        className="border-subtle rounded-md border"
         ref={tableContainerRef}
         onScroll={() => fetchMoreOnBottomReached()}
         style={{
diff --git a/packages/ui/components/data-table/index.tsx b/packages/ui/components/data-table/index.tsx
index 21cf8e768e..c9f8354f3c 100644
--- a/packages/ui/components/data-table/index.tsx
+++ b/packages/ui/components/data-table/index.tsx
@@ -101,7 +101,7 @@ export function DataTable<TData, TValue>({
         tableCTA={tableCTA}
       />
       <div
-        className="rounded-md border"
+        className="border-subtle rounded-md border"
         ref={tableContainerRef}
         onScroll={onScroll}
         style={{
diff --git a/packages/ui/components/navigation/tabs/HorizontalTabs.tsx b/packages/ui/components/navigation/tabs/HorizontalTabs.tsx
index 13fba38118..b38251f06d 100644
--- a/packages/ui/components/navigation/tabs/HorizontalTabs.tsx
+++ b/packages/ui/components/navigation/tabs/HorizontalTabs.tsx
@@ -10,7 +10,7 @@ export interface NavTabProps {
 
 const HorizontalTabs = function ({ tabs, linkShallow, linkScroll, actions, ...props }: NavTabProps) {
   return (
-    <div className="mb-4 h-9 max-w-[calc(100%+40px)] lg:mb-5">
+    <div className="mb-4 h-9 max-w-full lg:mb-5">
       <nav
         className="no-scrollbar flex max-h-9 space-x-1 overflow-scroll rounded-md"
         aria-label="Tabs"
diff --git a/packages/ui/components/table/TableNew.tsx b/packages/ui/components/table/TableNew.tsx
index f778e60906..2429a7e51a 100644
--- a/packages/ui/components/table/TableNew.tsx
+++ b/packages/ui/components/table/TableNew.tsx
@@ -36,7 +36,10 @@ const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTML
   ({ className, ...props }, ref) => (
     <tr
       ref={ref}
-      className={classNames("hover:bg-subtle data-[state=selected]:bg-subtle border-b", className)}
+      className={classNames(
+        "hover:bg-subtle data-[state=selected]:bg-subtle border-subtle border-b",
+        className
+      )}
       {...props}
     />
   )