Merge branch 'new-ui' into e2e-integrations

Author: jsajal

src/components/atoms/Tabs.js

@@ -18,7 +18,7 @@ const Tabs = () => {
   const activeTabStyles =
     'before:absolute before:h-[0.25rem] before:w-full before:bg-slate-300 before:content-[""] before:bottom-0 before:left-0';
   const tabCommonStyles =
-    'tab flex items-center gap-x-2 border-r border-neutral-300 bg-transparent pr-0 tracking-[0.15em] transition duration-500 ease-in text-sm';
+    'tab flex items-center gap-x-2 border-r border-neutral-300 bg-transparent pr-0 tracking-[0.15em] transition duration-500 ease-in text-sm flex-nowrap';
   const messageForConfirmActionModal = `You have unsaved changes in the ${focusTab?.type}, are you sure you want to close it?`;
 
   const handleCloseTab = (event, tab) => {
@@ -45,9 +45,10 @@ const Tabs = () => {
   };
 
   return (
-    <div role='tablist' className='tabs tabs-lg'>
+    <div role='tablist' className='overflow-scroll tabs tabs-lg'>
       {tabs
         // tabs belonging to one collection will be shown at a time
+        .reverse()
         .filter((t) => t.collectionId === focusTab.collectionId)
         .map((tab, index) => {
           return (
@@ -62,7 +63,7 @@ const Tabs = () => {
               data-id={tab.id}
               data-collection-id={tab.collectionId}
             >
-              <a>{tab.name}</a>
+              <a className='text-nowrap'>{tab.name}</a>
               {/* close needs to be a separate clickable component other wise it gets confused with above */}
               <div
                 className='flex items-center h-full px-2 hover:rounded hover:rounded-l-none hover:bg-slate-200'

src/components/molecules/headers/WorkspaceHeader.js

@@ -15,7 +15,7 @@ const WorkspaceHeader = () => {
 
   return (
     <div className='flex items-center justify-between gap-8 border-b border-neutral-300 bg-slate-100 pr-4'>
-      <div className='flex items-center'>
+      <div className='flex items-center overflow-scroll'>
         <Tabs />
         <button className='flex cursor-not-allowed flex-col items-center bg-slate-100 p-3.5 text-center text-slate-400'>
           <Tippy content='Coming Soon!' placement='right'>