[Update] Main Page: Message Input Box Ratio. Save the ratio when window is resized.

src-ui/app/main_page/main_section/message_container/MessageContainer.jsx

@@ -1,7 +1,7 @@
 import { useResizable } from "react-resizable-layout";
 import { useRef, useEffect, useState } from "react";
 import styles from "./MessageContainer.module.scss";
-
+import { appWindow } from "@tauri-apps/api/window"; // Tauriのwindow APIをインポート
 import { LogBox } from "./log_box/LogBox";
 import { MessageInputBox } from "./message_input_box/MessageInputBox";
 import { useMessageInputBoxRatio } from "@logics_main/useMessageInputBoxRatio";
@@ -50,9 +50,27 @@ export const MessageContainer = () => {
         const container_padding_bottom = parseFloat(window.getComputedStyle(container_ref.current).paddingBottom);
         const total_height = container_height - container_padding_bottom;
 
-        return (ratio / 100) * total_height / 10; // 10px = 1rem
+        return ((ratio / 100) * total_height / 10) | 0; // 10px = 1rem
     };
 
+
+        // Tauriのwindow resizeイベントをリッスン
+        useEffect(() => {
+            let resizeTimeout;
+
+            // イベントのリスナーを設定
+            const unlisten = appWindow.onResized(() => {
+                clearTimeout(resizeTimeout);
+                resizeTimeout = setTimeout(() => {
+                    calculateMessageBoxRatioAndHeight(); // リサイズが終了した後に実行
+                }, 200); // ドラッグが終了したと見なすまでの遅延（200ms程度）
+            });
+
+            return () => {
+                unlisten.then((dispose) => dispose()); // イベントリスナーを解除
+            };
+        }, []);
+
     return (
         <div className={styles.container} ref={container_ref}>
             <div ref={log_box_ref} className={styles.log_box_resize_wrapper}>

src-ui/app/main_page/main_section/message_container/MessageContainer.module.scss

@@ -37,5 +37,5 @@
 .message_box_resize_wrapper {
     height: 10rem;
     min-height: 3.8rem;
-    max-height: 80%;
+    max-height: 90%;
 }