From 43f0bf60277dc1c93f001974405dcb169583cb79 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Thu, 1 Jan 2026 14:38:47 +0900
Subject: [PATCH] [Update] Adjust button padding and entry width in
 OpenWebpageButton; add responsive text size in SidebarSection

---
 .../_OpenWebpageButton.module.scss                     |  3 ++-
 .../setting_box/_components/auth_key/AuthKey.jsx       |  2 +-
 .../app/config_page/sidebar_section/SidebarSection.jsx | 10 ++++++++--
 .../sidebar_section/SidebarSection.module.scss         |  3 +++
 4 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src-ui/views/app/config_page/setting_section/setting_box/_components/_atoms/_open_webpage_button/_OpenWebpageButton.module.scss b/src-ui/views/app/config_page/setting_section/setting_box/_components/_atoms/_open_webpage_button/_OpenWebpageButton.module.scss
index fd300952..9547963f 100644
--- a/src-ui/views/app/config_page/setting_section/setting_box/_components/_atoms/_open_webpage_button/_OpenWebpageButton.module.scss
+++ b/src-ui/views/app/config_page/setting_section/setting_box/_components/_atoms/_open_webpage_button/_OpenWebpageButton.module.scss
@@ -2,10 +2,11 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    width: fit-content;
 }
 
 .open_webpage_button {
-    padding: 0.6rem 2.8rem;
+    padding: 0.6rem 1.2rem;
     display: flex;
     gap: 1rem;
     justify-content: center;
diff --git a/src-ui/views/app/config_page/setting_section/setting_box/_components/auth_key/AuthKey.jsx b/src-ui/views/app/config_page/setting_section/setting_box/_components/auth_key/AuthKey.jsx
index 85ae9928..4cddbdeb 100644
--- a/src-ui/views/app/config_page/setting_section/setting_box/_components/auth_key/AuthKey.jsx
+++ b/src-ui/views/app/config_page/setting_section/setting_box/_components/auth_key/AuthKey.jsx
@@ -38,7 +38,7 @@ export const AuthKey = (props) => {
     return (
         <div className={styles.container}>
             <div className={styles.entry_section_wrapper}>
-                <_Entry ref={entryRef} width="30rem" onChange={onchangeEntryAuthKey} ui_variable={props.variable} is_disabled={is_disabled}/>
+                <_Entry ref={entryRef} width="24rem" onChange={onchangeEntryAuthKey} ui_variable={props.variable} is_disabled={is_disabled}/>
                 <button className={save_button_class_names} onClick={saveAuthKey}>
                     {is_disabled
                     ? <CircularProgress size="1.4rem" sx={{ color: "var(--dark_basic_text_color)" }}/>
diff --git a/src-ui/views/app/config_page/sidebar_section/SidebarSection.jsx b/src-ui/views/app/config_page/sidebar_section/SidebarSection.jsx
index b7d36272..4242f5b0 100644
--- a/src-ui/views/app/config_page/sidebar_section/SidebarSection.jsx
+++ b/src-ui/views/app/config_page/sidebar_section/SidebarSection.jsx
@@ -27,11 +27,15 @@ export const SidebarSection = () => {
 
 import clsx from "clsx";
 import { useI18n } from "@useI18n";
-import { useStore_SelectedConfigTabId } from "@store";
+import {
+    useStore_SelectedConfigTabId,
+    useStore_IsBreakPoint,
+} from "@store";
 
 const Tab = (props) => {
     const { t } = useI18n();
     const { updateSelectedConfigTabId, currentSelectedConfigTabId } = useStore_SelectedConfigTabId();
+    const { currentIsBreakPoint } = useStore_IsBreakPoint();
     const onclickFunction = () => {
         updateSelectedConfigTabId(props.tab_id);
     };
@@ -54,7 +58,9 @@ const Tab = (props) => {
 
     return (
         <div className={tab_container_class_names} onClick={onclickFunction}>
-            <p className={styles.tab_text}>{getLabel()}</p>
+            <p className={clsx(styles.tab_text, {
+                [styles.tab_text_small]: currentIsBreakPoint.data
+            })}>{getLabel()}</p>
             <div className={switch_indicator_class_names}></div>
         </div>
     );
diff --git a/src-ui/views/app/config_page/sidebar_section/SidebarSection.module.scss b/src-ui/views/app/config_page/sidebar_section/SidebarSection.module.scss
index 56977d6f..f5806d06 100644
--- a/src-ui/views/app/config_page/sidebar_section/SidebarSection.module.scss
+++ b/src-ui/views/app/config_page/sidebar_section/SidebarSection.module.scss
@@ -64,6 +64,9 @@
     font-size: 1.6rem;
     // text-overflow: ellipsis;
     position: relative;
+    &.tab_text_small {
+        font-size: 1.4rem;
+    }
 }
 .crown_emoji {
     font-size: 1.6rem;