From f7102d7f8b73638a436636455f0a01b4673aadd6 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Wed, 31 Jul 2024 11:17:05 +0530
Subject: [PATCH] fix: Table styles (#9860)

# Pull Request Template

## Description

This PR will fix table style breakage in the portal and inbox pre-chat
form settings pages.

## Type of change

- [x] Bug fix (non-breaking change which fixes an issue)

## How Has This Been Tested?

**Before**

1.
<img width="1563" alt="image"
src="https://github.com/user-attachments/assets/b9eb7962-90ba-4a73-8221-08cb00e699e3">

2.
<img width="1190" alt="image"
src="https://github.com/user-attachments/assets/d60ca321-9743-4c30-ba3c-a34633f6f360">

3.
<img width="1190" alt="image"
src="https://github.com/user-attachments/assets/a0a91780-030e-4154-b80b-7dd7bade08e7">

4.
<img width="1190" alt="image"
src="https://github.com/user-attachments/assets/dbd99e24-f907-48c4-b460-db2f03453bda">


**After**
1.
<img width="1613" alt="image"
src="https://github.com/user-attachments/assets/aa5cb340-965d-4956-b1e7-79d955a62f19">

2.
<img width="1203" alt="image"
src="https://github.com/user-attachments/assets/dcb2b9df-e6a5-48a4-a5dd-2c1fc25fc9b2">

3.
<img width="1203" alt="image"
src="https://github.com/user-attachments/assets/409f3983-7987-4250-b311-cbea5e757e47">

4.
<img width="1203" alt="image"
src="https://github.com/user-attachments/assets/27db4709-6b67-459a-a784-fd902f202964">



## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [ ] 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
- [ ] 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
---
 .../dashboard/helpcenter/components/PortalListItemTable.vue   | 2 +-
 .../helpcenter/pages/categories/CategoryListItem.vue          | 4 ++--
 .../routes/dashboard/settings/inbox/PreChatForm/Settings.vue  | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItemTable.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItemTable.vue
index d07e14271..8a07302cf 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItemTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItemTable.vue
@@ -1,5 +1,5 @@
 <template>
-  <table>
+  <table class="woot-table">
     <thead>
       <tr>
         <th scope="col">
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/CategoryListItem.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/CategoryListItem.vue
index 1e9886510..d171c3f28 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/CategoryListItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/CategoryListItem.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <table>
+    <table class="woot-table">
       <thead>
         <tr>
           <th scope="col">
@@ -66,7 +66,7 @@
     </table>
     <p
       v-if="categories.length === 0"
-      class="flex justify-center text-slate-500 dark:text-slate-300 text-base mt-8"
+      class="flex justify-center mt-8 text-base text-slate-500 dark:text-slate-300"
     >
       {{ $t('HELP_CENTER.PORTAL.EDIT.CATEGORIES.TABLE.EMPTY_TEXT') }}
     </p>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/Settings.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/Settings.vue
index a58adc443..a5f84cc82 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/Settings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/Settings.vue
@@ -30,7 +30,7 @@
         </div>
         <div class="w-[70%] mt-4">
           <label>{{ $t('INBOX_MGMT.PRE_CHAT_FORM.SET_FIELDS') }}</label>
-          <table class="table w-full table-striped">
+          <table class="table w-full table-striped woot-table">
             <thead class="thead-dark">
               <tr>
                 <th scope="col" />