diff --git a/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/ComponentColorSelector.vue b/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/ComponentColorSelector.vue
index daedbd2a3c..3773dd1568 100644
--- a/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/ComponentColorSelector.vue
+++ b/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/ComponentColorSelector.vue
@@ -320,9 +320,9 @@
             </el-col>
             <el-col :span="12">
               <el-form-item :label="t('components.pager_color')" class="form-item">
-                <div style="display: flex; width: 100%; gap: 8px">
+                <div style="display: flex; width: 100%; gap: 4px">
                   <el-color-picker
-                    :trigger-width="60"
+                    :trigger-width="53"
                     v-model="seniorForm.pagerColor"
                     size="small"
                     :predefine="predefineColors"