From 7e2cf6bcb207931261ddc962090dda852ab997c4 Mon Sep 17 00:00:00 2001
From: Anastasiia Solop <35258279+anastasiya1155@users.noreply.github.com>
Date: Tue, 3 Oct 2023 09:31:36 +0300
Subject: [PATCH] improve folder chip look in chat (#1015)

---
 .../src/components/IdeNavigation/DirEntry.tsx |  2 +-
 .../MarkdownWithCode/FolderChip.tsx           | 35 +++++++++++--------
 client/src/index.css                          | 25 +++++++++++++
 3 files changed, 46 insertions(+), 16 deletions(-)

diff --git a/client/src/components/IdeNavigation/DirEntry.tsx b/client/src/components/IdeNavigation/DirEntry.tsx
index 276d41e0e4..d0f9488fdd 100644
--- a/client/src/components/IdeNavigation/DirEntry.tsx
+++ b/client/src/components/IdeNavigation/DirEntry.tsx
@@ -125,7 +125,7 @@ const DirEntry = ({
       className="flex flex-col transition-all ease-linear overflow-hidden flex-shrink-0 w-full min-w-fit"
     >
       <a
-        className={`min-w-full w-max text-left h-7 flex items-center gap-1.5 py-2 px-3 cursor-pointer caption group
+        className={`min-w-full w-max text-left h-7 flex-shrink-0 flex items-center gap-1.5 py-2 px-3 cursor-pointer caption group
       ${
         currentPath === fullPath
           ? 'bg-bg-main/15 text-label-title'
diff --git a/client/src/components/MarkdownWithCode/FolderChip.tsx b/client/src/components/MarkdownWithCode/FolderChip.tsx
index fc871fd866..67c28677f2 100644
--- a/client/src/components/MarkdownWithCode/FolderChip.tsx
+++ b/client/src/components/MarkdownWithCode/FolderChip.tsx
@@ -6,6 +6,7 @@ import { buildRepoQuery } from '../../utils';
 import { Directory } from '../../types/api';
 import { SyncStatus } from '../../types/general';
 import { AppNavigationContext } from '../../context/appNavigationContext';
+import OverflowTracker from '../OverflowTracker';
 
 type Props = {
   onClick: () => void;
@@ -57,22 +58,26 @@ const FolderChip = ({ onClick, path, repoName, selectedBranch }: Props) => {
         </span>
       </button>
       <div
-        className={`w-full my-4 p-4 bg-bg-shade text-sm border border-bg-border rounded-md relative max-h-80 overflow-auto`}
+        className={
+          'w-full flex flex-col my-1 folder-chip text-sm border border-bg-border rounded-md overflow-auto max-h-80 p-1'
+        }
       >
-        <DirEntry
-          name={path}
-          isDirectory
-          level={0}
-          currentPath={''}
-          fetchFiles={fetchFiles}
-          fullPath={path}
-          navigateToPath={navigateToPath}
-          defaultOpen
-          indexed
-          repoRef={''}
-          repoStatus={SyncStatus.Done}
-          refetchParentFolder={() => {}}
-        />
+        <OverflowTracker className="auto-fade-vertical">
+          <DirEntry
+            name={path}
+            isDirectory
+            level={0}
+            currentPath={''}
+            fetchFiles={fetchFiles}
+            fullPath={path}
+            navigateToPath={navigateToPath}
+            defaultOpen
+            indexed
+            repoRef={''}
+            repoStatus={SyncStatus.Done}
+            refetchParentFolder={() => {}}
+          />
+        </OverflowTracker>
       </div>
     </>
   );
diff --git a/client/src/index.css b/client/src/index.css
index 92f3b9135a..82262e780d 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -1249,6 +1249,26 @@ h5, .h5 {
   --end-fade: var(--fade-length);
 }
 
+.auto-fade-vertical {
+  overflow-x: scroll;
+  --fade-length: 40px;
+  --start-fade: 0px;
+  --end-fade: 0px;
+  -webkit-mask: linear-gradient(
+          to bottom,
+          transparent,
+          black var(--start-fade),
+          black calc(100% - var(--end-fade)),
+          transparent
+  );
+}
+.auto-fade-vertical[data-overflow-top] {
+  --start-fade: var(--fade-length);
+}
+.auto-fade-vertical[data-overflow-bottom] {
+  --end-fade: var(--fade-length);
+}
+
 .backdrop-blur-0 {
   backdrop-filter: blur(0);
   -webkit-backdrop-filter: blur(0);
@@ -1404,6 +1424,11 @@ h5, .h5 {
   padding: 2px 4px;
 }
 
+.code-studio-md .folder-chip a {
+  background-color: transparent;
+  border: unset;
+}
+
 .article-response li>p, .code-studio-md li>p {
   margin: 0;
   display: unset;