Merge branch 'bugfix_message_box_ratio' into for_webui

src-python/config.py

@@ -399,7 +399,7 @@ class Config:
 
     @MESSAGE_BOX_RATIO.setter
     def MESSAGE_BOX_RATIO(self, value):
-        if isinstance(value, int) and self.MESSAGE_BOX_RATIO_RANGE[0] <= value <= self.MESSAGE_BOX_RATIO_RANGE[1]:
+        if isinstance(value, float):
             self._MESSAGE_BOX_RATIO = value
             saveJson(self.PATH_CONFIG, inspect.currentframe().f_code.co_name, value)
 

src-python/webui_controller.py

@@ -549,7 +549,7 @@ class Controller:
 
     @staticmethod
     def setMessageBoxRatio(data, *args, **kwargs) -> dict:
-        config.MESSAGE_BOX_RATIO = int(data)
+        config.MESSAGE_BOX_RATIO = float(data)
         return {"status":200, "result":config.MESSAGE_BOX_RATIO}
 
     @staticmethod

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

@@ -1,14 +1,17 @@
 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 { appWindow } from "@tauri-apps/api/window";
 import { LogBox } from "./log_box/LogBox";
 import { MessageInputBox } from "./message_input_box/MessageInputBox";
 import { useMessageInputBoxRatio } from "@logics_main";
+import { useUiScaling } from "@logics_configs";
 
 export const MessageContainer = () => {
     const { currentMessageInputBoxRatio, setMessageInputBoxRatio } = useMessageInputBoxRatio();
+    const { currentUiScaling } = useUiScaling();
     const [message_box_height_in_rem, setMessageBoxHeightInRem] = useState(10);
+    const FONT_SIZE_STANDARD = 10 * currentUiScaling.data / 100;  // 10px = 1rem
 
     const container_ref = useRef(null);
     const log_box_ref = useRef(null);
@@ -37,7 +40,9 @@ export const MessageContainer = () => {
     });
 
     useEffect(() => {
-        setMessageBoxHeightInRem((position / 10) - 1.5);
+        // Note: I thought the part "1.4" is message box bottom padding + (message box separator height/2)
+        // but it should be fixed at 1.4. Idk why, tho.
+        setMessageBoxHeightInRem((position / FONT_SIZE_STANDARD) - 1.4);
     }, [position]);
 
 
@@ -49,8 +54,8 @@ export const MessageContainer = () => {
         const container_height = container_ref.current.offsetHeight;
         const container_padding_bottom = parseFloat(window.getComputedStyle(container_ref.current).paddingBottom);
         const total_height = container_height - container_padding_bottom;
-
+        if (total_height === 0) return 0;
-        return ((ratio / 100) * total_height / 10) | 0; // 10px = 1rem
+        return ((ratio / 100) * total_height / FONT_SIZE_STANDARD);
     };
 
 

src-ui/app/window_title_bar/WindowTitleBar.module.scss

@@ -11,7 +11,7 @@
     width: 100%;
     justify-content: space-between;
     align-items: center;
-    height: 2rem;
+    height: var(--title_bar_height);
     margin-top: 0.4rem;
 }
 

src-ui/utils/variables.css

@@ -46,6 +46,7 @@
     --dark_1000_color: #151517;
 
 
+    --title_bar_height: 2rem;
     --main_page_topbar_height: 4.8rem;
     --config_page_sidebar_width: 18rem;
     --config_page_topbar_height: 8rem;