From 56fda283b483727f0fd47d22ea0fb4264e0a31fd Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Fri, 20 Dec 2024 23:53:39 +0900
Subject: [PATCH] [Update] Config Page: Adjust some width and design that was
 shrink unexpectedly. Remove some indicator numbers and only show even numbers
 on Slider components.

---
 .../_components/radio_button/RadioButton.module.scss          | 1 +
 .../setting_section/setting_box/appearance/Appearance.jsx     | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/radio_button/RadioButton.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/radio_button/RadioButton.module.scss
index 99d2bcc3..b8ed8515 100644
--- a/src-ui/app/config_page/setting_section/setting_box/_components/radio_button/RadioButton.module.scss
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/radio_button/RadioButton.module.scss
@@ -6,6 +6,7 @@
     position: relative;
     flex-shrink: 0;
     flex-wrap: wrap;
+    max-width: 70%;
     &.column {
         flex-direction: column;
     }
diff --git a/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx b/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx
index 129a9216..d9ecb7c6 100644
--- a/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx
@@ -75,7 +75,7 @@ const UiScalingContainer = () => {
     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;
+            const label = ([50,70,90,110,130,150,170,190].includes(value)) ? "" : value;
             marks.push({ value, label: `${label}` });
         }
         return marks;
@@ -117,7 +117,7 @@ export const MessageLogUiScalingContainer = () => {
     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;
+            const label = ([50,70,90,110,130,150,170,190].includes(value)) ? "" : value;
             marks.push({ value, label: `${label}` });
         }
         return marks;