From 369609b01d5244d0526512b734fddf5f9c51edc1 Mon Sep 17 00:00:00 2001
From: gappc <gapp.christian@gmail.com>
Date: Thu, 16 Jan 2025 13:07:07 +0100
Subject: [PATCH] Improve dataset header visualization

---
 .../datasets/ui/header/DatasetHeader.vue      |  5 ++-
 .../ui/header/DatasetHeaderMoreInfoPopup.vue  |  2 +-
 .../ui/header/DatasetHeaderOverlay.vue        | 36 +++++++++----------
 .../ui/header/DatasetHeaderSearch.vue         |  4 ++-
 4 files changed, 23 insertions(+), 24 deletions(-)

diff --git a/databrowser/src/domain/datasets/ui/header/DatasetHeader.vue b/databrowser/src/domain/datasets/ui/header/DatasetHeader.vue
index ef8682c3..805b7825 100644
--- a/databrowser/src/domain/datasets/ui/header/DatasetHeader.vue
+++ b/databrowser/src/domain/datasets/ui/header/DatasetHeader.vue
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
 <template>
-  <header class="flex flex-wrap items-center py-2 text-xs md:py-0">
+  <header class="flex flex-wrap items-center py-2 gap-2">
     <!-- Dataset title -->
     <div
       class="flex items-center justify-between"
@@ -35,7 +35,6 @@ SPDX-License-Identifier: AGPL-3.0-or-later
       :picked="source"
       :class="{
         'animate-pulse rounded outline outline-green-500': !hasConfig,
-        'mr-2': true,
       }"
       @picked-change="changeSource($event)"
     />
@@ -65,7 +64,6 @@ SPDX-License-Identifier: AGPL-3.0-or-later
     <TagCustom
       v-if="source === 'generated'"
       :text="t('datasets.header.viewGeneratedConfig')"
-      class="ml-1"
       size="xs"
       type="yellow"
       has-dot
@@ -106,6 +104,7 @@ import InputSearch from '../../../../components/input/InputSearch.vue';
 import SelectCustom from '../../../../components/select/SelectCustom.vue';
 import {
   GroupSelectOption,
+  SelectSize,
   SelectValue,
 } from '../../../../components/select/types';
 import {
diff --git a/databrowser/src/domain/datasets/ui/header/DatasetHeaderMoreInfoPopup.vue b/databrowser/src/domain/datasets/ui/header/DatasetHeaderMoreInfoPopup.vue
index 44723545..a65d4fb5 100644
--- a/databrowser/src/domain/datasets/ui/header/DatasetHeaderMoreInfoPopup.vue
+++ b/databrowser/src/domain/datasets/ui/header/DatasetHeaderMoreInfoPopup.vue
@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
   <PopoverCustom>
     <template #trigger>
       <PopoverCustomButton
-        class="mr-2 flex size-9 items-center justify-center border"
+        class="flex size-9 items-center justify-center border"
         :class="buttonClasses"
       >
         <IconInfo class="stroke-current text-dialog" />
diff --git a/databrowser/src/domain/datasets/ui/header/DatasetHeaderOverlay.vue b/databrowser/src/domain/datasets/ui/header/DatasetHeaderOverlay.vue
index 57e5bd9b..dfc2818c 100644
--- a/databrowser/src/domain/datasets/ui/header/DatasetHeaderOverlay.vue
+++ b/databrowser/src/domain/datasets/ui/header/DatasetHeaderOverlay.vue
@@ -5,30 +5,28 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
 <template>
-  <div
-    class="pointer-events-all inset-0"
-    :class="{
-      'fixed z-50 bg-dialog/60 md:static md:bg-transparent': active,
-    }"
-    @click="$emit('overlayClick')"
-  ></div>
+  <div>
+    <div
+      class="pointer-events-all inset-0"
+      :class="{
+        'fixed z-50 bg-dialog/60 md:static md:bg-transparent': active,
+      }"
+      @click="$emit('overlayClick')"
+    ></div>
 
-  <div
-    :class="{
-      'inset-x-0 top-0 z-[60] bg-white max-md:absolute': active,
-      'px-2 py-3': padded,
-    }"
-    @click.stop="null"
-  >
-    <slot></slot>
+    <div
+      :class="{
+        'absolute inset-x-0 top-0 z-[60] bg-white p-2': active,
+      }"
+      @click.stop="null"
+    >
+      <slot></slot>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-defineProps<{
-  active?: boolean;
-  padded?: boolean;
-}>();
+defineProps<{ active?: boolean }>();
 
 defineEmits(['overlayClick']);
 </script>
diff --git a/databrowser/src/domain/datasets/ui/header/DatasetHeaderSearch.vue b/databrowser/src/domain/datasets/ui/header/DatasetHeaderSearch.vue
index 94ef09cd..b6a6cee0 100644
--- a/databrowser/src/domain/datasets/ui/header/DatasetHeaderSearch.vue
+++ b/databrowser/src/domain/datasets/ui/header/DatasetHeaderSearch.vue
@@ -7,7 +7,8 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 <template>
   <ButtonCustom
     variant="ghost"
-    class="flex h-9 w-12 items-center justify-center border-none bg-gray-50 !px-0 md:hidden"
+    :size="Size.xs"
+    class="flex h-9 w-10 items-center justify-center bg-gray-50 md:hidden"
     @click="emit('open', true)"
   >
     <IconSearch />
@@ -16,6 +17,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 
 <script setup lang="ts">
 import ButtonCustom from '../../../../components/button/ButtonCustom.vue';
+import { Size } from '../../../../components/button/types';
 import IconSearch from '../../../../components/svg/IconSearch.vue';
 
 const emit = defineEmits(['open']);