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

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>

app/javascript/dashboard/components/layout/Sidebar.vue

@@ -191,6 +191,7 @@ export default {
   display: flex;
   min-height: 0;
   height: 100%;
+  width: fit-content;
 }
 </style>
 

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;

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 {

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;
     },

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);
     }
   }
 }

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>