[Update] Add Message Log Ui Scaling.

src-ui/app/App.jsx

@@ -32,6 +32,7 @@ import { useEnableAutoClearMessageBox } from "@logics_configs/useEnableAutoClear
 import { useSendMessageButtonType } from "@logics_configs/useSendMessageButtonType";
 import { useUiLanguage } from "@logics_configs/useUiLanguage";
 import { useUiScaling } from "@logics_configs/useUiScaling";
+import { useMessageLogUiScaling } from "@logics_configs/useMessageLogUiScaling";
 
 import { useIsMainPageCompactMode } from "@logics_main/useIsMainPageCompactMode";
 import { useLanguageSettings } from "@logics_main/useLanguageSettings";
@@ -64,6 +65,7 @@ const StartPythonFacadeComponent = () => {
     const { getSendMessageButtonType } = useSendMessageButtonType();
     const { getUiLanguage } = useUiLanguage();
     const { getUiScaling } = useUiScaling();
+    const { getMessageLogUiScaling } = useMessageLogUiScaling();
 
     const {
         getSelectedPresetTabNumber,
@@ -83,6 +85,7 @@ const StartPythonFacadeComponent = () => {
             asyncStartPython().then((result) => {
                 getUiLanguage();
                 getUiScaling();
+                getMessageLogUiScaling();
                 getIsMainPageCompactMode();
                 getMessageInputBoxRatio();
 

src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx

@@ -24,6 +24,7 @@ export const Appearance = () => {
         <>
             <UiLanguageContainer />
             <UiScalingContainer />
+            <MessageLogUiScalingContainer />
 
 
 
@@ -140,4 +141,47 @@ const UiScalingContainer = () => {
             track={false}
         />
     );
+};
+
+import { useMessageLogUiScaling } from "@logics_configs/useMessageLogUiScaling";
+
+const MessageLogUiScalingContainer = () => {
+    const { t } = useTranslation();
+    const { currentMessageLogUiScaling, setMessageLogUiScaling } = useMessageLogUiScaling();
+    const [ui_message_log_ui_scaling, setUiMessageLogUiScaling] = useState(currentMessageLogUiScaling.data);
+
+    const onchangeFunction = (value) => {
+        setUiMessageLogUiScaling(value);
+    };
+    const onchangeCommittedFunction = (value) => {
+        setMessageLogUiScaling(value);
+    };
+    useEffect(() => {
+        setUiMessageLogUiScaling(currentMessageLogUiScaling.data);
+    }, [currentMessageLogUiScaling.data]);
+
+    const createMarks = (min, max) => {
+        const marks = [];
+        for (let value = min; value <= max; value += 10) {
+            const label = ([50,70,130,140,160,170,190].includes(value)) ? "" : value;
+            marks.push({ value, label: `${label}` });
+        }
+        return marks;
+    };
+
+    const marks = createMarks(40, 200);
+
+    return (
+        <SliderContainer
+            label={t("config_page.textbox_ui_size.label") + " (%)"}
+            min="40"
+            max="200"
+            onchangeCommittedFunction={onchangeCommittedFunction}
+            onchangeFunction={onchangeFunction}
+            variable={ui_message_log_ui_scaling}
+            marks={marks}
+            step={null}
+            track={false}
+        />
+    );
 };

src-ui/app/main_page/main_section/message_container/log_box/LogBox.jsx

@@ -41,9 +41,23 @@ export const LogBox = () => {
 
     return (
         <div id="log_container" className={styles.container} ref={log_container_ref}>
+            <MessageLogUiSizeController />
             {currentMessageLogs.data.map(message_data => (
                 <MessageContainer key={message_data.id} {...message_data} />
             ))}
         </div>
     );
+};
+
+import { useMessageLogUiScaling } from "@logics_configs/useMessageLogUiScaling";
+const MessageLogUiSizeController = () => {
+    const { currentMessageLogUiScaling } = useMessageLogUiScaling();
+    const font_size = currentMessageLogUiScaling.data / 100;
+
+    useEffect(() => {
+        const log_container_el = document.getElementById("log_container");
+        log_container_el.style.setProperty("font-size", `${font_size}rem`);
+    }, [currentMessageLogUiScaling.data]);
+
+    return null;
 };

src-ui/app/main_page/main_section/message_container/log_box/LogBox.module.scss

@@ -6,8 +6,5 @@
     overflow: auto;
     border-radius: 0.8rem;
     padding: 1rem;
-}
-
-.text {
-    overflow-wrap: break-word;
+    font-size: 1rem; // This is the standard font size for message logs, and is controlled by JavaScript. All child elements this are generally expressed in "em" and are affected by the font size setting here.
 }

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

@@ -1,7 +1,7 @@
 @import "@scss_mixins";
 
 .container {
-    margin-bottom: 1rem;
+    margin-bottom: 1em;
     width: 100%;
     flex-direction: column;
     display: flex;
@@ -18,7 +18,7 @@
 .info_box {
     position: relative;
     display: flex;
-    gap: 0.8rem;
+    gap: 0.8em;
     justify-content: center;
     &.sent_message {
         align-items: end;
@@ -30,16 +30,16 @@
 }
 
 .loader {
-    @include loader(0.8rem, 0.1rem, left, -1rem);
+    @include loader(0.8em, 0.1em, left, -1em);
 }
 
 .time {
-    font-size: 1rem;
+    font-size: 1em;
     color: var(--dark_600_color);
 }
 
 .category {
-    font-size: 1rem;
+    font-size: 1em;
     &.sent_message {
         color: var(--sent_400_color);
     }
@@ -63,11 +63,11 @@
 .message_main {
     color: var(--dark_basic_text_color);
     user-select: text;
-    font-size: 1.4rem;
+    font-size: 1.4em;
 }
 
 .message_second {
     color: var(--dark_450_color);
     user-select: text;
-    font-size: 1rem;
+    font-size: 1em;
 }