feat: Support bigger font size in dashboard (#10974)

# Pull Request Template

## Description

Fixes
https://linear.app/chatwoot/issue/CW-4091/accessibility-improvement-support-bigger-font-size-for-the-dashboard

## Type of change

- [x] New feature (non-breaking change which adds functionality)

## How Has This Been Tested?

### **Loom video**

https://www.loom.com/share/1ab781859fa748a5ad54aacbacd127b4?sid=a7dd9164-a6de-462f-bff7-1b25e9c55b4f

## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [x] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [x] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules

app/javascript/dashboard/components-next/NewConversation/components/ActionButtons.vue

@@ -148,7 +148,7 @@ useKeyboardEvents(keyboardEvents);
 
 <template>
   <div
-    class="flex items-center justify-between w-full h-[52px] gap-2 px-4 py-3"
+    class="flex items-center justify-between w-full h-[3.25rem] gap-2 px-4 py-3"
   >
     <div class="flex items-center gap-2">
       <WhatsAppOptions

app/javascript/dashboard/components-next/NewConversation/components/AttachmentPreviews.vue

@@ -47,10 +47,10 @@ const removeAttachment = id => {
       <div
         v-for="attachment in filteredImageAttachments"
         :key="attachment.id"
-        class="relative group/image w-[72px] h-[72px]"
+        class="relative group/image w-[4.5rem] h-[4.5rem]"
       >
         <img
-          class="object-cover w-[72px] h-[72px] rounded-lg"
+          class="object-cover w-[4.5rem] h-[4.5rem] rounded-lg"
           :src="attachment.thumb"
         />
         <Button
@@ -69,7 +69,7 @@ const removeAttachment = id => {
       <div
         v-for="attachment in filteredNonImageAttachments"
         :key="attachment.id"
-        class="max-w-[300px] inline-flex items-center h-8 min-w-0 bg-n-alpha-2 dark:bg-n-solid-3 rounded-lg gap-3 ltr:pl-3 rtl:pr-3 ltr:pr-2 rtl:pl-2"
+        class="max-w-[18.75rem] inline-flex items-center h-8 min-w-0 bg-n-alpha-2 dark:bg-n-solid-3 rounded-lg gap-3 ltr:pl-3 rtl:pr-3 ltr:pr-2 rtl:pl-2"
       >
         <span class="text-sm font-medium text-n-slate-11">
           {{ fileNameWithEllipsis(attachment.resource) }}

app/javascript/dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue

@@ -265,7 +265,7 @@ const handleSendWhatsappMessage = async ({ message, templateParams }) => {
 
 <template>
   <div
-    class="w-[670px] mt-2 divide-y divide-n-strong overflow-visible transition-all duration-300 ease-in-out top-full justify-between flex flex-col bg-n-alpha-3 border border-n-strong shadow-sm backdrop-blur-[100px] rounded-xl"
+    class="w-[42rem] mt-2 divide-y divide-n-strong overflow-visible transition-all duration-300 ease-in-out top-full justify-between flex flex-col bg-n-alpha-3 border border-n-strong shadow-sm backdrop-blur-[100px] rounded-xl"
   >
     <ContactSelector
       :contacts="contacts"