feat: enhance tracking select component styles and dropdown behavior

apps/admin-web/src/views/TrackingView.vue

@@ -938,7 +938,9 @@ function disableTrackingDate(current: dayjs.Dayjs): boolean {
             <a-select
               v-model:value="selectedQuestionSetOptionValue"
               show-search
-              class="tracking-select"
+              class="tracking-select tracking-keyword-select"
+              popup-class-name="tracking-keyword-select-dropdown"
+              :dropdown-match-select-width="false"
               :filter-option="false"
               :loading="questionList.loading.value"
               :not-found-content="
@@ -1508,6 +1510,10 @@ function disableTrackingDate(current: dayjs.Dayjs): boolean {
   min-width: 180px;
 }
 
+.tracking-keyword-select {
+  width: 280px;
+}
+
 .tracking-date-picker {
   min-width: 168px;
 }
@@ -2461,6 +2467,19 @@ function disableTrackingDate(current: dayjs.Dayjs): boolean {
 }
 
 @media (max-width: 640px) {
+  .tracking-actions-wrap,
+  .tracking-action-item,
+  .tracking-select,
+  .tracking-keyword-select,
+  .tracking-date-picker {
+    width: 100%;
+  }
+
+  .tracking-action-item {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
   .tracking-panel__header--list {
     flex-direction: column;
   }
@@ -2526,3 +2545,26 @@ function disableTrackingDate(current: dayjs.Dayjs): boolean {
   }
 }
 </style>
+
+<style>
+.tracking-keyword-select-dropdown {
+  width: min(360px, calc(100vw - 32px)) !important;
+  min-width: min(320px, calc(100vw - 32px)) !important;
+  max-width: calc(100vw - 32px);
+}
+
+.tracking-keyword-select-dropdown .ant-select-item-option-content {
+  white-space: normal;
+  overflow: visible;
+  text-overflow: clip;
+  line-height: 1.45;
+  word-break: break-word;
+}
+
+.tracking-keyword-select-dropdown .ant-select-item {
+  min-height: 40px;
+  align-items: flex-start;
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+</style>