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/SettingsSection.vue

@@ -23,33 +23,34 @@ export default {
 
 <template>
   <div
-    class="ml-0 mr-0 flex py-8 w-full xl:w-3/4 flex-col xl:flex-row"
+    class="ml-0 mr-0 py-8 w-full"
     :class="{
-      'border-b border-solid border-slate-50 dark:border-slate-700/30':
-        showBorder,
+      'border-b border-solid border-n-weak/60 dark:border-n-weak': showBorder,
     }"
   >
-    <div class="w-full xl:w-1/4 min-w-0 xl:max-w-[30%] pr-12">
-      <p
-        v-if="title"
-        class="text-base text-woot-500 dark:text-woot-500 mb-0 font-medium"
-      >
-        {{ title }}
-      </p>
-      <p
-        class="text-sm mb-2 text-slate-700 dark:text-slate-300 leading-5 tracking-normal mt-2"
-      >
-        <slot v-if="subTitle" name="subTitle">
-          {{ subTitle }}
-        </slot>
-      </p>
-      <p v-if="note">
-        <span class="font-semibold">{{ $t('INBOX_MGMT.NOTE') }}</span>
-        {{ note }}
-      </p>
-    </div>
-    <div class="w-full xl:w-1/2 min-w-0 xl:max-w-[50%]">
-      <slot />
+    <div class="grid grid-cols-1 lg:grid-cols-6 gap-6">
+      <div class="col-span-2 xl:col-span-1">
+        <p
+          v-if="title"
+          class="text-base text-woot-500 dark:text-woot-500 mb-0 font-medium"
+        >
+          {{ title }}
+        </p>
+        <p
+          class="text-sm mb-2 text-slate-700 dark:text-slate-300 leading-5 tracking-normal mt-2"
+        >
+          <slot v-if="subTitle" name="subTitle">
+            {{ subTitle }}
+          </slot>
+        </p>
+        <p v-if="note">
+          <span class="font-semibold">{{ $t('INBOX_MGMT.NOTE') }}</span>
+          {{ note }}
+        </p>
+      </div>
+      <div class="col-span-4 lg:col-span-4 2xl:col-span-3">
+        <slot />
+      </div>
     </div>
   </div>
 </template>