[Update] Add Message Log Ui Scaling.

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;
 }