fix: Add a fix for minor UI / a11y issues (#4905)

app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue

@@ -9,6 +9,7 @@
     <draggable
       :list="conversationSidebarItems"
       :disabled="!dragEnabled"
+      animation="200"
       class="list-group"
       ghost-class="ghost"
       handle=".drag-handle"

app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue

@@ -9,7 +9,7 @@
       {{ $t('LABEL_MGMT.HEADER_BTN_TXT') }}
     </woot-button>
     <div class="row">
-      <div class="small-8 columns with-right-space ">
+      <div class="small-8 columns with-right-space">
         <p
           v-if="!uiFlags.isFetching && !records.length"
           class="no-items-error-message"
@@ -31,7 +31,9 @@
           </thead>
           <tbody>
             <tr v-for="(label, index) in records" :key="label.title">
-              <td>{{ label.title }}</td>
+              <td class="label-title">
+                <span class="text-truncate">{{ label.title }}</span>
+              </td>
               <td>{{ label.description }}</td>
               <td>
                 <div class="label-color--container">
@@ -201,5 +203,12 @@ export default {
   height: $space-normal;
   margin-right: $space-smaller;
   width: $space-normal;
+  border: 1px solid var(--color-border-light);
+}
+.label-title {
+  span {
+    width: var(--space-giga);
+    display: inline-block;
+  }
 }
 </style>

app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportFilters.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex-container flex-dir-column medium-flex-dir-row">
     <div v-if="type === 'agent'" class="small-12 medium-3 pull-right">
-      <p aria-hidden="true" class="hide">
+      <p>
         {{ $t('AGENT_REPORTS.FILTER_DROPDOWN_LABEL') }}
       </p>
       <multiselect
@@ -43,7 +43,7 @@
       </multiselect>
     </div>
     <div v-else-if="type === 'label'" class="small-12 medium-3 pull-right">
-      <p aria-hidden="true" class="hide">
+      <p>
         {{ $t('LABEL_REPORTS.FILTER_DROPDOWN_LABEL') }}
       </p>
       <multiselect
@@ -89,7 +89,7 @@
       </multiselect>
     </div>
     <div v-else class="small-12 medium-3 pull-right">
-      <p aria-hidden="true" class="hide">
+      <p>
         {{ $t('INBOX_REPORTS.FILTER_DROPDOWN_LABEL') }}
       </p>
       <multiselect
@@ -107,6 +107,9 @@
       />
     </div>
     <div class="small-12 medium-3 pull-right margin-left-small">
+      <p>
+        {{ $t('REPORT.DURATION_FILTER_LABEL') }}
+      </p>
       <multiselect
         v-model="currentDateRangeSelection"
         track-by="name"
@@ -133,7 +136,7 @@
       v-if="notLast7Days"
       class="small-12 medium-3 pull-right margin-left-small"
     >
-      <p aria-hidden="true" class="hide">
+      <p>
         {{ $t('REPORT.GROUP_BY_FILTER_DROPDOWN_LABEL') }}
       </p>
       <multiselect