chore: move margin outside of the popup component

src/components/list/partials/filter-popup.vue

@@ -16,10 +16,12 @@
 				{{ $t('filters.title') }}
 			</x-button>
 		</template>
-		<template #content>
+		<template #content="{isOpen}">
 			<filters
 				v-model="value"
 				ref="filters"
+				class="filter-popup"
+				:class="{'is-open': isOpen}"
 			/>
 		</template>
 	</popup>
@@ -84,3 +86,13 @@ export default {
 	},
 }
 </script>
+
+<style scoped lang="scss">
+.filter-popup {
+	margin: 0 !important;
+
+	&.is-open {
+		margin: 2rem 0 1rem !important;
+	}
+}
+</style>

src/components/misc/popup.vue

@@ -1,7 +1,7 @@
 <template>
 	<slot name="trigger" :isOpen="open" :toggle="toggle"></slot>
 	<div class="popup" :class="{'is-open': open}" ref="popup">
-		<slot name="content"/>
+		<slot name="content" :isOpen="open"/>
 	</div>
 </template>
 
@@ -45,12 +45,10 @@ onBeforeUnmount(() => {
 	overflow: hidden;
 	position: absolute;
 	top: 1rem;
-	margin: 0 !important;
 
 	&.is-open {
 		opacity: 1;
 		height: auto;
-		margin: 1rem 0 !important;
 	}
 }
 </style>

src/views/list/views/Table.vue

@@ -12,8 +12,8 @@
 							{{ $t('list.table.columns') }}
 						</x-button>
 					</template>
-					<template #content>
-						<card class="columns-filter">
+					<template #content="{isOpen}">
+						<card class="columns-filter" :class="{'is-open': isOpen}">
 							<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.id">#</fancycheckbox>
 							<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.done">
 								{{ $t('task.attributes.done') }}
@@ -320,4 +320,12 @@ export default {
 		}
 	}
 }
+
+.columns-filter {
+	margin: 0 !important;
+
+	&.is-open {
+		margin: 2rem 0 1rem !important;
+	}
+}
 </style>