From 9e057d4395e8eddfcbb984a81f3fec247139cced Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Sat, 28 Dec 2024 05:49:30 +0900
Subject: [PATCH 1/2] [bugfix] Config Page: To reset scroll position to top
 when the tabs are changed.

---
 .../app/config_page/setting_section/SettingSection.jsx | 10 +++++++++-
 src-ui/logics/configs/useSettingBoxScrollPosition.js   | 10 ++++++++--
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src-ui/app/config_page/setting_section/SettingSection.jsx b/src-ui/app/config_page/setting_section/SettingSection.jsx
index c39e6221..b70b7763 100644
--- a/src-ui/app/config_page/setting_section/SettingSection.jsx
+++ b/src-ui/app/config_page/setting_section/SettingSection.jsx
@@ -2,14 +2,22 @@ import { useRef, useLayoutEffect, useEffect } from "react";
 
 import styles from "./SettingSection.module.scss";
 import { SettingBox } from "./setting_box/SettingBox";
-import { store } from "@store";
+import { store, useStore_SelectedConfigTabId } from "@store";
+import { useSettingBoxScrollPosition } from "@logics_configs";
 
 export const SettingSection = () => {
+    const { currentSelectedConfigTabId } = useStore_SelectedConfigTabId();
+    const { resetScrollPosition } = useSettingBoxScrollPosition();
     const scrollContainerRef = useRef(null);
+
     useLayoutEffect(() => {
         store.setting_box_scroll_container = scrollContainerRef;
     }, []);
 
+    useEffect(() => {
+        resetScrollPosition();
+    }, [currentSelectedConfigTabId.data]);
+
     return (
         <div ref={scrollContainerRef} className={styles.scroll_container}>
             <div className={styles.container}>
diff --git a/src-ui/logics/configs/useSettingBoxScrollPosition.js b/src-ui/logics/configs/useSettingBoxScrollPosition.js
index c0a19b98..87d8365c 100644
--- a/src-ui/logics/configs/useSettingBoxScrollPosition.js
+++ b/src-ui/logics/configs/useSettingBoxScrollPosition.js
@@ -9,19 +9,25 @@ export const useSettingBoxScrollPosition = () => {
         }
     };
     const restoreScrollPosition = () => {
-
         if (store.setting_box_scroll_container.current) {
             updateSettingBoxScrollPosition((pre) => {
                 store.setting_box_scroll_container.current.scrollTop = pre.data;
                 return pre.data;
             })
         }
-
     };
 
+    const resetScrollPosition = () => {
+        if (store.setting_box_scroll_container.current) {
+            store.setting_box_scroll_container.current.scrollTop = 0;
+            updateSettingBoxScrollPosition(0);
+        }
+    }
+
     return {
         saveScrollPosition,
         restoreScrollPosition,
+        resetScrollPosition,
         currentSettingBoxScrollPosition,
         updateSettingBoxScrollPosition,
     };

From 833fa24545dc061dd0c6b3bd4672c31e02b226ae Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Sat, 28 Dec 2024 07:31:16 +0900
Subject: [PATCH 2/2] [Update] Config Page: Adjust slider component and deepL
 auth key component width.

---
 .../deepl_auth_key/DeeplAuthKey.module.scss            |  5 ++++-
 .../label_component/LabelComponent.module.scss         |  1 +
 .../setting_box/_components/slider/Slider.jsx          |  2 +-
 .../setting_box/_components/slider/Slider.module.scss  |  4 ++++
 .../setting_box/_templates/Templates.jsx               |  2 +-
 .../setting_box/_templates/Templates.module.scss       |  2 +-
 .../config_page/setting_section/setting_box/vr/Vr.jsx  | 10 ++++++++++
 .../setting_section/setting_box/vr/Vr.module.scss      | 10 ++++++----
 8 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/deepl_auth_key/DeeplAuthKey.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/deepl_auth_key/DeeplAuthKey.module.scss
index 575ec8bc..915f300c 100644
--- a/src-ui/app/config_page/setting_section/setting_box/_components/deepl_auth_key/DeeplAuthKey.module.scss
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/deepl_auth_key/DeeplAuthKey.module.scss
@@ -4,6 +4,7 @@
     justify-content: center;
     align-items: center;
     gap: 1rem;
+    flex-shrink: 0;
 }
 
 .entry_section_wrapper {
@@ -72,13 +73,14 @@
 }
 
 .open_webpage_button {
-    padding: 0.6rem 3.2rem;
+    padding: 0.6rem 2.8rem;
     display: flex;
     gap: 1rem;
     justify-content: center;
     align-items: center;
     border-radius: 0.4rem;
     cursor: pointer;
+    flex-shrink: 0;
     &:hover {
         background-color: var(--dark_825_color);
     }
@@ -95,4 +97,5 @@
 .external_link_svg {
     color: var(--dark_500_color);
     width: 1.6rem;
+    flex-shrink: 0;
 }
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/label_component/LabelComponent.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/label_component/LabelComponent.module.scss
index 7aa82d3c..c49055a8 100644
--- a/src-ui/app/config_page/setting_section/setting_box/_components/label_component/LabelComponent.module.scss
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/label_component/LabelComponent.module.scss
@@ -10,6 +10,7 @@
     font-weight: 400;
     color: var(--dark_basic_text_color);
     white-space: nowrap;
+    width: max-content;
 }
 
 .desc {
diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/slider/Slider.jsx b/src-ui/app/config_page/setting_section/setting_box/_components/slider/Slider.jsx
index 4a5e6edf..3e896a59 100644
--- a/src-ui/app/config_page/setting_section/setting_box/_components/slider/Slider.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/slider/Slider.jsx
@@ -5,7 +5,7 @@ import { clsx } from "clsx";
 
 export const Slider = (props) => {
     return (
-        <div className={clsx(styles.container, props.className)}>
+        <div className={clsx(styles.container, props.className, {[styles.no_padding]: props.no_padding || props.is_break_point})}>
             <MUI_Slider
                 aria-label="Default"
                 valueLabelDisplay="auto"
diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/slider/Slider.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/slider/Slider.module.scss
index 21333dcb..79db6294 100644
--- a/src-ui/app/config_page/setting_section/setting_box/_components/slider/Slider.module.scss
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/slider/Slider.module.scss
@@ -4,4 +4,8 @@
     align-items: center;
     justify-content: center;
     width: 100%;
+    padding-left: 4rem;
+    &.no_padding {
+        padding-left: 0;
+    }
 }
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/_templates/Templates.jsx b/src-ui/app/config_page/setting_section/setting_box/_templates/Templates.jsx
index 96e42d30..5f42276f 100644
--- a/src-ui/app/config_page/setting_section/setting_box/_templates/Templates.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/_templates/Templates.jsx
@@ -54,7 +54,7 @@ const CommonContainer = ({ Component, ...props }) => {
 
     return (
         <LabeledContainer label={props.label} desc={props.desc} custom_class_name={container_class}>
-            <Component {...props} />
+            <Component {...props} is_break_point={currentIsBreakPoint.data} />
         </LabeledContainer>
     );
 };
diff --git a/src-ui/app/config_page/setting_section/setting_box/_templates/Templates.module.scss b/src-ui/app/config_page/setting_section/setting_box/_templates/Templates.module.scss
index 66bb6464..cab3118a 100644
--- a/src-ui/app/config_page/setting_section/setting_box/_templates/Templates.module.scss
+++ b/src-ui/app/config_page/setting_section/setting_box/_templates/Templates.module.scss
@@ -4,7 +4,7 @@
     justify-content: space-between;
     align-items: center;
     padding: 2rem;
-    gap: 10rem;
+    gap: 2rem;
     &.flex_column {
         flex-direction: column;
     }
diff --git a/src-ui/app/config_page/setting_section/setting_box/vr/Vr.jsx b/src-ui/app/config_page/setting_section/setting_box/vr/Vr.jsx
index cf19c1ab..e1197b22 100644
--- a/src-ui/app/config_page/setting_section/setting_box/vr/Vr.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/vr/Vr.jsx
@@ -199,6 +199,7 @@ const PositionControls = ({settings, onchangeFunction, selectFunction, ui_config
                 </p>
                 <Slider
                     className={styles.x_position_slider}
+                    no_padding={true}
                     variable={settings.x_pos}
                     step={ui_configs.x_pos.step}
                     min={ui_configs.x_pos.min}
@@ -213,6 +214,7 @@ const PositionControls = ({settings, onchangeFunction, selectFunction, ui_config
                 </p>
                 <Slider
                     className={styles.y_position_slider}
+                    no_padding={true}
                     variable={settings.y_pos}
                     step={ui_configs.y_pos.step}
                     min={ui_configs.y_pos.min}
@@ -228,6 +230,7 @@ const PositionControls = ({settings, onchangeFunction, selectFunction, ui_config
                 </p>
                 <Slider
                     className={styles.z_position_slider}
+                    no_padding={true}
                     variable={settings.z_pos}
                     step={ui_configs.z_pos.step}
                     min={ui_configs.z_pos.min}
@@ -252,6 +255,7 @@ const RotationControls = ({settings, onchangeFunction, selectFunction, default_u
                 </p>
                 <Slider
                     className={styles.x_rotation_slider}
+                    no_padding={true}
                     variable={-settings.x_rotation}
                     valueLabelFormat={settings.x_rotation}
                     step={5}
@@ -268,6 +272,7 @@ const RotationControls = ({settings, onchangeFunction, selectFunction, default_u
                 </p>
                 <Slider
                     className={styles.y_rotation_slider}
+                    no_padding={true}
                     variable={settings.y_rotation}
                     step={5}
                     min={-180}
@@ -282,6 +287,7 @@ const RotationControls = ({settings, onchangeFunction, selectFunction, default_u
                 </p>
                 <Slider
                     className={styles.z_rotation_slider}
+                    no_padding={true}
                     variable={settings.z_rotation}
                     step={5}
                     min={-180}
@@ -308,6 +314,7 @@ const OtherControls = ({settings, onchangeFunction, ui_configs}) => {
                 </p>
                 <Slider
                     className={clsx(styles.other_controls_slider, styles.opacity_slider)}
+                    no_padding={true}
                     variable={settings.opacity * 100}
                     valueLabelFormat={`${ui_variable_opacity}%`}
                     step={5}
@@ -322,6 +329,7 @@ const OtherControls = ({settings, onchangeFunction, ui_configs}) => {
                 </p>
                 <Slider
                     className={clsx(styles.other_controls_slider, styles.ui_scaling_slider)}
+                    no_padding={true}
                     variable={settings.ui_scaling * 100}
                     valueLabelFormat={`${ui_variable_ui_scaling}%`}
                     step={ui_configs.ui_scaling.step}
@@ -334,6 +342,7 @@ const OtherControls = ({settings, onchangeFunction, ui_configs}) => {
                 <p className={clsx(styles.other_controls_slider_label, styles.display_duration_label)}>{t("config_page.vr.display_duration")}</p>
                 <Slider
                     className={clsx(styles.other_controls_slider, styles.display_duration_slider)}
+                    no_padding={true}
                     variable={settings.display_duration}
                     valueLabelFormat={`${settings.display_duration} second(s)`}
                     step={1}
@@ -346,6 +355,7 @@ const OtherControls = ({settings, onchangeFunction, ui_configs}) => {
                 <p className={clsx(styles.other_controls_slider_label, styles.fadeout_duration_label)}>{t("config_page.vr.fadeout_duration")}</p>
                 <Slider
                     className={clsx(styles.other_controls_slider, styles.fadeout_duration_slider)}
+                    no_padding={true}
                     variable={settings.fadeout_duration}
                     valueLabelFormat={`${settings.fadeout_duration} second(s)`}
                     step={1}
diff --git a/src-ui/app/config_page/setting_section/setting_box/vr/Vr.module.scss b/src-ui/app/config_page/setting_section/setting_box/vr/Vr.module.scss
index c18c2be7..83dec71d 100644
--- a/src-ui/app/config_page/setting_section/setting_box/vr/Vr.module.scss
+++ b/src-ui/app/config_page/setting_section/setting_box/vr/Vr.module.scss
@@ -256,18 +256,20 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    justify-content: center;
+    justify-content: space-between;
     width: 100%;
     position: relative;
 }
 .other_controls_slider {
-    margin-left: 18rem;
+    // margin-left: 18rem;
+    // width: 60%;
 }
 
 .other_controls_slider_label {
-    position: absolute;
+    // position: absolute;
     font-size: 1.6rem;
-    width: 100%;
+    flex-shrink: 0;
+    width: 30%;
 }
 
 .common_container {