fix: Remove overflow-hidden on accordionItem (#10692)

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>
This commit is contained in:
Pranav
2025-01-15 11:59:20 -08:00
committed by GitHub
parent 7469cde0b9
commit e3b5b30666
3 changed files with 9 additions and 6 deletions

View File

@@ -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 />

View File

@@ -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;

View File

@@ -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'"