From d845394a3ccc07c8d27a6883eb0d6c6e8a83d26b Mon Sep 17 00:00:00 2001
From: Danieldare <dodanieloluwadare@gmail.com>
Date: Fri, 31 Dec 2021 10:59:45 +0100
Subject: [PATCH] fix: add condition and styles to check for active tab

---
 .../IntegrationEditor/IntegrationsHomeScreen.tsx      | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/app/client/src/pages/Editor/IntegrationEditor/IntegrationsHomeScreen.tsx b/app/client/src/pages/Editor/IntegrationEditor/IntegrationsHomeScreen.tsx
index c355811e11..f4a09eb6f0 100644
--- a/app/client/src/pages/Editor/IntegrationEditor/IntegrationsHomeScreen.tsx
+++ b/app/client/src/pages/Editor/IntegrationEditor/IntegrationsHomeScreen.tsx
@@ -66,10 +66,11 @@ const MainTabsContainer = styled.div`
   height: 100%;
 `;
 
-const SectionGrid = styled.div`
+const SectionGrid = styled.div<{ isActiveTab?: boolean }>`
   margin-top: 16px;
   display: grid;
-  grid-template-columns: 1fr;
+  grid-template-columns: 1fr ${({ isActiveTab }) => isActiveTab && "180px"};
+  grid-template-rows: auto minmax(0, 1fr);
   gap: 10px 16px;
   flex: 1;
   min-height: 0;
@@ -486,7 +487,11 @@ class IntegrationsHomeScreen extends React.Component<
           <HeaderFlex>
             <p className="sectionHeadings">Datasources</p>
           </HeaderFlex>
-          <SectionGrid>
+          <SectionGrid
+            isActiveTab={
+              this.state.activePrimaryMenuId !== PRIMARY_MENU_IDS.ACTIVE
+            }
+          >
             <MainTabsContainer>
               {showTabs && (
                 <TabComponent