works

QuivrHQ · Jan 25, 2024 · 4f3c516 · 4f3c516
1 parent 7a8d447
commit 4f3c516
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 16 deletions.
diff --git a/...app/chat/[chatId]/components/DataPanel/components/RelatedBrains/RelatedBrains.module.scss b/...app/chat/[chatId]/components/DataPanel/components/RelatedBrains/RelatedBrains.module.scss
@@ -1,8 +1,23 @@
 @use "@/styles/Spacings.module.scss";
 
-.brain_line {
+.close_brains_wrapper {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: Spacings.$spacing02;
+  flex-direction: column;
+  padding-bottom: Spacings.$spacing03;
+  gap: Spacings.$spacing01;
+
+  .brain_line {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding-inline: Spacings.$spacing05;
+    overflow: hidden;
+
+    .brain_name {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
 }
diff --git a/frontend/app/chat/[chatId]/components/DataPanel/components/RelatedBrains/RelatedBrains.tsx b/frontend/app/chat/[chatId]/components/DataPanel/components/RelatedBrains/RelatedBrains.tsx
@@ -37,14 +37,16 @@ const RelatedBrains = ({ closeBrains }: RelatedBrainsProps): JSX.Element => {
       icon="brain"
       foldedByDefault={true}
     >
-      {closeBrains.map((brain, index) => (
-        <div className={styles.brain_line} key={index}>
-          <p className={styles.brain_name}>@{brain.name}</p>
-          <p className={styles.brain_score} style={{ color: colors[index] }}>
-            {Math.round(brain.similarity * 100)}
-          </p>
-        </div>
-      ))}
+      <div className={styles.close_brains_wrapper}>
+        {closeBrains.map((brain, index) => (
+          <div className={styles.brain_line} key={index}>
+            <p className={styles.brain_name}>@{brain.name}</p>
+            <p className={styles.brain_score} style={{ color: colors[index] }}>
+              {Math.round(brain.similarity * 100)}
+            </p>
+          </div>
+        ))}
+      </div>
     </FoldableSection>
   );
 };

diff --git a/frontend/lib/components/ui/FoldableSection/FoldableSection.module.scss b/frontend/lib/components/ui/FoldableSection/FoldableSection.module.scss
@@ -4,7 +4,6 @@
 .foldable_section_wrapper {
   display: flex;
   flex-direction: column;
-  gap: Spacings.$spacing04;
   border-radius: 5px;
   border: 1px dashed Colors.$light-grey;
   overflow: hidden;
@@ -20,10 +19,14 @@
       display: flex;
       align-items: center;
       gap: Spacings.$spacing03;
-    }
+      overflow: hidden;
 
-    .header_title {
-      font-weight: bold;
+      .header_title {
+        font-weight: bold;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
     }
 
     &:hover {