[Update] Config Window: UI Size変更対応(指定していたものは全て対応したはず)。コンパクトモードのラベル日本語対応。

[Refactor] CTkScrollableFrameを使用しているwidgetのUI Size変更対応やCTKのheight bug修正をui_utils.pyへ関数切り出し。

locales/en.yml

@@ -26,6 +26,7 @@ selectable_language_window:
 
 config_window:
   config_title: Settings
+  compact_mode: Compact Mode
   side_menu_labels:
     appearance: Appearance
     translation: Translation

locales/ja.yml

@@ -27,6 +27,7 @@ selectable_language_window:
 
 config_window:
   config_title: 設定
+  compact_mode: コンパクトモード
   side_menu_labels:
     appearance: デザイン
     translation: 翻訳

view.py

@@ -137,6 +137,7 @@ class View():
             VAR_ERROR_MESSAGE=StringVar(value=""),
             VAR_VERSION=StringVar(value=config.VERSION),
             VAR_CONFIG_WINDOW_TITLE=StringVar(value=i18n.t("config_window.config_title")),
+            VAR_CONFIG_WINDOW_COMPACT_MODE_LABEL=StringVar(value=i18n.t("config_window.compact_mode")),
 
 
             # Side Menu Labels

vrct_gui/_CreateDropdownMenuWindow.py

@@ -3,7 +3,7 @@ from types import SimpleNamespace
 from customtkinter import CTkToplevel, CTkFrame, CTkLabel, CTkFont, CTkScrollableFrame
 from time import sleep
 
-from .ui_utils import bindButtonReleaseFunction, bindEnterAndLeaveColor, bindButtonPressColor, getLatestWidth, getLatestHeight
+from .ui_utils import bindButtonReleaseFunction, bindEnterAndLeaveColor, bindButtonPressColor, getLatestWidth, getLatestHeight, applyUiScalingAndFixTheBugScrollBar
 from functools import partial
 
 from utils import isEven, makeEven
@@ -126,7 +126,6 @@ class _CreateDropdownMenuWindow(CTkToplevel):
             border_width=0,
         )
         self.scroll_frame_container.grid(row=0, column=0, padx=BORDER_WIDTH, pady=BORDER_WIDTH, sticky="nsew")
-        self.scroll_frame_container._scrollbar.grid_configure(padx=self.scrollbar_ipadx)
         self.scroll_frame_container.grid_columnconfigure(0, weight=1)
 
 
@@ -139,6 +138,12 @@ class _CreateDropdownMenuWindow(CTkToplevel):
 
         self._createDropdownMenuValues(dropdown_menu_widget_id, dropdown_menu_values, command)
 
+        applyUiScalingAndFixTheBugScrollBar(
+            scrollbar_widget=self.scroll_frame_container,
+            padx=self.scrollbar_ipadx,
+            width=self.scrollbar_width,
+        )
+
         geometry_width = int(self.new_width + self.scroll_frame_container._scrollbar.winfo_width() + (BORDER_WIDTH*2) + (self.scrollbar_ipadx[0] + self.scrollbar_ipadx[1]))
         geometry_height = int(self.new_height + (BORDER_WIDTH*2))
 
@@ -210,10 +215,6 @@ class _CreateDropdownMenuWindow(CTkToplevel):
         self.new_width = makeEven(self.new_width)
         self.scroll_frame_container.configure(width=self.new_width, height=self.new_height)
 
-        # This is for CustomTkinter's spec change or bug fix.
-        self.scroll_frame_container._scrollbar.configure(height=0)
-        self.scroll_frame_container._scrollbar.configure(width=self.scrollbar_width)
-
 
 
         row=0

vrct_gui/_CreateSelectableLanguagesWindow.py

@@ -1,6 +1,6 @@
 from functools import partial
 
-from .ui_utils import bindButtonReleaseFunction, bindEnterAndLeaveColor, bindButtonPressColor
+from .ui_utils import bindButtonReleaseFunction, bindEnterAndLeaveColor, bindButtonPressColor, applyUiScalingAndFixTheBugScrollBar
 from utils import callFunctionIfCallable
 
 from customtkinter import CTkToplevel, CTkFrame, CTkLabel, CTkFont, CTkScrollableFrame
@@ -124,11 +124,11 @@ class _CreateSelectableLanguagesWindow(CTkToplevel):
         self.scroll_frame_container = CTkScrollableFrame(self, corner_radius=0, fg_color=self.settings.ctm.MAIN_BG_COLOR, width=self.width_new, height=self.height_new)
         self.scroll_frame_container.grid(row=1, column=0, sticky="nsew")
 
-        self.scroll_frame_container._scrollbar.grid_configure(padx=self.settings.uism.SCROLLBAR_IPADX)
+        applyUiScalingAndFixTheBugScrollBar(
-
+            scrollbar_widget=self.scroll_frame_container,
-        # This is for CustomTkinter's spec change or bug fix.
+            padx=self.settings.uism.SCROLLBAR_IPADX,
-        self.scroll_frame_container._scrollbar.configure(height=0)
+            width=self.settings.uism.SCROLLBAR_WIDTH,
-        self.scroll_frame_container._scrollbar.configure(width=self.settings.uism.SCROLLBAR_WIDTH)
+        )
 
 
         self.container = CTkFrame(self.scroll_frame_container, corner_radius=0, fg_color=self.settings.ctm.MAIN_BG_COLOR, width=0, height=0)

vrct_gui/config_window/widgets/createSettingBoxTopBar/_createSettingBoxCompactModeButton.py

@@ -13,7 +13,7 @@ def _createSettingBoxCompactModeButton(parent_widget, config_window, settings, v
 
 
     config_window.setting_box_compact_mode_button_container = CTkFrame(parent_widget, corner_radius=0, fg_color=settings.ctm.TOP_BAR_BG_COLOR, width=0, height=0)
-    config_window.setting_box_compact_mode_button_container.grid(row=0, column=1, padx=(0, 20), sticky="nsw")
+    config_window.setting_box_compact_mode_button_container.grid(row=0, column=1, padx=settings.uism.COMPACT_MODE_PADX, sticky="nsw")
 
 
 
@@ -26,12 +26,13 @@ def _createSettingBoxCompactModeButton(parent_widget, config_window, settings, v
     config_window.setting_box_compact_mode_label = CTkLabel(
         config_window.setting_box_compact_mode_button_container,
         height=0,
-        text="Compact Mode",
+        # text="Compact Mode",
+        textvariable=view_variable.VAR_CONFIG_WINDOW_COMPACT_MODE_LABEL,
         anchor="w",
-        font=CTkFont(family=settings.FONT_FAMILY, size=12, weight="normal"),
+        font=CTkFont(family=settings.FONT_FAMILY, size=settings.uism.COMPACT_MODE_LABEL_FONT_SIZE, weight="normal"),
         text_color=settings.ctm.LABELS_TEXT_COLOR
     )
-    config_window.setting_box_compact_mode_label.grid(row=0, column=0, padx=(0,10))
+    config_window.setting_box_compact_mode_label.grid(row=0, column=0, padx=settings.uism.COMPACT_MODE_LABEL_PADX)
 
 
 
@@ -50,14 +51,14 @@ def _createSettingBoxCompactModeButton(parent_widget, config_window, settings, v
         width=0,
         # corner_radius=0,
         border_width=0,
-        switch_width=40,
+        switch_width=settings.uism.COMPACT_MODE_SWITCH_WIDTH,
-        switch_height=16,
+        switch_height=settings.uism.COMPACT_MODE_SWITCH_HEIGHT,
         onvalue=True,
         offvalue=False,
         command=switchConfigWindowCompactMode,
         # fg_color="",
         # bg_color="red",
-        progress_color=settings.ctm.SB__SWITCH_BOX_ACTIVE_BG_COLOR, # SB__SWITCH_BOX_ACTIVE_BG_COLOR is for SB. change it later.
+        progress_color=settings.ctm.COMPACT_MODE_SWITCH_BOX_ACTIVE_BG_COLOR,
     )
 
     config_window.setting_box_compact_mode_switch_box.grid(row=0, column=0)

vrct_gui/config_window/widgets/createSideMenuAndSettingsBoxContainers/_createSettingBoxContainer.py

@@ -30,7 +30,7 @@ def _createSettingBoxContainer(config_window, settings, view_variable, setting_b
     setting_box_row=0
     for i, setting_box_setting in enumerate(setting_box_container_settings["setting_boxes"]):
         # Top-Padding that can be container the section title
-        setting_box_top_padding = CTkFrame(setting_box_container_widget, corner_radius=0, fg_color=settings.ctm.MAIN_BG_COLOR, width=0, height=60)
+        setting_box_top_padding = CTkFrame(setting_box_container_widget, corner_radius=0, fg_color=settings.ctm.MAIN_BG_COLOR, width=0, height=settings.uism.SB__TOP_PADY)
         setting_box_top_padding.grid(row=setting_box_row, column=0, sticky="ew", padx=0, pady=0)
         setting_box_top_padding.grid_columnconfigure(0, weight=1)
         setting_box_row+=1

vrct_gui/config_window/widgets/createSideMenuAndSettingsBoxContainers/createSideMenuAndSettingsBoxContainers.py

@@ -1,6 +1,6 @@
 from customtkinter import CTkFrame, CTkScrollableFrame
 
-from ....ui_utils import _setDefaultActiveTab
+from ....ui_utils import _setDefaultActiveTab, applyUiScalingAndFixTheBugScrollBar
 
 from ._addConfigSideMenuItem import _addConfigSideMenuItem
 from ._createSettingBoxContainer import _createSettingBoxContainer
@@ -41,6 +41,12 @@ def createSideMenuAndSettingsBoxContainers(config_window, settings, view_variabl
     config_window.main_setting_box_scrollable_container = CTkScrollableFrame(config_window.main_bg_container, corner_radius=0, fg_color=settings.ctm.MAIN_BG_COLOR)
     config_window.main_setting_box_scrollable_container.grid(row=1, column=0, sticky="nsew")
 
+    applyUiScalingAndFixTheBugScrollBar(
+        scrollbar_widget=config_window.main_setting_box_scrollable_container,
+        padx=settings.uism.SCROLLBAR_IPADX,
+        width=settings.uism.SCROLLBAR_WIDTH,
+    )
+
 
     config_window.main_setting_box_bg_wrapper = CTkFrame(config_window.main_setting_box_scrollable_container, corner_radius=0, width=0, height=0, fg_color=settings.ctm.MAIN_BG_COLOR)
     config_window.main_setting_box_bg_wrapper.grid(row=0, column=0, pady=settings.uism.SB__BOTTOM_MARGIN, sticky="n")

vrct_gui/config_window/widgets/createSideMenuAndSettingsBoxContainers/setting_box_containers/_SettingBoxGenerator.py

@@ -21,7 +21,7 @@ class _SettingBoxGenerator():
         setting_box_frame = CTkFrame(self.parent_widget, corner_radius=0, fg_color=self.settings.ctm.SB__BG_COLOR, width=0, height=0)
 
         # "pady=(0,1)" is for bottom padding. It can be removed(override) when you do like "self.attr_name.grid(row=row, pady=0)"
-        setting_box_frame.grid(column=0, padx=0, pady=(0,1), sticky="ew")
+        setting_box_frame.grid(column=0, padx=0, pady=self.settings.uism.SB__FAKE_BOTTOM_BORDER_SIZE, sticky="ew")
         setting_box_frame.grid_columnconfigure(0, weight=1)
 
 
@@ -54,7 +54,7 @@ class _SettingBoxGenerator():
             setting_box_labels_frame,
             textvariable=for_var_label_text,
             anchor="w",
-            # height=0,
+            height=0,
             font=CTkFont(family=self.settings.FONT_FAMILY, size=self.settings.uism.SB__LABEL_FONT_SIZE, weight="normal"),
             text_color=self.settings.ctm.LABELS_TEXT_COLOR
         )
@@ -66,7 +66,7 @@ class _SettingBoxGenerator():
                 textvariable=for_var_desc_text,
                 anchor="w",
                 justify="left",
-                # height=0,
+                height=0,
                 wraplength=int(self.settings.uism.MAIN_AREA_MIN_WIDTH / 2),
                 font=CTkFont(family=self.settings.FONT_FAMILY, size=self.settings.uism.SB__DESC_FONT_SIZE, weight="normal"),
                 text_color=self.settings.ctm.LABELS_DESC_TEXT_COLOR
@@ -88,9 +88,9 @@ class _SettingBoxGenerator():
             optionmenu_bg_color=self.settings.ctm.SB__OPTIONMENU_BG_COLOR,
             optionmenu_hovered_bg_color=self.settings.ctm.SB__OPTIONMENU_HOVERED_BG_COLOR,
             optionmenu_clicked_bg_color=self.settings.ctm.SB__OPTIONMENU_CLICKED_BG_COLOR,
-            optionmenu_ipadx=(8,8),
+            optionmenu_ipadx=self.settings.uism.SB__OPTIONMENU_IPADX,
-            optionmenu_ipady=2,
+            optionmenu_ipady=self.settings.uism.SB__OPTIONMENU_IPADY,
-            optionmenu_ipady_between_img=8,
+            optionmenu_padx_between_img=self.settings.uism.SB__OPTIONMENU_IPADX_BETWEEN_IMG,
             optionmenu_min_height=self.settings.uism.SB__OPTIONMENU_MIN_HEIGHT,
             optionmenu_min_width=self.settings.uism.SB__OPTIONMENU_MIN_WIDTH,
             variable=variable,
@@ -98,7 +98,7 @@ class _SettingBoxGenerator():
             font_size=self.settings.uism.SB__OPTION_MENU_FONT_SIZE,
             text_color=self.settings.ctm.LABELS_TEXT_COLOR,
             image_file=self.settings.image_file.ARROW_LEFT.rotate(90),
-            image_size=(14,14),
+            image_size=self.settings.uism.SB__OPTIONMENU_IMG_SIZE,
             optionmenu_clicked_command=lambda _e: self.dropdown_menu_window.show(
                 dropdown_menu_widget_id=optionmenu_attr_name,
             ),
@@ -187,8 +187,12 @@ class _SettingBoxGenerator():
     def createSettingBoxSlider(self, for_var_label_text, for_var_desc_text, slider_attr_name, slider_range, command, variable, slider_number_of_steps: Union[int, None] = None):
         (setting_box_frame, setting_box_item_frame) = self._createSettingBoxFrame(for_var_label_text, for_var_desc_text)
 
+        # print(self.settings.uism.SB__SLIDER_WIDTH)
+        # print(self.settings.uism.SB__SLIDER_HEIGHT)
         slider_widget = CTkSlider(
             setting_box_item_frame,
+            width=self.settings.uism.SB__SLIDER_WIDTH,
+            height=self.settings.uism.SB__SLIDER_HEIGHT,
             from_=slider_range[0],
             to=slider_range[1],
             number_of_steps=slider_number_of_steps,

vrct_gui/ui_managers/ColorThemeManager.py

@@ -223,6 +223,8 @@ class ColorThemeManager():
 
         # Top bar
         self.config_window.TOP_BAR_BG_COLOR = self.DARK_850_COLOR
+        # Compact Mode
+        self.config_window.COMPACT_MODE_SWITCH_BOX_ACTIVE_BG_COLOR = self.main.SF__SWITCH_BOX_ACTIVE_BG_COLOR
 
 
         # Main

vrct_gui/ui_managers/UiScalingManager.py

@@ -4,6 +4,7 @@ class UiScalingManager():
     def __init__(self, scaling_percentage):
         scaling_float = int(scaling_percentage.replace("%", "")) / 100
         self.SCALING_FLOAT = max(scaling_float, 0.4)
+        self.common = SimpleNamespace()
         self.main = SimpleNamespace()
         self.config_window = SimpleNamespace()
         self.selectable_language_window = SimpleNamespace()
@@ -17,6 +18,9 @@ class UiScalingManager():
     def _calculatedUiSizes(self):
         # Common
         # RESPONSIVE_UI_SIZE_INT_10 ... RESPONSIVE_UI_SIZE_INT_300
+        self.common.SCROLLBAR_IPADX = (self._calculateUiSize(2), self._calculateUiSize(2))
+        self.common.SCROLLBAR_WIDTH = self._calculateUiSize(16)
+
         for i in range(10, 301, 10):
             setattr(self.main, f"RESPONSIVE_UI_SIZE_INT_{i}", self._calculateUiSize(i))
             setattr(self.config_window, f"RESPONSIVE_UI_SIZE_INT_{i}", self._calculateUiSize(i))
@@ -121,8 +125,8 @@ class UiScalingManager():
 
         # Selectable Language Window
         self.selectable_language_window.TOP_BAR_MIN_HEIGHT = self._calculateUiSize(50)
-        self.selectable_language_window.SCROLLBAR_IPADX = (self._calculateUiSize(2), self._calculateUiSize(2))
+        self.selectable_language_window.SCROLLBAR_IPADX = self.common.SCROLLBAR_IPADX
-        self.selectable_language_window.SCROLLBAR_WIDTH = self._calculateUiSize(16)
+        self.selectable_language_window.SCROLLBAR_WIDTH = self.common.SCROLLBAR_WIDTH
 
         self.selectable_language_window.GO_BACK_BUTTON_LABEL_FONT_SIZE = self._calculateUiSize(14)
         self.selectable_language_window.GO_BACK_BUTTON_IPADX = self._calculateUiSize(10)
@@ -151,25 +155,34 @@ class UiScalingManager():
         self.config_window.TOP_BAR_SIDE__CONFIG_TITLE_LEFT_PADX = int(self.config_window.TOP_BAR_SIDE__CONFIG_TITLE_FONT_SIZE + self._calculateUiSize(16))
         self.config_window.TOP_BAR_SIDE__TITLE_PADX= self._calculateUiSize(30)
 
+        # Compact Mode
+        self.config_window.COMPACT_MODE_PADX = (0, self._calculateUiSize(20))
+        self.config_window.COMPACT_MODE_LABEL_FONT_SIZE = self._calculateUiSize(12)
+        self.config_window.COMPACT_MODE_LABEL_PADX = (0, self._calculateUiSize(10))
+        self.config_window.COMPACT_MODE_SWITCH_WIDTH = self._calculateUiSize(40)
+        self.config_window.COMPACT_MODE_SWITCH_HEIGHT = self._calculateUiSize(16)
+
+
         # Side menu
-        self.config_window.SIDE_MENU_TOP_PADY= self._calculateUiSize(54)
+        self.config_window.SIDE_MENU_TOP_PADY = self._calculateUiSize(54)
         self.config_window.SIDE_MENU_LABELS_IPADX = self._calculateUiSize(20)
-        self.config_window.SIDE_MENU_LABELS_IPADY= self._calculateUiSize(8)
+        self.config_window.SIDE_MENU_LABELS_IPADY = self._calculateUiSize(8)
-        self.config_window.SIDE_MENU_LABELS_FONT_SIZE= self._calculateUiSize(18)
+        self.config_window.SIDE_MENU_LABELS_FONT_SIZE = self._calculateUiSize(18)
 
 
         # Top bar Main
         self.config_window.TOP_BAR_MAIN__TITLE_FONT_SIZE = self._calculateUiSize(22)
+        self.config_window.SCROLLBAR_IPADX = self.common.SCROLLBAR_IPADX
+        self.config_window.SCROLLBAR_WIDTH = self.common.SCROLLBAR_WIDTH
 
 
         # Setting Box
         self.config_window.MAIN_AREA_MIN_WIDTH = self._calculateUiSize(720)
-        self.config_window.SB__TOP_PADY_IF_WITH_SECTION_TITLE = (self._calculateUiSize(24))
+        self.config_window.SB__TOP_PADY = (self._calculateUiSize(60))
-        self.config_window.SB__TOP_PADY_IF_WITHOUT_SECTION_TITLE = (self._calculateUiSize(64))
-        self.config_window.SB__BOTTOM_PADY = (self._calculateUiSize(40))
         self.config_window.SB__IPADX = self._calculateUiSize(20)
         self.config_window.SB__IPADY = self._calculateUiSize(12)
         self.config_window.SB__BOTTOM_MARGIN = (0, self._calculateUiSize(60))
+        self.config_window.SB__FAKE_BOTTOM_BORDER_SIZE = (0, self._calculateUiSize(1, is_allowed_odd=True))
 
         self.config_window.SB__SECTION_TITLE_FONT_SIZE = self._calculateUiSize(20)
         self.config_window.SB__SECTION_TITLE_BOTTOM_PADY = (0, self._calculateUiSize(10))
@@ -193,12 +206,16 @@ class UiScalingManager():
         self.config_window.SB__OPTION_MENU_FONT_SIZE = self.config_window.SB__SELECTOR_FONT_SIZE
         self.config_window.SB__OPTIONMENU_MIN_HEIGHT = self._calculateUiSize(30)
         self.config_window.SB__OPTIONMENU_MIN_WIDTH = self._calculateUiSize(200)
+        self.config_window.SB__OPTIONMENU_IPADX = (self._calculateUiSize(8), self._calculateUiSize(8))
+        self.config_window.SB__OPTIONMENU_IPADY = self._calculateUiSize(2)
+        self.config_window.SB__OPTIONMENU_IPADX_BETWEEN_IMG = self._calculateUiSize(80)
+        self.config_window.SB__OPTIONMENU_IMG_SIZE = (self._calculateUiSize(14), self._calculateUiSize(14))
 
         self.config_window.SB__DROPDOWN_MENU_WINDOW_ADDITIONAL_Y_POS = self._calculateUiSize(4)
         self.config_window.SB__DROPDOWN_MENU_WIDTH = self.config_window.SB__OPTIONMENU_MIN_WIDTH
         self.config_window.SB__DROPDOWN_MENU_WINDOW_BORDER_WIDTH = self._calculateUiSize(1, is_allowed_odd=True)
-        self.config_window.SB__DROPDOWN_MENU_SCROLLBAR_IPADX = (self._calculateUiSize(2), self._calculateUiSize(2))
+        self.config_window.SB__DROPDOWN_MENU_SCROLLBAR_IPADX = self.common.SCROLLBAR_IPADX
-        self.config_window.SB__DROPDOWN_MENU_SCROLLBAR_WIDTH = self._calculateUiSize(16)
+        self.config_window.SB__DROPDOWN_MENU_SCROLLBAR_WIDTH = self.common.SCROLLBAR_WIDTH
         self.config_window.SB__DROPDOWN_MENU_VALUE_IPADX = (self._calculateUiSize(8), 0)
         self.config_window.SB__DROPDOWN_MENU_VALUE_IPADY = (self._calculateUiSize(6), self._calculateUiSize(6))
         self.config_window.SB__DROPDOWN_MENU_VALUE_PADY = (0, self._calculateUiSize(1, is_allowed_odd=True))
@@ -217,6 +234,8 @@ class UiScalingManager():
         self.config_window.SB__ENTRY_FONT_SIZE = self.config_window.SB__SELECTOR_FONT_SIZE
         self.config_window.SB__ENTRY_HEIGHT = self._calculateUiSize(30)
 
+        self.config_window.SB__SLIDER_WIDTH = self._calculateUiSize(200)
+        self.config_window.SB__SLIDER_HEIGHT = self._calculateUiSize(16)
 
         self.config_window.SB__PROGRESSBAR_X_SLIDER__ENTRY_WIDTH = self.config_window.RESPONSIVE_UI_SIZE_INT_50
         self.config_window.SB__PROGRESSBAR_X_SLIDER__ENTRY_HEIGHT = self.config_window.SB__ENTRY_HEIGHT

vrct_gui/ui_utils/ui_utils.py

@@ -142,7 +142,7 @@ def createButtonWithImage(parent_widget, button_fg_color, button_enter_color, bu
         return button_wrapper
 
 
-def createOptionMenuBox(parent_widget, optionmenu_bg_color, optionmenu_hovered_bg_color, optionmenu_clicked_bg_color, optionmenu_ipadx, optionmenu_ipady, variable, font_family, font_size, text_color, image_file, image_size, optionmenu_clicked_command, optionmenu_position=None, optionmenu_ipady_between_img=0, optionmenu_min_height=None, optionmenu_min_width=None, setattr_widget=None, image_widget_attr_name=None):
+def createOptionMenuBox(parent_widget, optionmenu_bg_color, optionmenu_hovered_bg_color, optionmenu_clicked_bg_color, optionmenu_ipadx, optionmenu_ipady, variable, font_family, font_size, text_color, image_file, image_size, optionmenu_clicked_command, optionmenu_position=None, optionmenu_padx_between_img=0, optionmenu_min_height=None, optionmenu_min_width=None, setattr_widget=None, image_widget_attr_name=None):
 
     option_menu_box = CTkFrame(parent_widget, corner_radius=6, fg_color=optionmenu_bg_color, cursor="hand2")
 
@@ -167,7 +167,7 @@ def createOptionMenuBox(parent_widget, optionmenu_bg_color, optionmenu_hovered_b
         font=CTkFont(family=font_family, size=font_size, weight="normal"),
         text_color=text_color
     )
-    optionmenu_label_widget.grid(row=0, column=LABEL_COLUMN, padx=(0, optionmenu_ipady_between_img))
+    optionmenu_label_widget.grid(row=0, column=LABEL_COLUMN, padx=(0, optionmenu_padx_between_img))
 
 
     optionmenu_img_widget = CTkLabel(
@@ -191,4 +191,12 @@ def createOptionMenuBox(parent_widget, optionmenu_bg_color, optionmenu_hovered_b
 
     bindButtonReleaseFunction([optionmenu_label_wrapper, option_menu_box, optionmenu_label_widget, optionmenu_img_widget], optionmenu_clicked_command)
 
-    return option_menu_box
+    return option_menu_box
+
+
+def applyUiScalingAndFixTheBugScrollBar(scrollbar_widget, padx, width):
+    scrollbar_widget._scrollbar.grid_configure(padx=padx)
+
+    # This is for CustomTkinter's spec change or bug fix.
+    scrollbar_widget._scrollbar.configure(height=0)
+    scrollbar_widget._scrollbar.configure(width=width)