From 7b0c41695b30408eab9ebf2ba6da7d52acecf2cd Mon Sep 17 00:00:00 2001
From: Oyasuminasai <61616918+nfnfgo@users.noreply.github.com>
Date: Thu, 4 Jul 2024 20:53:57 +0800
Subject: [PATCH] fix: Change msgbox flex direction based on offsetHeight (#57)

---
 src/components/code_block.jsx | 10 ++++++++++
 src/renderer.jsx              |  7 +++++--
 src/style/markdown.css        |  3 ++-
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/components/code_block.jsx b/src/components/code_block.jsx
index 214aa44..0c3842b 100644
--- 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';
+        }
+    });
 }
\ No newline at end of file
diff --git a/src/renderer.jsx b/src/renderer.jsx
index bcf7f5e..ed58874 100644
--- 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
index dfd0580..5108106 100644
--- 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;
-}
+}
\ No newline at end of file