[Update] Adjust button padding and entry width in OpenWebpageButton; add responsive text size in SidebarSection

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;

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)" }}/>

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

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;