From 8afbc3b4576c47ad1ec38699c6136cb4dce51024 Mon Sep 17 00:00:00 2001
From: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Date: Tue, 17 Jan 2023 16:36:06 +0000
Subject: [PATCH] Fixing horizontal tabs  (#6454)

* Fix spacing and height

* Testing if its timing out or something else

* So, timep=out is the problem. Increase the timeout to 1s for now

Co-authored-by: Hariom Balhara <hariombalhara@gmail.com>
---
 apps/web/pages/_document.tsx                               | 2 +-
 .../ee/routing-forms/playwright/tests/basic.e2e.ts         | 3 ++-
 packages/ui/components/navigation/tabs/HorizontalTabs.tsx  | 7 +++++--
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/apps/web/pages/_document.tsx b/apps/web/pages/_document.tsx
index 9f0ee91e95..b0d4a4cbfd 100644
--- a/apps/web/pages/_document.tsx
+++ b/apps/web/pages/_document.tsx
@@ -81,7 +81,7 @@ class MyDocument extends Document<Props> {
         </Head>
 
         <body
-          className="dark:bg-darkgray-50 desktop-transparent bg-gray-100"
+          className="dark:bg-darkgray-50 desktop-transparent bg-gray-100 antialiased"
           style={
             this.props.isEmbed
               ? {
diff --git a/packages/app-store/ee/routing-forms/playwright/tests/basic.e2e.ts b/packages/app-store/ee/routing-forms/playwright/tests/basic.e2e.ts
index 74e83c6bed..57ed3be2c8 100644
--- a/packages/app-store/ee/routing-forms/playwright/tests/basic.e2e.ts
+++ b/packages/app-store/ee/routing-forms/playwright/tests/basic.e2e.ts
@@ -178,8 +178,9 @@ test.describe("Routing Forms", () => {
       });
       const headerEls = page.locator("[data-testid='reporting-header'] th");
       // Once the response is there, React would soon render it, so 500ms is enough
+      // FIXME: Sometimes it takes more than 500ms, so added a timeout of 1000ms for now. There might be something wrong with rendering.
       await headerEls.first().waitFor({
-        timeout: 500,
+        timeout: 1000,
       });
       const numHeaderEls = await headerEls.count();
       const headers = [];
diff --git a/packages/ui/components/navigation/tabs/HorizontalTabs.tsx b/packages/ui/components/navigation/tabs/HorizontalTabs.tsx
index 450d77e470..b946c98d22 100644
--- a/packages/ui/components/navigation/tabs/HorizontalTabs.tsx
+++ b/packages/ui/components/navigation/tabs/HorizontalTabs.tsx
@@ -8,8 +8,11 @@ export interface NavTabProps {
 
 const HorizontalTabs = function ({ tabs, linkProps, actions, ...props }: NavTabProps) {
   return (
-    <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}>
+    <div className="mb-2 h-9 max-w-[calc(100%+40px)] lg:mb-5">
+      <nav
+        className="no-scrollbar flex max-h-9 space-x-1 overflow-scroll rounded-md border p-1"
+        aria-label="Tabs"
+        {...props}>
         {tabs.map((tab, idx) => (
           <HorizontalTabItem {...tab} key={idx} {...linkProps} />
         ))}