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
This commit is contained in:
Sivin Varghese
2025-02-27 12:10:33 +05:30
committed by GitHub
parent a9de672932
commit 2556de1f38
66 changed files with 598 additions and 162 deletions

View File

@@ -87,7 +87,7 @@ export default {
<template>
<div
role="dialog"
class="emoji-dialog bg-white shadow-lg dark:bg-slate-900 rounded-md border border-solid border-slate-75 dark:border-slate-800/50 box-content h-[300px] absolute right-0 -top-[95px] w-80 z-20"
class="emoji-dialog bg-white shadow-lg dark:bg-slate-900 rounded-md border border-solid border-slate-75 dark:border-slate-800/50 box-content h-[18.75rem] absolute right-0 -top-[95px] w-80 z-20"
>
<div class="flex flex-col">
<div class="flex gap-2 emoji-search--wrap">
@@ -230,7 +230,7 @@ export default {
@apply box-border p-1;
.emoji--item {
@apply h-[26px] w-[26px] leading-normal m-1;
@apply h-[1.625rem] w-[1.625rem] leading-normal m-1;
}
}
@@ -243,7 +243,7 @@ export default {
}
.empty-message {
@apply items-center flex flex-col h-[212px] justify-center;
@apply items-center flex flex-col h-[13.25rem] justify-center;
.emoji-icon {
@apply text-slate-200 dark:text-slate-200 mb-2;
@@ -255,7 +255,7 @@ export default {
}
.emoji-item {
@apply h-[212px] overflow-y-auto;
@apply h-[13.25rem] overflow-y-auto;
}
.emoji-category--title {
@@ -263,7 +263,7 @@ export default {
}
.emoji-dialog--footer {
@apply relative w-[322px] -left-px rtl:left-[unset] rtl:-right-px bottom-0 py-0 rounded-b-md border-b border-solid border-slate-75 dark:border-slate-800/50 px-1 bg-slate-75 dark:bg-slate-800;
@apply relative w-full py-0 rounded-b-[0.34rem] px-1 bg-slate-75 dark:bg-slate-800;
ul {
@apply flex relative left-[2px] rtl:left-[unset] rtl:right-[2px] list-none m-0 overflow-auto py-1 px-0;