feat: Remove Foundation in favor of Tailwind (#8984)

* feat: Remove foundation * chore: Minor fix * Minor fix * Update _forms.scss * chore: More changes * chore: Minor fix * chore: Clean up * fix: font-weight * chore: More changes * chore: Setting page * chore: Editor fix * chore: Reports page * chore: More changes * chore: Minor changes * chore: More fixes * chore: More changes * chore: More changes * chore: More changes * chore: Minor fix * chore: More changes * chore: More changes * chore: More changes * chore: More changes * chore: Clean up * chore: Minor fix * chore: Clean ups * chore: Rename basic file * chore: Remove unused files * chore: Fix expanded input * Fix campaign rendering * chore: Clean up * chore: More changes * chore: Remove unused files * fix: Overflow issue * chore: Minor fix * chore: Clean up * chore: Minor fix * chore: Remove unused files * chore: Minor fix * chore: Minor fix * fix: autoprefixer start/end value has mixed support * chore: Minor fix * chore: Remove unused files * chore: Minor fix * chore: Minor fix * chore: Minor fix * Add responsive design to label settings * fix inbox view * chore: Minor fix * w-60% to w-2/3 * chore: Fix team * chore: Fix button * w-[34%] to w-1/3 * chore: Fix border * Add support mobile views in team page * chore: fix snackbar * chore: clean up * chore: Clean up * fix: loading state alignment * fix: alert styles * chore: Minor fix * fix: spacing for agent bot row * fix: layout * fix: layout for SLA * fix: checkbox * fix: SLA checkbox spacing * Update inbox settings pages * fix macros listing page layout * fix canned responses * chore: Fix bot page * chore: fix automation page * chore: fix agents page * chore: fix canned response editor * chore: Fix settings table * chore: fix settings layout * chore: Minor fix * fix: canned response table layou * fix: layout for table header for webhooks * fix: webhook row layout * fix: dashboard app modal layout * fix: add title to canned response truncated shortcode * fix: dashboard apps row layuot * fix: layouts hooks * fix: body color * fix: delete action color in portal locales * fix: text color for campagin title * fix: success button color --------- Co-authored-by: Pranav <pranav@chatwoot.com> Co-authored-by: Vishnu Narayanan <iamwishnu@gmail.com> Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
2025-11-02 03:57:52 +00:00 · 2024-02-28 13:56:28 +05:30
parent 9f905ce2e6
commit dafedddc1a
219 changed files with 1134 additions and 2511 deletions
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
@@ -25,13 +25,12 @@
      v-if="bulkActionCheck"
      :src="currentContact.thumbnail"
      :badge="inboxBadge"
-      class="columns"
      :username="currentContact.name"
      :status="currentContact.availability_status"
      size="40px"
    />
    <div
-      class="px-0 py-3 border-b group-hover:border-transparent border-slate-50 dark:border-slate-800/75 columns"
+      class="px-0 py-3 border-b group-hover:border-transparent flex-1 border-slate-50 dark:border-slate-800/75 w-[calc(100%-40px)]"
    >
      <div class="flex justify-between">
        <inbox-name v-if="showInboxName" :inbox="inbox" />
@@ -51,7 +50,7 @@
        </div>
      </div>
      <h4
-        class="conversation--user text-sm my-0 mx-2 capitalize pt-0.5 text-ellipsis overflow-hidden whitespace-nowrap w-[60%] text-slate-900 dark:text-slate-100"
+        class="conversation--user text-sm my-0 mx-2 capitalize pt-0.5 text-ellipsis font-medium overflow-hidden whitespace-nowrap w-[calc(100%-70px)] text-slate-900 dark:text-slate-100"
      >
        {{ currentContact.name }}
      </h4>
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
@@ -5,9 +5,7 @@
    <div
      class="flex-1 w-full min-w-0 flex flex-col md:flex-row items-center justify-center"
    >
-      <div
-        class="flex justify-start items-center mr-4 rtl:mr-0 rtl:ml-4 min-w-0 w-[inherit]"
-      >
+      <div class="flex justify-start items-center min-w-0 w-fit max-w-full">
        <back-button
          v-if="showBackButton"
          :back-url="backButtonUrl"
@@ -20,9 +18,11 @@
          :status="currentContact.availability_status"
        />
        <div
-          class="items-start flex flex-col ml-2 rtl:ml-0 rtl:mr-2 min-w-0 w-[inherit] overflow-hidden"
+          class="items-start flex flex-col ml-2 rtl:ml-0 rtl:mr-2 min-w-0 w-fit overflow-hidden"
        >
-          <div class="flex items-center flex-row gap-1 m-0 p-0 w-[inherit]">
+          <div
+            class="flex items-center flex-row gap-1 m-0 p-0 w-fit max-w-full"
+          >
            <woot-button
              variant="link"
              color-scheme="secondary"
@@ -30,7 +30,7 @@
              @click.prevent="$emit('contact-panel-toggle')"
            >
              <span
-                class="text-base leading-tight text-slate-900 dark:text-slate-100"
+                class="text-base leading-tight font-medium text-slate-900 dark:text-slate-100"
              >
                {{ currentContact.name }}
              </span>
@@ -66,7 +66,7 @@
        </div>
      </div>
      <div
-        class="header-actions-wrap items-center flex flex-row flex-grow justify-end mt-3 lg:mt-0 rtl:relative rtl:left-6"
+        class="header-actions-wrap items-center flex flex-row flex-grow justify-end mt-3 lg:mt-0"
        :class="{ 'justify-end': isContactPanelOpen }"
      >
        <more-actions :conversation-id="currentChat.id" />
--- a/app/javascript/dashboard/components/widgets/conversation/EmailTranscriptModal.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/EmailTranscriptModal.vue
@@ -8,7 +8,10 @@
      />
      <form class="w-full" @submit.prevent="onSubmit">
        <div class="w-full">
-          <div v-if="currentChat.meta.sender && currentChat.meta.sender.email">
+          <div
+            v-if="currentChat.meta.sender && currentChat.meta.sender.email"
+            class="flex items-center gap-2"
+          >
            <input
              id="contact"
              v-model="selectedType"
@@ -20,7 +23,7 @@
              $t('EMAIL_TRANSCRIPT.FORM.SEND_TO_CONTACT')
            }}</label>
          </div>
-          <div v-if="currentChat.meta.assignee">
+          <div v-if="currentChat.meta.assignee" class="flex items-center gap-2">
            <input
              id="assignee"
              v-model="selectedType"
@@ -32,7 +35,7 @@
              $t('EMAIL_TRANSCRIPT.FORM.SEND_TO_AGENT')
            }}</label>
          </div>
-          <div>
+          <div class="flex items-center gap-2">
            <input
              id="other_email_address"
              v-model="selectedType"
--- a/app/javascript/dashboard/components/widgets/conversation/Message.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/Message.vue
@@ -601,8 +601,8 @@ export default {
        @apply text-woot-400 dark:text-woot-400;
      }

-      .text-block-title {
-        @apply text-slate-700 dark:text-slate-700;
+      .attachment-name {
+        @apply text-slate-700 dark:text-slate-200;
      }

      .download.button {
--- a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
@@ -547,6 +547,8 @@ export default {

 <style scoped lang="scss">
 .modal-mask {
+  @apply absolute;
+
  &::v-deep {
    .ProseMirror-woot-style {
      @apply max-h-[25rem];
--- a/app/javascript/dashboard/components/widgets/conversation/OnboardingView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/OnboardingView.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="columns onboarding-wrap">
+  <div class="onboarding-wrap">
    <div class="onboarding">
      <div class="scroll-wrap">
        <div class="features-item">
-          <h1 class="page-title">
+          <h1 class="text-2xl text-slate-900 dark:text-slate-50">
            <span>{{
              $t('ONBOARDING.TITLE', {
                installationName: globalConfig.installationName,
@@ -30,7 +30,7 @@
          </p>
        </div>
        <div class="features-item">
-          <h2 class="block-title text-black-900 dark:text-slate-200">
+          <h2 class="text-lg text-black-900 dark:text-slate-200">
            <span class="emoji">💬</span>
            <span class="conversation--title">{{
              $t('ONBOARDING.ALL_CONVERSATION.TITLE')
@@ -41,7 +41,7 @@
          </p>
        </div>
        <div class="features-item">
-          <h2 class="block-title text-black-900 dark:text-slate-200">
+          <h2 class="text-lg text-black-900 dark:text-slate-200">
            <span class="emoji">👥</span>
            {{ $t('ONBOARDING.TEAM_MEMBERS.TITLE') }}
          </h2>
@@ -53,7 +53,7 @@
          </router-link>
        </div>
        <div class="features-item">
-          <h2 class="block-title text-black-900 dark:text-slate-200">
+          <h2 class="text-lg text-black-900 dark:text-slate-200">
            <span class="emoji">📥</span>{{ $t('ONBOARDING.INBOXES.TITLE') }}
          </h2>
          <p class="intro-body">
@@ -64,7 +64,7 @@
          </router-link>
        </div>
        <div class="features-item">
-          <h2 class="block-title text-black-900 dark:text-slate-200">
+          <h2 class="text-lg text-black-900 dark:text-slate-200">
            <span class="emoji">🔖</span>{{ $t('ONBOARDING.LABELS.TITLE') }}
          </h2>
          <p class="intro-body">
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
@@ -1202,10 +1202,28 @@ export default {
 }

 .reply-box {
+  transition:
+    box-shadow 0.35s cubic-bezier(0.37, 0, 0.63, 1),
+    height 2s cubic-bezier(0.37, 0, 0.63, 1);
+
  @apply relative border-t border-slate-50 dark:border-slate-700 bg-white dark:bg-slate-900;

+  &.is-focused {
+    box-shadow:
+      0 1px 3px 0 rgba(0, 0, 0, 0.1),
+      0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  }
+
  &.is-private {
-    @apply bg-yellow-50 dark:bg-yellow-200;
+    @apply bg-yellow-100 dark:bg-yellow-800;
+
+    .reply-box__top {
+      @apply bg-yellow-100 dark:bg-yellow-800;
+
+      > input {
+        @apply bg-yellow-100 dark:bg-yellow-800;
+      }
+    }
  }
 }
 .send-button {
@@ -1214,6 +1232,10 @@ export default {

 .reply-box__top {
  @apply relative py-0 px-4 -mt-px border-t border-solid border-slate-50 dark:border-slate-700;
+
+  textarea {
+    @apply shadow-none border-transparent bg-transparent m-0 max-h-60 min-h-[3rem] pt-4 pb-0 px-0 resize-none;
+  }
 }

 .emoji-dialog {
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue
@@ -5,10 +5,11 @@
        <label class="input-group-label">
          {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.TO') }}
        </label>
-        <div class="input-group-field">
+        <div class="rounded-none flex-1 min-w-0 m-0 whitespace-nowrap">
          <woot-input
            v-model.trim="$v.toEmailsVal.$model"
            type="text"
+            class="[&>input]:mb-0 [&>input]:border-transparent [&>input]:h-8 [&>input]:text-sm [&>input]:!border-0 [&>input]:border-none"
            :class="{ error: $v.toEmailsVal.$error }"
            :placeholder="$t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.PLACEHOLDER')"
            @blur="onBlur"
@@ -21,9 +22,10 @@
        <label class="input-group-label">
          {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.LABEL') }}
        </label>
-        <div class="input-group-field">
+        <div class="rounded-none flex-1 min-w-0 m-0 whitespace-nowrap">
          <woot-input
            v-model.trim="$v.ccEmailsVal.$model"
+            class="[&>input]:mb-0 [&>input]:border-transparent [&>input]:h-8 [&>input]:text-sm [&>input]:!border-0 [&>input]:border-none"
            type="text"
            :class="{ error: $v.ccEmailsVal.$error }"
            :placeholder="$t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.PLACEHOLDER')"
@@ -48,10 +50,11 @@
        <label class="input-group-label">
          {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.BCC.LABEL') }}
        </label>
-        <div class="input-group-field">
+        <div class="rounded-none flex-1 min-w-0 m-0 whitespace-nowrap">
          <woot-input
            v-model.trim="$v.bccEmailsVal.$model"
            type="text"
+            class="[&>input]:mb-0 [&>input]:border-transparent [&>input]:h-8 [&>input]:text-sm [&>input]:!border-0 [&>input]:border-none"
            :class="{ error: $v.bccEmailsVal.$error }"
            :placeholder="
              $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.BCC.PLACEHOLDER')
@@ -150,14 +153,11 @@ export default {
  @apply text-sm text-red-500 dark:text-red-500;
 }
 .input-group {
-  @apply border-b border-solid border-slate-75 dark:border-slate-700 my-1;
+  @apply border-b border-solid border-slate-75 dark:border-slate-700 my-1 flex items-center gap-2;

  .input-group-label {
    @apply border-transparent bg-transparent text-xs font-semibold pl-0;
  }
-  .input-group-field::v-deep input {
-    @apply mb-0 border-transparent;
-  }
 }

 .input-group.error {
--- a/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplatesPicker.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplatesPicker.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="w-full">
-    <div class="templates__list-search">
+    <div class="templates__list-search gap-1">
      <fluent-icon icon="search" class="search-icon" size="16" />
      <input
        ref="search"
@@ -17,7 +17,7 @@
          @click="$emit('onSelect', template)"
        >
          <div>
-            <div class="flex-between">
+            <div class="flex items-center justify-between mb-2.5">
              <p class="label-title">
                {{ template.name }}
              </p>
@@ -97,10 +97,6 @@ export default {
 </script>

 <style scoped lang="scss">
-.flex-between {
-  @apply flex justify-between mb-2.5;
-}
-
 .templates__list-search {
  @apply items-center flex bg-slate-25 dark:bg-slate-900 mb-2.5 py-0 px-2.5 rounded-md border border-solid border-slate-100 dark:border-slate-700;

@@ -109,7 +105,7 @@ export default {
  }

  .templates__search-input {
-    @apply bg-transparent border-0 text-xs h-auto m-0;
+    @apply bg-transparent border-0 text-xs h-9 m-0;
  }
 }
 .template__list-container {
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/File.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/File.vue
@@ -4,7 +4,7 @@
      <fluent-icon icon="document" class="file--icon" size="32" />
    </div>
    <div class="meta">
-      <h5 class="text-block-title">
+      <h5 class="attachment-name text-slate-700 dark:text-slate-400">
        {{ decodeURI(fileName) }}
      </h5>
      <a
@@ -62,7 +62,7 @@ export default {
    margin-right: $space-slab;
  }

-  .text-block-title {
+  .attachment-name {
    margin: 0;
    color: $color-white;
    font-weight: $font-weight-bold;
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Location.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/Location.vue
@@ -5,7 +5,7 @@
    </div>
    <div class="meta">
      <h5
-        class="text-block-title overflow-hidden whitespace-nowrap text-ellipsis"
+        class="text-sm text-slate-800 dark:text-slate-100 overflow-hidden whitespace-nowrap text-ellipsis"
      >
        {{ name }}
      </h5>
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/TranslateModal.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/TranslateModal.vue
@@ -5,11 +5,11 @@
    show
    :on-close="onClose"
  >
-    <div class="column content">
+    <div class="content">
      <p>
        <b>{{ $t('TRANSLATE_MODAL.ORIGINAL_CONTENT') }}</b>
      </p>
-      <p v-dompurify-html="content" />
+      <p v-dompurify-html="content" class="mb-0" />
      <br />
      <hr />
      <div v-if="translationsAvailable">
--- a/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue
@@ -20,9 +20,7 @@
          <div
            class="flex items-start flex-col justify-center ml-2 rtl:ml-0 rtl:mr-2"
          >
-            <h3
-              class="sub-block-title inline-block leading-[1.4] m-0 p-0 capitalize"
-            >
+            <h3 class="text-base inline-block leading-[1.4] m-0 p-0 capitalize">
              <span
                class="text-slate-800 dark:text-slate-100 overflow-hidden whitespace-nowrap text-ellipsis"
              >
@@ -37,7 +35,7 @@
          </div>
        </div>
        <div
-          class="items-center text-slate-700 dark:text-slate-100 flex font-semibold justify-start min-w-0 p-1 w-auto text-block-title"
+          class="items-center text-slate-700 dark:text-slate-100 flex font-semibold justify-start min-w-0 p-1 w-auto text-sm"
        >
          <span
            class="text-slate-700 dark:text-slate-100 overflow-hidden whitespace-nowrap text-ellipsis"
@@ -147,7 +145,7 @@
      </div>
      <div class="items-center flex h-16 justify-center w-full py-2 px-6">
        <div
-          class="items-center rounded-sm flex font-semibold justify-center min-w-[5rem] p-1 bg-slate-25 dark:bg-slate-800 text-slate-600 dark:text-slate-200 text-block-title"
+          class="items-center rounded-sm flex font-semibold justify-center min-w-[5rem] p-1 bg-slate-25 dark:bg-slate-800 text-slate-600 dark:text-slate-200 text-sm"
        >
          <span class="count">
            {{ `${activeImageIndex + 1} / ${allAttachments.length}` }}
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue
@@ -5,7 +5,7 @@
        <path d="M20 12l-8-8-12 12" fill-rule="evenodd" stroke-width="1px" />
      </svg>
    </div>
-    <div class="header flex-between">
+    <div class="header flex items-center justify-between">
      <span>{{ $t('BULK_ACTION.AGENT_SELECT_LABEL') }}</span>
      <woot-button
        size="tiny"
@@ -26,7 +26,9 @@
      <div v-else class="agent__list-container">
        <ul v-if="!selectedAgent">
          <li class="search-container">
-            <div class="agent-list-search flex-between">
+            <div
+              class="agent-list-search h-8 flex justify-between items-center gap-2"
+            >
              <fluent-icon icon="search" class="search-icon" size="16" />
              <input
                ref="search"
@@ -45,7 +47,9 @@
                :username="agent.name"
                size="22px"
              />
-              <span class="reports-option__title">{{ agent.name }}</span>
+              <span class="my-0 text-slate-800 dark:text-slate-75">
+                {{ agent.name }}
+              </span>
            </div>
          </li>
        </ul>
@@ -205,7 +209,7 @@ export default {
      }

      .agent--search_input {
-        @apply border-0 text-xs m-0 dark:bg-transparent bg-transparent h-[unset];
+        @apply border-0 text-xs m-0 dark:bg-transparent bg-transparent h-[unset] w-full;
      }
    }
  }
@@ -231,7 +235,7 @@ ul {
 }

 .agent-list-item {
-  @apply flex items-center p-2.5 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-900;
+  @apply flex items-center p-2.5 gap-2 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-900;
  span {
    @apply text-sm;
  }
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="bulk-action__container">
-    <div class="flex-between">
-      <label class="bulk-action__panel flex-between">
+    <div class="flex items-center justify-between">
+      <label class="bulk-action__panel flex items-center justify-between">
        <input
          ref="selectAllCheck"
          type="checkbox"
@@ -18,14 +18,13 @@
          }}
        </span>
      </label>
-      <div class="bulk-action__actions flex-between">
+      <div class="bulk-action__actions flex gap-1 items-center">
        <woot-button
          v-tooltip="$t('BULK_ACTION.LABELS.ASSIGN_LABELS')"
          size="tiny"
          variant="smooth"
          color-scheme="secondary"
          icon="tag"
-          class="margin-right-smaller"
          @click="toggleLabelActions"
        />
        <woot-button
@@ -34,7 +33,6 @@
          variant="smooth"
          color-scheme="secondary"
          icon="repeat"
-          class="margin-right-smaller"
          @click="toggleUpdateActions"
        />
        <woot-button
@@ -43,7 +41,6 @@
          variant="smooth"
          color-scheme="secondary"
          icon="person-assign"
-          class="margin-right-smaller"
          @click="toggleAgentList"
        />
        <woot-button
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue
@@ -5,7 +5,7 @@
        <path d="M20 12l-8-8-12 12" fill-rule="evenodd" stroke-width="1px" />
      </svg>
    </div>
-    <div class="header flex-between">
+    <div class="header flex items-center justify-between">
      <span>{{ $t('BULK_ACTION.LABELS.ASSIGN_LABELS') }}</span>
      <woot-button
        size="tiny"
@@ -17,7 +17,9 @@
    </div>
    <div class="labels-list">
      <header class="labels-list__header">
-        <div class="label-list-search flex-between">
+        <div
+          class="label-list-search h-8 flex justify-between items-center gap-2"
+        >
          <fluent-icon icon="search" class="search-icon" size="16" />
          <input
            ref="search"
@@ -138,7 +140,7 @@ export default {
  }

  .label--search_input {
-    @apply border-0 text-xs m-0 dark:bg-transparent bg-transparent h-[unset];
+    @apply border-0 text-xs m-0 dark:bg-transparent bg-transparent h-[unset] w-full;
  }
 }

--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/TeamActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/TeamActions.vue
@@ -5,7 +5,7 @@
        <path d="M20 12l-8-8-12 12" fill-rule="evenodd" stroke-width="1px" />
      </svg>
    </div>
-    <div class="header flex-between">
+    <div class="header flex items-center justify-between">
      <span>{{ $t('BULK_ACTION.TEAMS.TEAM_SELECT_LABEL') }}</span>
      <woot-button
        size="tiny"
@@ -19,7 +19,9 @@
      <div class="team__list-container">
        <ul>
          <li class="search-container">
-            <div class="agent-list-search flex-between">
+            <div
+              class="agent-list-search h-8 flex justify-between items-center gap-2"
+            >
              <fluent-icon icon="search" class="search-icon" size="16" />
              <input
                ref="search"
@@ -33,15 +35,21 @@
          <template v-if="filteredTeams.length">
            <li v-for="team in filteredTeams" :key="team.id">
              <div class="team__list-item" @click="assignTeam(team)">
-                <span class="reports-option__title">{{ team.name }}</span>
+                <span
+                  class="my-0 ltr:ml-2 rtl:mr-2 text-slate-800 dark:text-slate-75"
+                >
+                  {{ team.name }}
+                </span>
              </div>
            </li>
          </template>
          <li v-else>
            <div class="team__list-item">
-              <span class="reports-option__title">{{
-                $t('BULK_ACTION.TEAMS.NO_TEAMS_AVAILABLE')
-              }}</span>
+              <span
+                class="my-0 ltr:ml-2 rtl:mr-2 text-slate-800 dark:text-slate-75"
+              >
+                {{ $t('BULK_ACTION.TEAMS.NO_TEAMS_AVAILABLE') }}
+              </span>
            </div>
          </li>
        </ul>
@@ -106,7 +114,7 @@ export default {
      }

      .agent--search_input {
-        @apply border-0 text-xs m-0 dark:bg-transparent bg-transparent h-[unset];
+        @apply border-0 text-xs m-0 dark:bg-transparent bg-transparent w-full h-[unset];
      }
    }
  }
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/UpdateActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/UpdateActions.vue
@@ -5,7 +5,7 @@
        <path d="M20 12l-8-8-12 12" fill-rule="evenodd" stroke-width="1px" />
      </svg>
    </div>
-    <div class="header flex-between">
+    <div class="header flex items-center justify-between">
      <span>{{ $t('BULK_ACTION.UPDATE.CHANGE_STATUS') }}</span>
      <woot-button
        size="tiny"
--- a/app/javascript/dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue
@@ -5,7 +5,7 @@
    class="label-container mt-0.5 mx-2 mb-0"
  >
    <div
-      class="labels-wrap flex items-end min-w-0 flex-shrink"
+      class="labels-wrap flex items-end min-w-0 flex-shrink gap-y-1 flex-wrap"
      :class="{ expand: showAllLabels }"
    >
      <woot-label
@@ -15,6 +15,7 @@
        :description="label.description"
        :color="label.color"
        variant="smooth"
+        class="!mb-0 max-w-[calc(100%-0.5rem)]"
        small
        :class="{ hidden: !showAllLabels && index > labelPosition }"
      />
@@ -96,23 +97,11 @@ export default {
 .labels-wrap {
  &.expand {
    @apply h-auto overflow-visible flex-row flex-wrap;
-
-    .label {
-      @apply mb-1;
-    }
-
-    .show-more--button {
-      @apply mb-1;
-    }
  }

  .secondary {
    @apply border border-solid border-slate-100 dark:border-slate-700;
  }
-
-  .label {
-    @apply mb-0;
-  }
 }

 .hidden {