feat: reduced toolbars height to the header height

Author: Akryum

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"

packages/app-frontend/src/features/components/ComponentsInspector.vue

@@ -241,7 +241,7 @@ export default defineComponent({
 .search {
   >>> {
     .input {
-      height: 39px !important;
+      height: 32px !important;
     }
 
     .content {

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="[]"

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">

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

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>

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>