Connect improvements

packages/engine-frontend/components/ConnectionPortal.tsx

@@ -113,7 +113,7 @@ export function ConnectionPortal({className}: ConnectionPortalProps) {
         return (
           <div
             className={cn(
-              'flex size-full flex-col gap-4 p-4 lg:p-8',
+              'flex size-full flex-col gap-4 overflow-x-hidden p-4 lg:p-8',
               className,
             )}>
             {listConnectionsRes.isLoading ||

packages/engine-frontend/components/ConnectionsTabContent.tsx

@@ -44,8 +44,8 @@ export function ConnectionsTabContent({
       </div>
       <Button
         onClick={onConnect}
-        className="inline-flex h-10 items-center justify-center self-end">
-        Connect
+        className="h-10 items-center justify-center self-start">
+        Visit Add a Connection
       </Button>
     </div>
   ) : (

packages/engine-frontend/components/IntegrationSearch.tsx

@@ -96,7 +96,7 @@ export function IntegrationSearch({
           <Loader className="size-5 animate-spin text-[#8A5DF6]" />
         </div>
       ) : (
-        <div className="space-y-6 overflow-y-auto py-4">
+        <div className="space-y-6 py-4">
           {(ints && ints.length > 0) ||
           Object.keys(intsByCategory ?? {}).length > 0 ? (
             Object.entries(intsByCategory ?? {}).map(
@@ -105,7 +105,7 @@ export function IntegrationSearch({
                   <h3 className="mb-2 text-lg font-semibold">
                     {parseCategory(category)}
                   </h3>
-                  <div className="flex flex-row gap-4">
+                  <div className="flex w-full flex-row flex-wrap gap-4 lg:w-[60%]">
                     {categoryInts.map((int) => (
                       <WithConnectorConnect
                         key={int.id}

packages/ui/domain-components/IntegrationCard.tsx

@@ -26,8 +26,7 @@ export function IntegrationCard({
             <Plus color="#8A7DFF" size={24} />
             <span className="mt-2 font-sans text-[14px] font-semibold text-[#8A7DFF]">
               Add
-            </span>{' '}
-            {/* Set to 14px and semibold */}
+            </span>
           </div>
         ) : (
           <div className="flex h-full flex-col items-center justify-center">
@@ -37,9 +36,12 @@ export function IntegrationCard({
               className="h-8 w-8"
               style={{marginBottom: '10px', objectFit: 'contain'}}
             />{' '}
-            <p className="m-0 text-center font-sans text-sm font-semibold">
+            <p
+              className={`m-0 max-w-[100px] text-center text-sm font-semibold hover:text-[#8A7DFF] ${
+                name.length > 20 ? 'truncate' : ''
+              }`}>
               {name}
-            </p>{' '}
+            </p>
           </div>
         )}
       </CardContent>

packages/ui/shadcn/Tabs.tsx

@@ -12,7 +12,7 @@ const TabsList = React.forwardRef<
     ref={ref}
     className={cn(
       'rounded-md bg-button-foreground p-1 text-muted-foreground',
-      'flex flex-col sm:inline-flex sm:h-10 sm:flex-row sm:items-center sm:justify-center',
+      'flex h-10 flex-row',
       className,
     )}
     {...props}