[Update/bugfix] Quick Settings: Expand width.

Config Page: Sidebar: shrink width a bit.
Config Page: Setting Box: each component: Fix gap to prevent sliders cover the label.

src-ui/app/_index_css/variables.css

@@ -54,7 +54,7 @@
 
     --title_bar_height: 2rem;
     --main_page_topbar_height: 4.8rem;
-    --config_page_sidebar_width: 18rem;
+    --config_page_sidebar_width: 16.8rem;
     --config_page_topbar_height: 8rem;
 
     --font_family: "Yu Gothic UI";

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: 6rem;
+    gap: 10rem;
     &.flex_column {
         flex-direction: column;
     }

src-ui/app/config_page/sidebar_section/SidebarSection.module.scss

@@ -4,7 +4,7 @@
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    padding: 0rem 0rem 5.8rem 1.6rem;
+    padding: 0rem 0rem 5.8rem 1.2rem;
     max-height: 60rem;
 }
 
@@ -23,7 +23,7 @@
     justify-content: left;
     align-items: center;
     color: var(--dark_basic_text_color);
-    padding: 0.8rem 0 0.8rem 1.2rem;
+    padding: 0.8rem 0 0.8rem 1rem;
     cursor: pointer;
     &:hover {
         background-color: var(--dark_800_color);

src-ui/app/modal_controller/ModalController.module.scss

@@ -22,7 +22,7 @@
     transform: translate(-50%, -50%);
     overflow-y: auto;
     background-color: var(--dark_900_color);
-    width: 60%;
+    width: 80%;
     height: 96%;
     padding: 2rem;
     border-radius: 0.6rem;