fix layout

RobokopU24 · Jun 28, 2023 · 6873715 · 6873715
1 parent 168ec4c
commit 6873715
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/src/pages/answer/kgBubble/KgBubble.jsx b/src/pages/answer/kgBubble/KgBubble.jsx
@@ -160,7 +160,13 @@ export default function KgBubble({
   return (
     <>
       {nodes.length > 0 && (
-        <div style={{ display: 'flex' }}>
+        <div style={{
+          display: 'flex',
+          width: '100%',
+          gap: '10px',
+          margin: '10px',
+        }}
+        >
           <Paper id="kgBubbleContainer" elevation={3}>
             <h5 className="cardLabel">Knowledge Graph Bubble</h5>
             {nodes.length > defaultTrimNum && (

diff --git a/src/pages/answer/kgBubble/kgBubble.css b/src/pages/answer/kgBubble/kgBubble.css
@@ -1,12 +1,12 @@
 #kgBubbleContainer {
-    flex: 1;
+    flex: 1 0 0;  
     height: 30rem;
-    margin: 10px;
     position: relative;
+    overflow: hidden;
 }
 #legendContainer {
     height: 30rem;
-    margin: 10px;
+    overflow-x: auto;
 }
 .legendHeader {
     padding: 5px 0px 0px 10px;