From e3b5b306662bb076b2dead4cb6a53b1f3efb0885 Mon Sep 17 00:00:00 2001
From: Pranav <pranav@chatwoot.com>
Date: Wed, 15 Jan 2025 11:59:20 -0800
Subject: [PATCH] fix: Remove overflow-hidden on accordionItem (#10692)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This PR fixes the following problem.

<img width="318" alt="Screenshot 2025-01-15 at 11 53 38 AM"
src="https://github.com/user-attachments/assets/44656cbe-2c29-4400-88b4-15bd270bb627"
/>

Co-authored-by: Sojan Jose <sojan@pepalo.com>
---
 .../dashboard/components/Accordion/AccordionItem.vue  |  2 +-
 .../dashboard/conversation/Macros/MacroItem.vue       |  2 +-
 .../customAttributes/CustomAttributes.vue             | 11 +++++++----
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/app/javascript/dashboard/components/Accordion/AccordionItem.vue b/app/javascript/dashboard/components/Accordion/AccordionItem.vue
index e7a608a72..b13d5b5c2 100644
--- a/app/javascript/dashboard/components/Accordion/AccordionItem.vue
+++ b/app/javascript/dashboard/components/Accordion/AccordionItem.vue
@@ -55,7 +55,7 @@ const onToggle = () => {
     </button>
     <div
       v-if="isOpen"
-      class="bg-n-background border border-n-weak dark:border-n-slate-2 border-t-0 rounded-br-lg rounded-bl-lg overflow-hidden"
+      class="bg-n-background border border-n-weak dark:border-n-slate-2 border-t-0 rounded-br-lg rounded-bl-lg"
       :class="compact ? 'p-0' : 'px-2 py-4'"
     >
       <slot />
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroItem.vue b/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroItem.vue
index e7b3b20d0..daad9e42a 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroItem.vue
@@ -86,7 +86,7 @@ export default {
 
 <style scoped lang="scss">
 .macro {
-  @apply relative flex items-center justify-between leading-4;
+  @apply relative flex items-center justify-between leading-4 rounded-md;
 
   .macros-actions {
     @apply flex items-center justify-end;
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue b/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
index 74a6e9ec4..251d876a9 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
@@ -181,10 +181,11 @@ const wrapperClass = computed(() => {
 
 <!-- TODO: After migration to Vue 3, remove the top level div -->
 <template>
-  <div :class="wrapperClass">
+  <div :class="wrapperClass" class="last:rounded-b-lg">
     <CustomAttribute
       v-for="attribute in displayedAttributes"
       :key="attribute.id"
+      class="last:rounded-b-lg border-b border-n-weak/50 dark:border-n-weak/90"
       :attribute-key="attribute.attribute_key"
       :attribute-type="attribute.attribute_display_type"
       :values="attribute.attribute_values"
@@ -195,19 +196,21 @@ const wrapperClass = computed(() => {
       :attribute-regex="attribute.regex_pattern"
       :regex-cue="attribute.regex_cue"
       :contact-id="contactId"
-      class="border-b border-solid border-n-weak/50 dark:border-n-weak/90"
       @update="onUpdate"
       @delete="onDelete"
       @copy="onCopy"
     />
     <p
       v-if="!displayedAttributes.length && emptyStateMessage"
-      class="p-3 text-center"
+      class="p-3 text-center last:rounded-b-lg"
     >
       {{ emptyStateMessage }}
     </p>
     <!-- Show more and show less buttons show it if the filteredAttributes length is greater than 5 -->
-    <div v-if="filteredAttributes.length > 5" class="flex px-2 py-2">
+    <div
+      v-if="filteredAttributes.length > 5"
+      class="flex px-2 py-2 last:rounded-b-lg"
+    >
       <woot-button
         size="small"
         :icon="showAllAttributes ? 'chevron-up' : 'chevron-down'"