From 97483c5c4bde76c0259a2e1eba7347503c66284e Mon Sep 17 00:00:00 2001
From: haojin111 <haojin828@outlook.com>
Date: Sat, 12 Mar 2022 16:49:04 +0800
Subject: [PATCH 1/3] added scrollbar to repo limit error modal

---
 .../gitSync/RepoLimitExceededErrorModal.tsx   | 87 +++++++++++--------
 1 file changed, 53 insertions(+), 34 deletions(-)

diff --git a/app/client/src/pages/Editor/gitSync/RepoLimitExceededErrorModal.tsx b/app/client/src/pages/Editor/gitSync/RepoLimitExceededErrorModal.tsx
index 6e443713a6..7526082a3b 100644
--- a/app/client/src/pages/Editor/gitSync/RepoLimitExceededErrorModal.tsx
+++ b/app/client/src/pages/Editor/gitSync/RepoLimitExceededErrorModal.tsx
@@ -12,7 +12,6 @@ import {
 } from "actions/gitSyncActions";
 import Button, { Category, Size } from "components/ads/Button";
 import styled, { useTheme } from "styled-components";
-import { MENU_HEIGHT } from "./constants";
 import Text, { TextType } from "components/ads/Text";
 import { Colors } from "constants/Colors";
 import {
@@ -56,7 +55,7 @@ const Container = styled.div`
 const BodyContainer = styled.div`
   display: flex;
   flex-direction: column;
-  height: calc(100% - ${MENU_HEIGHT}px);
+  height: calc(100% - 18px);
 `;
 
 const CloseBtnContainer = styled.div`
@@ -82,6 +81,24 @@ const TextWrapper = styled.div`
   display: block;
 `;
 
+const AppListContainer = styled.div`
+  height: 160px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba(75, 72, 72, 0.5);
+    width: 4px;
+    border-radius: ${(props) => props.theme.radii[3]}px;
+  }
+
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+  position: relative;
+`;
+
 function RepoLimitExceededErrorModal() {
   const isOpen = useSelector(getShowRepoLimitErrorModal);
   const dispatch = useDispatch();
@@ -236,38 +253,40 @@ function RepoLimitExceededErrorModal() {
               />
             </div>
           </InfoWrapper>
-          {applications.map((application: ApplicationPayload) => {
-            const { gitApplicationMetadata } = application;
-            return (
-              <ApplicationWrapper
-                className="t--connected-app-wrapper"
-                key={application.id}
-              >
-                <div>
-                  <TextWrapper>
-                    <Text color={Colors.OXFORD_BLUE} type={TextType.H4}>
-                      {application.name}
-                    </Text>
-                  </TextWrapper>
-                  <TextWrapper>
-                    <Text color={Colors.OXFORD_BLUE} type={TextType.P3}>
-                      {gitApplicationMetadata?.remoteUrl}
-                    </Text>
-                  </TextWrapper>
-                </div>
-                <Link
-                  className="t--disconnect-link"
-                  color={Colors.CRIMSON}
-                  hasIcon
-                  link=""
-                  onClick={() =>
-                    openDisconnectGitModal(application.id, application.name)
-                  }
-                  text={createMessage(DISCONNECT_GIT)}
-                />
-              </ApplicationWrapper>
-            );
-          })}
+          <AppListContainer>
+            {applications.map((application: ApplicationPayload) => {
+              const { gitApplicationMetadata } = application;
+              return (
+                <ApplicationWrapper
+                  className="t--connected-app-wrapper"
+                  key={application.id}
+                >
+                  <div>
+                    <TextWrapper>
+                      <Text color={Colors.OXFORD_BLUE} type={TextType.H4}>
+                        {application.name}
+                      </Text>
+                    </TextWrapper>
+                    <TextWrapper>
+                      <Text color={Colors.OXFORD_BLUE} type={TextType.P3}>
+                        {gitApplicationMetadata?.remoteUrl}
+                      </Text>
+                    </TextWrapper>
+                  </div>
+                  <Link
+                    className="t--disconnect-link"
+                    color={Colors.CRIMSON}
+                    hasIcon
+                    link=""
+                    onClick={() =>
+                      openDisconnectGitModal(application.id, application.name)
+                    }
+                    text={createMessage(DISCONNECT_GIT)}
+                  />
+                </ApplicationWrapper>
+              );
+            })}
+          </AppListContainer>
         </BodyContainer>
         <CloseBtnContainer onClick={onClose}>
           <Icon

From a51ac2ed5a87cee3d0d57ae9b7a3bc3c14662137 Mon Sep 17 00:00:00 2001
From: haojin111 <haojin828@outlook.com>
Date: Mon, 14 Mar 2022 12:14:07 +0800
Subject: [PATCH 2/3] added padding of git app list container

---
 .../src/pages/Editor/gitSync/RepoLimitExceededErrorModal.tsx     | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/client/src/pages/Editor/gitSync/RepoLimitExceededErrorModal.tsx b/app/client/src/pages/Editor/gitSync/RepoLimitExceededErrorModal.tsx
index 7526082a3b..794ba80691 100644
--- a/app/client/src/pages/Editor/gitSync/RepoLimitExceededErrorModal.tsx
+++ b/app/client/src/pages/Editor/gitSync/RepoLimitExceededErrorModal.tsx
@@ -86,6 +86,7 @@ const AppListContainer = styled.div`
   overflow-y: auto;
   overflow-x: hidden;
   scrollbar-width: none;
+  padding-right: 5px;
 
   &::-webkit-scrollbar-thumb {
     background-color: rgba(75, 72, 72, 0.5);

From 884b203cf44fbd12dbc3d5290808e52240efbc53 Mon Sep 17 00:00:00 2001
From: haojin111 <haojin828@outlook.com>
Date: Wed, 23 Mar 2022 14:45:37 +0800
Subject: [PATCH 3/3] advanced of scrolling with latest release

---
 .../gitSync/RepoLimitExceededErrorModal.tsx    | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

diff --git a/app/client/src/pages/Editor/gitSync/RepoLimitExceededErrorModal.tsx b/app/client/src/pages/Editor/gitSync/RepoLimitExceededErrorModal.tsx
index e46d42ea87..d118b46cc9 100644
--- a/app/client/src/pages/Editor/gitSync/RepoLimitExceededErrorModal.tsx
+++ b/app/client/src/pages/Editor/gitSync/RepoLimitExceededErrorModal.tsx
@@ -54,7 +54,7 @@ const Container = styled.div`
 const BodyContainer = styled.div`
   display: flex;
   flex-direction: column;
-  height: calc(100% - 18px);
+  height: 100%;
 `;
 
 const CloseBtnContainer = styled.div`
@@ -68,7 +68,7 @@ const ButtonContainer = styled.div`
 `;
 
 const ApplicationWrapper = styled.div`
-  margin-top: ${(props) => props.theme.spaces[7]}px;
+  margin-bottom: ${(props) => props.theme.spaces[7]}px;
   display: flex;
   justify-content: space-between;
 `;
@@ -78,7 +78,8 @@ const TextWrapper = styled.div`
 `;
 
 const AppListContainer = styled.div`
-  height: 160px;
+  height: calc(100% - 40px);
+  margin-top: 16px;
   overflow-y: auto;
   overflow-x: hidden;
   scrollbar-width: none;
@@ -96,12 +97,6 @@ const AppListContainer = styled.div`
   position: relative;
 `;
 
-const StyledDialog = styled(Dialog)`
-  && .bp3-dialog-body {
-    margin-top: 0;
-  }
-`;
-
 function RepoLimitExceededErrorModal() {
   const isOpen = useSelector(getShowRepoLimitErrorModal);
   const dispatch = useDispatch();
@@ -167,12 +162,13 @@ function RepoLimitExceededErrorModal() {
   };
 
   return (
-    <StyledDialog
+    <Dialog
       canEscapeKeyClose
       canOutsideClickClose
       className="t--git-repo-limited-modal"
       isOpen={isOpen}
       maxWidth={"900px"}
+      noModalBodyMarginTop
       onClose={onClose}
       width={"550px"}
     >
@@ -300,7 +296,7 @@ function RepoLimitExceededErrorModal() {
           />
         </CloseBtnContainer>
       </Container>
-    </StyledDialog>
+    </Dialog>
   );
 }