fix: Change msgbox flex direction based on offsetHeight (#57)

d0j1a1701 · Jul 4, 2024 · 7b0c416 · 7b0c416
1 parent 9e32a1e
commit 7b0c416
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 3 deletions.
diff --git a/src/components/code_block.jsx b/src/components/code_block.jsx
@@ -97,4 +97,14 @@ export function addOnClickHandleForLatexBlock(element) {
                 ;
             }
         });
+}
+
+export function changeDirectionToColumnWhenLargerHeight() {
+    var msgBlocks = document.querySelectorAll('.mix-message__inner');
+    Array.from(msgBlocks).forEach(function (block) {
+        var height = block.offsetHeight;
+        if (height > 30) {
+            block.style.flexDirection = 'column';
+        }
+    });
 }
diff --git a/src/renderer.jsx b/src/renderer.jsx
@@ -16,7 +16,8 @@ import {
     HighLightedCodeBlock,
     addOnClickHandleForCopyButton,
     renderInlineCodeBlockString,
-    addOnClickHandleForLatexBlock
+    addOnClickHandleForLatexBlock,
+    changeDirectionToColumnWhenLargerHeight
 } from './components/code_block';
 
 // States
@@ -185,7 +186,9 @@ function render() {
                 .forEach((elem) => {
                     posBase.before(elem)
                 })
-            messageBox.removeChild(posBase)
+            messageBox.removeChild(posBase);
+
+            changeDirectionToColumnWhenLargerHeight();
 
         })
 

diff --git a/src/style/markdown.css b/src/style/markdown.css
@@ -168,8 +168,9 @@ pre.hl-code-block>button.lang_copy:not(:hover)>p.copy {
 /* 修复轻量工具箱等插件时间显示多出换行的问题 */
 .mix-message__inner {
     display: flex;
+    flex-direction: row;
 }
 
 .lite-tools-slot.embed-slot {
     flex: none;
-}
+}