From 3fa04ed9d35edd62e03230552747dd2071c6ce87 Mon Sep 17 00:00:00 2001
From: Guillaume Chau <guillaume.b.chau@gmail.com>
Date: Fri, 20 Jan 2023 15:59:54 +0100
Subject: [PATCH] feat: reduced toolbars height to the header height

---
 packages/app-frontend/src/features/apps/AppSelectPane.vue   | 2 +-
 .../src/features/components/ComponentsInspector.vue         | 2 +-
 .../src/features/components/SelectedComponentPane.vue       | 2 +-
 packages/app-frontend/src/features/header/AppHeader.vue     | 2 +-
 .../src/features/inspector/custom/CustomInspector.vue       | 4 ++--
 .../inspector/custom/CustomInspectorSelectedNodePane.vue    | 2 +-
 .../src/features/timeline/TimelineEventInspector.vue        | 6 +++---
 7 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/app-frontend/src/features/apps/AppSelectPane.vue b/packages/app-frontend/src/features/apps/AppSelectPane.vue
index d8a7f64d2..1326329fe 100644
--- a/packages/app-frontend/src/features/apps/AppSelectPane.vue
+++ b/packages/app-frontend/src/features/apps/AppSelectPane.vue
@@ -79,7 +79,7 @@ export default defineComponent({
 
 <template>
   <div class="flex flex-col">
-    <div class="flex-none border-b border-gray-200 dark:border-gray-800 flex items-center space-x-1 h-[40px] pr-1">
+    <div class="flex-none border-b border-gray-200 dark:border-gray-800 flex items-center space-x-1 h-8 pr-1 box-content">
       <VueInput
         v-model="search"
         icon-left="search"
diff --git a/packages/app-frontend/src/features/components/ComponentsInspector.vue b/packages/app-frontend/src/features/components/ComponentsInspector.vue
index 9e44129d5..af45ccfdf 100644
--- a/packages/app-frontend/src/features/components/ComponentsInspector.vue
+++ b/packages/app-frontend/src/features/components/ComponentsInspector.vue
@@ -241,7 +241,7 @@ export default defineComponent({
 .search {
   >>> {
     .input {
-      height: 39px !important;
+      height: 32px !important;
     }
 
     .content {
diff --git a/packages/app-frontend/src/features/components/SelectedComponentPane.vue b/packages/app-frontend/src/features/components/SelectedComponentPane.vue
index d11d93053..f6902b5ef 100644
--- a/packages/app-frontend/src/features/components/SelectedComponentPane.vue
+++ b/packages/app-frontend/src/features/components/SelectedComponentPane.vue
@@ -72,7 +72,7 @@ export default defineComponent({
     v-if="data && sameApp"
     class="h-full flex flex-col relative"
   >
-    <div class="px-2 h-10 border-b border-gray-200 dark:border-gray-800 flex items-center flex-none">
+    <div class="px-2 h-8 box-content border-b border-gray-200 dark:border-gray-800 flex items-center flex-none">
       <VTooltip
         :shown="showCopiedName"
         :triggers="[]"
diff --git a/packages/app-frontend/src/features/header/AppHeader.vue b/packages/app-frontend/src/features/header/AppHeader.vue
index 26ab817ef..e50f4d0f3 100644
--- a/packages/app-frontend/src/features/header/AppHeader.vue
+++ b/packages/app-frontend/src/features/header/AppHeader.vue
@@ -95,7 +95,7 @@ export default defineComponent({
 </script>
 
 <template>
-  <div class="flex items-center space-x-2 px-2 h-8">
+  <div class="flex items-center space-x-2 px-2 h-8 box-content">
     <AppHistoryNav />
 
     <template v-if="showAppsSelector">
diff --git a/packages/app-frontend/src/features/inspector/custom/CustomInspector.vue b/packages/app-frontend/src/features/inspector/custom/CustomInspector.vue
index 5b593d8b9..790a3b5b6 100644
--- a/packages/app-frontend/src/features/inspector/custom/CustomInspector.vue
+++ b/packages/app-frontend/src/features/inspector/custom/CustomInspector.vue
@@ -88,12 +88,12 @@ export default defineComponent({
     >
       <template #left>
         <div class="flex flex-col h-full">
-          <div class="border-b border-gray-200 dark:border-gray-800 flex items-center pr-2">
+          <div class="border-b border-gray-200 dark:border-gray-800 flex items-center pr-2 h-8 box-content">
             <VueInput
               v-model="inspector.treeFilter"
               icon-left="search"
               :placeholder="inspector.treeFilterPlaceholder || 'Search...'"
-              class="search flat min-w-0 flex-1"
+              class="search flat min-w-0 flex-1 mr-2"
             />
 
             <PluginSourceIcon
diff --git a/packages/app-frontend/src/features/inspector/custom/CustomInspectorSelectedNodePane.vue b/packages/app-frontend/src/features/inspector/custom/CustomInspectorSelectedNodePane.vue
index d77b9f374..0ca8c0ee2 100644
--- a/packages/app-frontend/src/features/inspector/custom/CustomInspectorSelectedNodePane.vue
+++ b/packages/app-frontend/src/features/inspector/custom/CustomInspectorSelectedNodePane.vue
@@ -67,7 +67,7 @@ export default defineComponent({
     v-if="inspector.selectedNode"
     class="h-full flex flex-col"
   >
-    <div class="px-2 h-10 border-b border-gray-200 dark:border-gray-800 flex items-center flex-none">
+    <div class="px-2 h-8 box-content border-b border-gray-200 dark:border-gray-800 flex items-center flex-none">
       <div>
         {{ inspector.selectedNode.label }}
       </div>
diff --git a/packages/app-frontend/src/features/timeline/TimelineEventInspector.vue b/packages/app-frontend/src/features/timeline/TimelineEventInspector.vue
index 3423f6004..af6f223ea 100644
--- a/packages/app-frontend/src/features/timeline/TimelineEventInspector.vue
+++ b/packages/app-frontend/src/features/timeline/TimelineEventInspector.vue
@@ -52,7 +52,7 @@ export default defineComponent({
     v-if="inspectedEvent && inspectedEventState"
     class="flex flex-col h-full"
   >
-    <div class="header flex-none flex items-center border-b border-gray-200 dark:border-gray-800 p-2 pl-3 text-bluegray-900 dark:text-bluegray-100 space-x-2">
+    <div class="header flex-none flex items-center border-b border-gray-200 dark:border-gray-800 px-2 pl-3 h-8 box-content text-bluegray-900 dark:text-bluegray-100 space-x-2">
       <div
         class="flex-none w-2.5 h-2.5 rounded-full border-2"
         :style="{
@@ -90,10 +90,10 @@ export default defineComponent({
         />
       </span>
 
-      <span class="event-time flex-none flex items-center space-x-0.5 text-2xs font-mono px-2 py-1 rounded-full border border-gray-100 dark:border-gray-900 text-bluegray-700 dark:text-bluegray-300">
+      <span class="event-time flex-none flex items-center space-x-0.5 text-2xs font-mono px-1.5 py-0.5 rounded-full bg-bluegray-100 dark:bg-bluegray-900 text-bluegray-700 dark:text-bluegray-300">
         <VueIcon
           icon="schedule"
-          class="w-3 h-3 opacity-50"
+          class="w-3 h-3 opacity-75"
         />
         <span>{{ time }}</span>
       </span>