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
2025-02-27 12:10:33 +05:30
parent a9de672932
commit 2556de1f38
66 changed files with 598 additions and 162 deletions
--- a/app/javascript/dashboard/components-next/Campaigns/CampaignLayout.vue
+++ b/app/javascript/dashboard/components-next/Campaigns/CampaignLayout.vue
@@ -22,7 +22,7 @@ const handleButtonClick = () => {
 <template>
  <section class="flex flex-col w-full h-full overflow-hidden bg-n-background">
    <header class="sticky top-0 z-10 px-6 lg:px-0">
-      <div class="w-full max-w-[960px] mx-auto">
+      <div class="w-full max-w-[60rem] mx-auto">
        <div class="flex items-center justify-between w-full h-20 gap-2">
          <span class="text-xl font-medium text-n-slate-12">
            {{ headerTitle }}
@@ -44,7 +44,7 @@ const handleButtonClick = () => {
      </div>
    </header>
    <main class="flex-1 px-6 overflow-y-auto lg:px-0">
-      <div class="w-full max-w-[960px] mx-auto py-4">
+      <div class="w-full max-w-[60rem] mx-auto py-4">
        <slot name="default" />
      </div>
    </main>
--- a/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignDialog.vue
+++ b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignDialog.vue
@@ -40,7 +40,7 @@ const handleSubmit = campaignDetails => {

 <template>
  <div
-    class="w-[400px] z-50 min-w-0 absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-slate-50 dark:border-slate-900 shadow-md flex flex-col gap-6 max-h-[85vh] overflow-y-auto"
+    class="w-[25rem] z-50 min-w-0 absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-slate-50 dark:border-slate-900 shadow-md flex flex-col gap-6 max-h-[85vh] overflow-y-auto"
  >
    <h3 class="text-base font-medium text-slate-900 dark:text-slate-50">
      {{ t(`CAMPAIGN.LIVE_CHAT.CREATE.TITLE`) }}
--- a/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/SMSCampaign/SMSCampaignDialog.vue
+++ b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/SMSCampaign/SMSCampaignDialog.vue
@@ -39,7 +39,7 @@ const handleClose = () => emit('close');

 <template>
  <div
-    class="w-[400px] z-50 min-w-0 absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-slate-50 dark:border-slate-900 shadow-md flex flex-col gap-6"
+    class="w-[25rem] z-50 min-w-0 absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-slate-50 dark:border-slate-900 shadow-md flex flex-col gap-6"
  >
    <h3 class="text-base font-medium text-slate-900 dark:text-slate-50">
      {{ t(`CAMPAIGN.SMS.CREATE.TITLE`) }}
--- a/app/javascript/dashboard/components-next/Contacts/ContactsDetailsLayout.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsDetailsLayout.vue
@@ -65,8 +65,8 @@ const toggleBlock = () => {
    <div
      class="flex flex-col w-full h-full transition-all duration-300 ltr:2xl:ml-56 rtl:2xl:mr-56"
    >
-      <header class="sticky top-0 z-10 px-6 xl:px-0">
-        <div class="w-full mx-auto max-w-[650px]">
+      <header class="sticky top-0 z-10 px-6 3xl:px-0">
+        <div class="w-full mx-auto max-w-[40.625rem]">
          <div class="flex items-center justify-between w-full h-20 gap-2">
            <Breadcrumb
              :items="breadcrumbItems"
@@ -98,8 +98,8 @@ const toggleBlock = () => {
          </div>
        </div>
      </header>
-      <main class="flex-1 px-6 overflow-y-auto xl:px-px">
-        <div class="w-full py-4 mx-auto max-w-[650px]">
+      <main class="flex-1 px-6 overflow-y-auto 3xl:px-px">
+        <div class="w-full py-4 mx-auto max-w-[40.625rem]">
          <slot name="default" />
        </div>
      </main>
@@ -107,7 +107,7 @@ const toggleBlock = () => {

    <div
      v-if="slots.sidebar"
-      class="overflow-y-auto justify-end min-w-[200px] w-full py-6 max-w-[440px] border-l border-n-weak bg-n-solid-2"
+      class="overflow-y-auto justify-end min-w-52 w-full py-6 max-w-md border-l border-n-weak bg-n-solid-2"
    >
      <slot name="sidebar" />
    </div>
--- a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue
@@ -60,7 +60,7 @@ const emit = defineEmits([
 <template>
  <header class="sticky top-0 z-10">
    <div
-      class="flex items-center justify-between w-full h-20 px-6 gap-2 mx-auto max-w-[960px]"
+      class="flex items-center justify-between w-full h-20 px-6 gap-2 mx-auto max-w-[60rem]"
    >
      <span class="text-xl font-medium truncate text-n-slate-12">
        {{ headerTitle }}
--- a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactsActiveFiltersPreview.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactsActiveFiltersPreview.vue
@@ -62,7 +62,7 @@ const activeFilterQueryData = computed(() => {
      t('CONTACTS_LAYOUT.FILTER.ACTIVE_FILTERS.CLEAR_FILTERS')
    "
    :show-clear-button="!hasActiveSegments"
-    class="max-w-[960px] px-6"
+    class="max-w-[60rem] px-6"
    @open-filter="emit('openFilter')"
    @clear-filters="emit('clearFilters')"
  />
--- a/app/javascript/dashboard/components-next/Contacts/ContactsListLayout.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsListLayout.vue
@@ -72,7 +72,7 @@ const openFilter = () => {
        @clear-filters="emit('clearFilters')"
      />
      <main class="flex-1 overflow-y-auto">
-        <div class="w-full mx-auto max-w-[960px]">
+        <div class="w-full mx-auto max-w-[60rem]">
          <ContactsActiveFiltersPreview
            v-if="
              (hasAppliedFilters || !isNotSegmentView) &&
--- a/app/javascript/dashboard/components-next/EmptyStateLayout.vue
+++ b/app/javascript/dashboard/components-next/EmptyStateLayout.vue
@@ -22,7 +22,7 @@ defineProps({
    class="relative flex flex-col items-center justify-center w-full h-full overflow-hidden"
  >
    <div
-      class="relative w-full max-w-[960px] mx-auto overflow-hidden h-full max-h-[448px]"
+      class="relative w-full max-w-[60rem] mx-auto overflow-hidden h-full max-h-[28rem]"
    >
      <div
        class="w-full h-full space-y-4 overflow-y-hidden opacity-50 pointer-events-none"
--- a/app/javascript/dashboard/components-next/HelpCenter/HelpCenterLayout.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/HelpCenterLayout.vue
@@ -60,7 +60,7 @@ const togglePortalSwitcher = () => {
 <template>
  <section class="flex flex-col w-full h-full overflow-hidden bg-n-background">
    <header class="sticky top-0 z-10 px-6 pb-3 lg:px-0">
-      <div class="w-full max-w-[960px] mx-auto lg:px-6">
+      <div class="w-full max-w-[60rem] mx-auto lg:px-6">
        <div
          v-if="showHeaderTitle"
          class="flex items-center justify-start h-20 gap-2"
@@ -96,7 +96,7 @@ const togglePortalSwitcher = () => {
      </div>
    </header>
    <main class="flex-1 px-6 overflow-y-auto lg:px-0">
-      <div class="w-full max-w-[960px] mx-auto py-3 lg:px-6">
+      <div class="w-full max-w-[60rem] mx-auto py-3 lg:px-6">
        <slot name="content" />
      </div>
    </main>
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorProperties.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorProperties.vue
@@ -52,7 +52,7 @@ onMounted(() => {

 <template>
  <div
-    class="flex flex-col absolute w-[400px] bg-n-alpha-3 outline outline-1 outline-n-container backdrop-blur-[100px] shadow-lg gap-6 rounded-xl p-6"
+    class="flex flex-col absolute w-[25rem] bg-n-alpha-3 outline outline-1 outline-n-container backdrop-blur-[100px] shadow-lg gap-6 rounded-xl p-6"
  >
    <div class="flex items-center justify-between">
      <h3>
@@ -75,7 +75,7 @@ onMounted(() => {
      <div>
        <div class="flex justify-between w-full gap-4 py-2">
          <label
-            class="text-sm font-medium whitespace-nowrap min-w-[100px] text-slate-900 dark:text-slate-50"
+            class="text-sm font-medium whitespace-nowrap min-w-[6.25rem] text-slate-900 dark:text-slate-50"
          >
            {{
              t(
@@ -90,9 +90,9 @@ onMounted(() => {
                'HELP_CENTER.EDIT_ARTICLE_PAGE.ARTICLE_PROPERTIES.META_DESCRIPTION_PLACEHOLDER'
              )
            "
-            class="w-[220px]"
+            class="w-[13.75rem]"
            custom-text-area-wrapper-class="!p-0 !border-0 !rounded-none !bg-transparent transition-none"
-            custom-text-area-class="max-h-[150px]"
+            custom-text-area-class="max-h-[9.375rem]"
            auto-height
            min-height="3rem"
          />
@@ -108,12 +108,12 @@ onMounted(() => {
            :label="
              t('HELP_CENTER.EDIT_ARTICLE_PAGE.ARTICLE_PROPERTIES.META_TITLE')
            "
-            custom-label-class="min-w-[120px]"
+            custom-label-class="min-w-[7.5rem]"
          />
        </div>
        <div class="flex justify-between w-full gap-3 py-2">
          <label
-            class="text-sm font-medium whitespace-nowrap min-w-[120px] text-slate-900 dark:text-slate-50"
+            class="text-sm font-medium whitespace-nowrap min-w-[7.5rem] text-slate-900 dark:text-slate-50"
          >
            {{
              t('HELP_CENTER.EDIT_ARTICLE_PAGE.ARTICLE_PROPERTIES.META_TAGS')
@@ -126,7 +126,7 @@ onMounted(() => {
                'HELP_CENTER.EDIT_ARTICLE_PAGE.ARTICLE_PROPERTIES.META_TAGS_PLACEHOLDER'
              )
            "
-            class="w-[224px]"
+            class="w-[14rem]"
          />
        </div>
      </div>
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryDialog.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryDialog.vue
@@ -90,7 +90,7 @@ const handleCategory = async formData => {

 <template>
  <div
-    class="w-[400px] absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-slate-50 dark:border-slate-900 shadow-md flex flex-col gap-6"
+    class="w-[25rem] absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-slate-50 dark:border-slate-900 shadow-md flex flex-col gap-6"
  >
    <h3 class="text-base font-medium text-slate-900 dark:text-slate-50">
      {{
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryForm.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryForm.vue
@@ -201,7 +201,7 @@ defineExpose({ state, isSubmitDisabled });
                color="slate"
                size="sm"
                :icon="!state.icon ? 'i-lucide-smile-plus' : ''"
-                class="!h-[38px] !w-[38px] absolute top-[31px] !outline-none !rounded-[7px] border-0 ltr:left-px rtl:right-px ltr:!rounded-r-none rtl:!rounded-l-none"
+                class="!h-[2.4rem] !w-[2.375rem] absolute top-[1.94rem] !outline-none !rounded-[0.438rem] border-0 ltr:left-px rtl:right-px ltr:!rounded-r-none rtl:!rounded-l-none"
                @click="isEmojiPickerOpen = !isEmojiPickerOpen"
              />
              <EmojiInput
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalSettings.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalSettings.vue
@@ -74,7 +74,7 @@ const handleDeletePortal = () => {
      </div>
      <div
        v-else-if="activePortal"
-        class="flex flex-col w-full gap-4 max-w-[640px] pb-8"
+        class="flex flex-col w-full gap-4 max-w-[40rem] pb-8"
      >
        <PortalBaseSettings
          :active-portal="activePortal"
--- a/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue
@@ -92,7 +92,7 @@ const redirectToPortalHomePage = () => {

 <template>
  <div
-    class="pt-5 pb-3 bg-n-alpha-3 backdrop-blur-[100px] outline outline-n-container outline-1 z-50 absolute w-[440px] rounded-xl shadow-md flex flex-col gap-4"
+    class="pt-5 pb-3 bg-n-alpha-3 backdrop-blur-[100px] outline outline-n-container outline-1 z-50 absolute w-[27.5rem] rounded-xl shadow-md flex flex-col gap-4"
  >
    <div
      class="flex items-center justify-between gap-4 px-6 pb-3 border-b border-n-alpha-2"
--- a/app/javascript/dashboard/components-next/NewConversation/components/ActionButtons.vue
+++ b/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
--- a/app/javascript/dashboard/components-next/NewConversation/components/AttachmentPreviews.vue
+++ b/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) }}
--- a/app/javascript/dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue
+++ b/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"
--- a/app/javascript/dashboard/components-next/captain/PageLayout.vue
+++ b/app/javascript/dashboard/components-next/captain/PageLayout.vue
@@ -68,7 +68,7 @@ const handlePageChange = event => {
 <template>
  <section class="flex flex-col w-full h-full overflow-hidden bg-n-background">
    <header class="sticky top-0 z-10 px-6 xl:px-0">
-      <div class="w-full max-w-[960px] mx-auto">
+      <div class="w-full max-w-[60rem] mx-auto">
        <div
          class="flex items-start lg:items-center justify-between w-full py-6 lg:py-0 lg:h-20 gap-4 lg:gap-2 flex-col lg:flex-row"
        >
@@ -96,7 +96,7 @@ const handlePageChange = event => {
      </div>
    </header>
    <main class="flex-1 px-6 overflow-y-auto xl:px-0">
-      <div class="w-full max-w-[960px] mx-auto py-4">
+      <div class="w-full max-w-[60rem] mx-auto py-4">
        <slot v-if="!showPaywall" name="controls" />
        <div
          v-if="isFetching"
--- a/app/javascript/dashboard/components-next/captain/pageComponents/Paywall.vue
+++ b/app/javascript/dashboard/components-next/captain/pageComponents/Paywall.vue
@@ -27,7 +27,7 @@ const openBilling = () => {

 <template>
  <div
-    class="w-full max-w-[960px] mx-auto h-full max-h-[448px] grid place-content-center"
+    class="w-full max-w-[60rem] mx-auto h-full max-h-[448px] grid place-content-center"
  >
    <BasePaywallModal
      class="mx-auto"
--- a/app/javascript/dashboard/components-next/pagination/PaginationFooter.vue
+++ b/app/javascript/dashboard/components-next/pagination/PaginationFooter.vue
@@ -63,7 +63,7 @@ const pageInfo = computed(() => {

 <template>
  <div
-    class="flex justify-between h-12 w-full max-w-[957px] outline outline-n-container outline-1 -outline-offset-1 mx-auto bg-n-solid-2 rounded-xl py-2 ltr:pl-4 rtl:pr-4 ltr:pr-3 rtl:pl-3 items-center before:absolute before:inset-x-0 before:-top-4 before:bg-gradient-to-t before:from-n-background before:from-10% before:dark:from-0% before:to-transparent before:h-4 before:pointer-events-none"
+    class="flex justify-between h-12 w-full max-w-[calc(60rem-3px)] outline outline-n-container outline-1 -outline-offset-1 mx-auto bg-n-solid-2 rounded-xl py-2 ltr:pl-4 rtl:pr-4 ltr:pr-3 rtl:pl-3 items-center before:absolute before:inset-x-0 before:-top-4 before:bg-gradient-to-t before:from-n-background before:from-10% before:dark:from-0% before:to-transparent before:h-4 before:pointer-events-none"
  >
    <div class="flex items-center gap-3">
      <span class="min-w-0 text-sm font-normal line-clamp-1 text-n-slate-11">
--- a/app/javascript/dashboard/components-next/phonenumberinput/PhoneNumberInput.vue
+++ b/app/javascript/dashboard/components-next/phonenumberinput/PhoneNumberInput.vue
@@ -185,7 +185,7 @@ watch(
              "
              trailing-icon
              :disabled="disabled"
-              class="!h-[30px] top-1 !px-2 outline-0 !outline-none !rounded-lg border-0 ltr:!rounded-r-none rtl:!rounded-l-none"
+              class="!h-[1.875rem] top-1 !px-2 outline-0 !outline-none !rounded-lg border-0 ltr:!rounded-r-none rtl:!rounded-l-none"
              @click="toggleCountryDropdown"
            >
              <span
--- a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
+++ b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
@@ -515,7 +515,7 @@ const menuItems = computed(() => {

 <template>
  <aside
-    class="w-[200px] bg-n-solid-2 rtl:border-l ltr:border-r border-n-weak h-screen flex flex-col text-sm pb-1"
+    class="w-[12.5rem] bg-n-solid-2 rtl:border-l ltr:border-r border-n-weak h-screen flex flex-col text-sm pb-1"
  >
    <section class="grid gap-2 mt-2 mb-4">
      <div class="flex items-center min-w-0 gap-2 px-2">
--- a/app/javascript/dashboard/components-next/sidebar/SidebarGroupLeaf.vue
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarGroupLeaf.vue
@@ -31,7 +31,7 @@ const shouldRenderComponent = computed(() => {
      :is="to ? 'router-link' : 'div'"
      :to="to"
      :title="label"
-      class="flex h-8 items-center gap-2 px-2 py-1 rounded-lg max-w-[151px] hover:bg-gradient-to-r from-transparent via-n-slate-3/70 to-n-slate-3/70 group"
+      class="flex h-8 items-center gap-2 px-2 py-1 rounded-lg max-w-[9.438rem] hover:bg-gradient-to-r from-transparent via-n-slate-3/70 to-n-slate-3/70 group"
      :class="{
        'n-blue-text bg-n-alpha-2 active': active,
      }"
--- a/app/javascript/dashboard/components-next/switch/Switch.vue
+++ b/app/javascript/dashboard/components-next/switch/Switch.vue
@@ -27,7 +27,7 @@ const updateValue = () => {
  >
    <span class="sr-only">{{ t('SWITCH.TOGGLE') }}</span>
    <span
-      class="absolute top-px left-0.5 h-3 w-3 transform rounded-full shadow-sm transition-transform duration-200 ease-in-out"
+      class="absolute top-[0.07rem] left-0.5 h-3 w-3 transform rounded-full shadow-sm transition-transform duration-200 ease-in-out"
      :class="
        modelValue
          ? 'translate-x-2.5 bg-white'