fix: more explain block overflow issues

githubnext · Apr 19, 2022 · 05ca506 · 05ca506
1 parent 3a2fb4e
commit 05ca506
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/src/blocks/file-blocks/explain/index.css b/src/blocks/file-blocks/explain/index.css
@@ -133,3 +133,8 @@
 .comment:hover {
   color: rgba(0, 0, 0, 0.5);
 }
+
+code,
+code span {
+  font-size: 14px !important;
+}
diff --git a/src/blocks/file-blocks/explain/index.tsx b/src/blocks/file-blocks/explain/index.tsx
@@ -143,12 +143,12 @@ function BlockInner(props: FileBlockProps) {
             >
               {content}
             </SyntaxHighlighter>
-            <div className="min-w-[200px] relative">
+            <div className="basis-48 flex-grow-0 flex-shrink-0 relative">
               {Object.entries(explanations).map(([line, explanation]) => {
                 return (
                   <div
                     key={line}
-                    className="px-3 overflow-y-auto absolute bg-white"
+                    className="px-3 overflow-y-auto break-all absolute left-0 w-full bg-white"
                     style={{
                       top: (explanation.start - 1) * 21 - 2,
                       height: (explanation.end - explanation.start + 1) * 21,