From 263b8240d30fc2d779053b16e7f8b9c5facd8997 Mon Sep 17 00:00:00 2001
From: Fayaz Ahmed <15716057+fayazara@users.noreply.github.com>
Date: Fri, 24 Jun 2022 23:12:53 +0530
Subject: [PATCH] fix: Add a fix for minor UI / a11y issues (#4905)

---
 .../dashboard/assets/scss/_typography.scss          |  1 +
 app/javascript/dashboard/components/ModalHeader.vue |  7 ++++++-
 .../dashboard/components/layout/Sidebar.vue         |  1 +
 .../layout/sidebarComponents/AccountContext.vue     |  2 +-
 .../sidebarComponents/SecondaryChildNavItem.vue     |  1 +
 .../components/widgets/conversation/Message.vue     |  3 +--
 .../conversationBulkActions/LabelActions.vue        |  1 +
 .../components/widgets/modal/DeleteModal.vue        |  4 ++--
 app/javascript/dashboard/i18n/locale/en/report.json |  1 +
 .../routes/dashboard/conversation/ContactPanel.vue  |  1 +
 .../routes/dashboard/settings/labels/Index.vue      | 13 +++++++++++--
 .../settings/reports/components/ReportFilters.vue   | 11 +++++++----
 .../components/ui/label/LabelDropdownItem.vue       |  1 +
 13 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/app/javascript/dashboard/assets/scss/_typography.scss b/app/javascript/dashboard/assets/scss/_typography.scss
index abab48564..7db0f2a46 100644
--- a/app/javascript/dashboard/assets/scss/_typography.scss
+++ b/app/javascript/dashboard/assets/scss/_typography.scss
@@ -4,6 +4,7 @@
 
 .page-sub-title {
   font-size: $font-size-large;
+  word-wrap: break-word;
 }
 
 .block-title {
diff --git a/app/javascript/dashboard/components/ModalHeader.vue b/app/javascript/dashboard/components/ModalHeader.vue
index e0ce5f993..0f8d8931c 100644
--- a/app/javascript/dashboard/components/ModalHeader.vue
+++ b/app/javascript/dashboard/components/ModalHeader.vue
@@ -4,7 +4,7 @@
     <h2 class="page-sub-title">
       {{ headerTitle }}
     </h2>
-    <p v-if="headerContent" class="small-12 column">
+    <p v-if="headerContent" class="small-12 column wrap-content">
       {{ headerContent }}
     </p>
     <slot />
@@ -29,3 +29,8 @@ export default {
   },
 };
 </script>
+<style scoped lang="scss">
+.wrap-content {
+  word-wrap: break-word;
+}
+</style>
diff --git a/app/javascript/dashboard/components/layout/Sidebar.vue b/app/javascript/dashboard/components/layout/Sidebar.vue
index 5017b3d4b..87100e4b4 100644
--- a/app/javascript/dashboard/components/layout/Sidebar.vue
+++ b/app/javascript/dashboard/components/layout/Sidebar.vue
@@ -191,6 +191,7 @@ export default {
   display: flex;
   min-height: 0;
   height: 100%;
+  width: fit-content;
 }
 </style>
 
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/AccountContext.vue b/app/javascript/dashboard/components/layout/sidebarComponents/AccountContext.vue
index 71382d5e6..60b85cb22 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/AccountContext.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/AccountContext.vue
@@ -83,7 +83,7 @@ export default {
   border-bottom-right-radius: var(--border-radius-normal);
   display: flex;
   height: 100%;
-  justify-content: end;
+  justify-content: flex-end;
   opacity: 1;
   position: absolute;
   right: 0;
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue
index 4d2601774..812871ad7 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue
@@ -146,6 +146,7 @@ $label-badge-size: var(--space-slab);
   height: $label-badge-size;
   min-width: $label-badge-size;
   margin-left: var(--space-smaller);
+  border: 1px solid var(--color-border-light);
 }
 
 .badge.secondary {
diff --git a/app/javascript/dashboard/components/widgets/conversation/Message.vue b/app/javascript/dashboard/components/widgets/conversation/Message.vue
index db37e7558..708fba2cc 100644
--- a/app/javascript/dashboard/components/widgets/conversation/Message.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/Message.vue
@@ -66,7 +66,7 @@
       <spinner v-if="isPending" size="tiny" />
       <div
         v-if="showAvatar"
-        v-tooltip.top="tooltipForSender"
+        v-tooltip.left="tooltipForSender"
         class="sender--info"
       >
         <woot-thumbnail
@@ -313,7 +313,6 @@ export default {
       return showTooltip
         ? {
             content: `${this.$t('CONVERSATION.SENT_BY')} ${name}`,
-            classes: 'top',
           }
         : false;
     },
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue
index 8746a8653..b4043e5ce 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue
@@ -258,6 +258,7 @@ ul {
       height: var(--space-slab);
       width: var(--space-slab);
       flex-shrink: 0;
+      border: 1px solid var(--color-border-light);
     }
   }
 }
diff --git a/app/javascript/dashboard/components/widgets/modal/DeleteModal.vue b/app/javascript/dashboard/components/widgets/modal/DeleteModal.vue
index b4d9f65f3..f08ebcadc 100644
--- a/app/javascript/dashboard/components/widgets/modal/DeleteModal.vue
+++ b/app/javascript/dashboard/components/widgets/modal/DeleteModal.vue
@@ -2,10 +2,10 @@
   <modal :show.sync="show" :on-close="onClose">
     <woot-modal-header :header-title="title" :header-content="message" />
     <div class="modal-footer delete-item">
-      <button class="alert button nice" @click="onConfirm">
+      <button class="alert button nice text-truncate" @click="onConfirm">
         {{ confirmText }}
       </button>
-      <button class="button clear" @click="onClose">
+      <button class="button clear text-truncate" @click="onClose">
         {{ rejectText }}
       </button>
     </div>
diff --git a/app/javascript/dashboard/i18n/locale/en/report.json b/app/javascript/dashboard/i18n/locale/en/report.json
index 5f2c6ae48..1dbd24efd 100644
--- a/app/javascript/dashboard/i18n/locale/en/report.json
+++ b/app/javascript/dashboard/i18n/locale/en/report.json
@@ -65,6 +65,7 @@
       "PLACEHOLDER": "Select date range"
     },
     "GROUP_BY_FILTER_DROPDOWN_LABEL": "Group By",
+    "DURATION_FILTER_LABEL": "Duration",
     "GROUP_BY_DAY_OPTIONS": [{ "id": 1, "groupBy": "Day" }],
     "GROUP_BY_WEEK_OPTIONS": [
       { "id": 1, "groupBy": "Day" },
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
index d7318ce56..4405ed2ad 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
+++ b/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"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue
index 66f763524..9777511bf 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue
+++ b/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>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportFilters.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportFilters.vue
index d1f729132..10e1e0495 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportFilters.vue
+++ b/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
diff --git a/app/javascript/shared/components/ui/label/LabelDropdownItem.vue b/app/javascript/shared/components/ui/label/LabelDropdownItem.vue
index 68f2528e5..2384964b5 100644
--- a/app/javascript/shared/components/ui/label/LabelDropdownItem.vue
+++ b/app/javascript/shared/components/ui/label/LabelDropdownItem.vue
@@ -94,6 +94,7 @@ export default {
     margin-top: var(--space-micro);
     min-width: var(--space-slab);
     width: var(--space-slab);
+    border: 1px solid var(--color-border-light);
   }
 }
 </style>