chore: Refactor reports for RTL (#6517)

* Refactor reports

* fix: spacing issues and minor fixes

---------

Co-authored-by: Nithin David <1277421+nithindavid@users.noreply.github.com>

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

@@ -24,16 +24,13 @@
             <inbox-name
               v-if="hasMultipleInboxes"
               :inbox="inbox"
-              class="margin-right-small"
+              class="margin-right-1"
             />
-            <span
-              v-if="isSnoozed"
-              class="snoozed--display-text margin-right-small"
-            >
+            <span v-if="isSnoozed" class="snoozed--display-text margin-right-1">
               {{ snoozedDisplayText }}
             </span>
             <woot-button
-              class="user--profile__button margin-right-small"
+              class="user--profile__button margin-right-1"
               size="small"
               variant="link"
               @click="$emit('contact-panel-toggle')"

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bulk-action__agents">
+  <div v-on-clickaway="onClose" class="bulk-action__agents">
     <div class="triangle" :style="cssVars">
       <svg height="12" viewBox="0 0 24 12" width="24">
         <path
@@ -50,7 +50,6 @@
                 :status="agent.availability_status"
                 :username="agent.name"
                 size="22px"
-                class="margin-right-small"
               />
               <span class="reports-option__title">{{ agent.name }}</span>
             </div>