fix: Broken styles (#9046)

app/javascript/dashboard/assets/scss/widgets/_base.scss

@@ -29,6 +29,12 @@ hr {
   @apply clear-both max-w-full h-0 my-5 mx-0 border-slate-300 dark:border-slate-600;
 }
 
+ul,
+ol,
+dl {
+  @apply mb-2 list-disc list-outside leading-[1.65];
+}
+
 // Form elements
 label {
   @apply text-slate-800 dark:text-slate-200 block m-0 leading-7 text-sm font-medium;

app/javascript/dashboard/assets/scss/widgets/_tabs.scss

@@ -7,7 +7,7 @@
 }
 
 .tabs {
-  @apply border-r-0 border-l-0 border-t-0 flex min-w-[6.25rem] py-0 px-4;
+  @apply border-r-0 border-l-0 border-t-0 flex min-w-[6.25rem] py-0 px-4 list-none mb-0;
 }
 
 .tabs--with-scroll {

app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue

@@ -2,7 +2,8 @@
   <div
     class="relative flex items-start flex-grow-0 flex-shrink-0 w-auto max-w-full px-4 py-0 border-t-0 border-b-0 border-l-2 border-r-0 border-transparent border-solid cursor-pointer conversation hover:bg-slate-25 dark:hover:bg-slate-800 group"
     :class="{
-      'active bg-slate-25 dark:bg-slate-800 border-woot-500': isActiveChat,
+      'animate-card-select bg-slate-25 dark:bg-slate-800 border-woot-500':
+        isActiveChat,
       'unread-chat': hasUnread,
       'has-inbox-name': showInboxName,
       'conversation-selected': selected,

app/javascript/dashboard/components/widgets/mentions/MentionBox.vue

@@ -12,7 +12,7 @@
         @mouseover="onHover(index)"
       >
         <button
-          class="flex group flex-col gap-0.5 overflow-hidden cursor-pointer items-start py-2.5 px-2.5 justify-center w-full h-full text-left hover:bg-woot-50 dark:hover:bg-woot-800 border-b border-solid border-slate-100 dark:border-slate-700"
+          class="flex group flex-col gap-0.5 overflow-hidden cursor-pointer items-start rounded-none py-2.5 px-2.5 justify-center w-full h-full text-left hover:bg-woot-50 dark:hover:bg-woot-800 border-x-0 border-t-0 border-b border-solid border-slate-100 dark:border-slate-700"
           :class="{
             ' bg-woot-25 dark:bg-woot-800': index === selectedIndex,
           }"

app/javascript/dashboard/routes/dashboard/inbox/components/MenuItem.vue

@@ -1,6 +1,4 @@
 <script setup>
-import { defineProps, defineEmits } from 'vue';
-
 defineProps({
   label: {
     type: String,

tailwind.config.js

@@ -143,11 +143,20 @@ module.exports = {
         '50%': { opacity: 1 },
         '100%': { opacity: 0.4 },
       },
+      'card-select': {
+        '0%, 100%': {
+          transform: 'translateX(0)',
+        },
+        '50%': {
+          transform: 'translateX(1px)',
+        },
+      },
     },
     animation: {
       ...defaultTheme.animation,
       wiggle: 'wiggle 0.5s ease-in-out',
       'loader-pulse': 'loader-pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+      'card-select': 'card-select 0.25s ease-in-out',
     },
   },
   plugins: [