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:
@@ -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 />
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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'"
|
||||
|
||||
Reference in New Issue
Block a user