fix(views): refactor filter button slot in wrapper

Before this change, the filter button on the top right was positioned using absolute positioning and plenty of tricks, which were brittle and not really maintainable. Now, the buttons are positioned using flexbox, which should make this a lot more maintainable.

frontend/src/components/input/button.vue

@@ -86,6 +86,7 @@ const showIconOnly = computed(() => icon !== '' && typeof slots.default === 'und
 	box-shadow: var(--shadow-sm);
 	display: inline-flex;
 	white-space: var(--button-white-space);
+	line-height: 1;
 
 	&:hover {
 		box-shadow: var(--shadow-md);

frontend/src/components/project/ProjectWrapper.vue

@@ -149,8 +149,14 @@ function getViewTitle(view: IProjectView) {
 
 <style lang="scss" scoped>
 .switch-view-container {
-	@media screen and (max-width: $tablet) {
+	min-height: $switch-view-height;
+	margin-bottom: 1rem;
+	
 	display: flex;
+	justify-content: space-between;
+	align-items: center;	
+	
+	@media screen and (max-width: $tablet) {
 		justify-content: center;
 		flex-direction: column;
 	}
@@ -162,8 +168,6 @@ function getViewTitle(view: IProjectView) {
 	border-radius: $radius;
 	font-size: .75rem;
 	box-shadow: var(--shadow-sm);
-	height: $switch-view-height;
-	margin: 0 auto 1rem;
 	padding: .5rem;
 }
 

frontend/src/components/project/views/ProjectGantt.vue

@@ -4,7 +4,7 @@
 		:project-id="filters.projectId"
 		:viewId
 	>
-		<template #header>
+		<template #default>
 			<card :has-content="false">
 				<div class="gantt-options">
 					<div class="field">
@@ -45,9 +45,7 @@
 					</Fancycheckbox>
 				</div>
 			</card>
-		</template>
 
-		<template #default>
 			<div class="gantt-chart-container">
 				<card
 					:has-content="false"

frontend/src/components/project/views/ProjectTable.vue

@@ -6,13 +6,13 @@
 	>
 		<template #header>
 			<div class="filter-container">
-				<div class="items">
 				<Popup>
 					<template #trigger="{toggle}">
 						<x-button
 							icon="th"
 							variant="secondary"
 							@click.prevent.stop="toggle()"
+							class="mr-2"
 						>
 							{{ $t('project.table.columns') }}
 						</x-button>
@@ -69,7 +69,6 @@
 				</Popup>
 				<FilterPopup v-model="params"/>
 			</div>
-			</div>
 		</template>
 
 		<template #default>
@@ -397,4 +396,8 @@ const taskDetailRoutes = computed(() => Object.fromEntries(
 	border: none;
 	box-shadow: none;
 }
+
+.filter-container :deep(.popup) {
+	top: 7rem;
+}
 </style>

frontend/src/styles/components/_index.scss

@@ -1,5 +1,4 @@
 @import "tooltip";
 @import "labels";
-@import "project";
 @import "task";
 @import "tasks";

frontend/src/styles/components/project.scss

@@ -1,77 +0,0 @@
-// FIXME: should be a component <FilterContainer>
-// used in
-// - Kanban.vue
-// - Project.vue
-// - Table.vue
-
-$filter-container-top-default: -59px;
-$filter-container-top-link-share-gantt: -133px;
-$filter-container-top-link-share-list: -47px;
-
-.filter-container {
-  text-align: right;
-  width: 100%;
-  min-width: 400px;
-  max-width: 180px;
-  position: absolute;
-  right: 1.5rem;
-  margin-top: $filter-container-top-default;
-  z-index: 4;
-
-  display: flex;
-  justify-content: flex-end;
-
-  .button:not(:last-of-type) {
-    margin-right: .5rem;
-  }
-
-  .button {
-    height: $switch-view-height;
-  }
-
-  .card {
-    text-align: left;
-  }
-
-  @media screen and (max-width: $tablet) {
-    position: static;
-    margin: 0 0 1rem 0 !important;
-    max-width: 100%;
-    min-width: auto;
-
-    .items {
-      justify-content: center;
-    }
-
-    .search {
-      width: 100%;
-
-      .control:first-child {
-        width: 100%;
-      }
-    }
-  }
-}
-
-
-.link-share-container .gantt-chart-container .filter-container,
-.gantt-chart-container .filter-container {
-  right: 0;
-  margin-top: calc(#{$filter-container-top-link-share-gantt - 2} - 7rem);
-}
-
-.link-share-container .gantt-chart-container .filter-container {
-  margin-top: calc(#{$filter-container-top-link-share-gantt} - 5rem);
-}
-
-.link-share-container .list-view .filter-container {
-  margin-top: $filter-container-top-link-share-list - 10px;
-}
-
-.link-share-container.project\.table-view,
-.link-share-container.project\.list-view {
-  .filter-container {
-    right: 9rem;
-    margin-top: $filter-container-top-default;
-  }
-}