fix: styling

Author: antfu

components/ContentNavItem.vue

@@ -24,7 +24,7 @@ const paddingLeft = computed(() => `${0.5 + props.level * 0.8}rem`)
 </script>
 
 <template>
-  <div class="content-nav-item">
+  <div v-if="resolved" class="content-nav-item">
     <template v-if="resolved.children?.length">
       <details :open="route.path.includes(resolved.path)">
         <summary>
@@ -33,8 +33,8 @@ const paddingLeft = computed(() => `${0.5 + props.level * 0.8}rem`)
             hover="text-primary bg-active"
             :style="{ paddingLeft }"
           >
-            <div class="caret" i-ph-caret-right-duotone text-sm op50 transition duration-400 />
-            <div i-ph-folder-simple-duotone />
+            <div class="caret" i-ph-caret-right-duotone flex-none text-sm op50 transition duration-400 />
+            <div i-ph-folder-simple-duotone flex-none />
             <div ml1>
               {{ resolved.title }}
             </div>
@@ -60,8 +60,8 @@ const paddingLeft = computed(() => `${0.5 + props.level * 0.8}rem`)
       hover="text-primary bg-active "
       @click="ui.isContentDropdownShown = false"
     >
-      <div i-ph-caret-right-duotone class="caret" text-sm op0 />
-      <div i-ph-file-duotone />
+      <div class="caret" i-ph-caret-right-duotone flex-none text-sm op0 />
+      <div i-ph-file-duotone flex-none />
       <div ml1>
         {{ resolved.title }}
       </div>

components/PanelDocs.vue

@@ -96,7 +96,7 @@ router.beforeEach(() => {
 
 <template>
   <div grid="~ rows-[max-content_1fr]" relative h-full>
-    <div flex="~ gap-x-2 items-center wrap" border="b base dashed" bg-faded px4 py2>
+    <div flex="~ gap-x-2 gap-y-1 items-center wrap" border="b base dashed" bg-faded px4 py2>
       <div i-ph-book-duotone flex-none />
       <template v-for="bc, idx of breadcrumbs" :key="bc.path">
         <div v-if="idx !== 0" i-ph-caret-right mx--1 text-sm op50 />
@@ -105,7 +105,7 @@ router.beforeEach(() => {
         </NuxtLink>
       </template>
       <button
-        h-full flex-auto
+        h-1em flex-auto
         @click="ui.isContentDropdownShown = !ui.isContentDropdownShown"
       />
       <button

components/PanelEditor.vue

@@ -68,7 +68,7 @@ const panelInitEditor = computed(() => isMounted.value || {
           border="b base dashed"
           bg-faded px4 py2
         >
-          <div i-ph-tree-structure-duotone />
+          <div i-ph-tree-structure-duotone flex-none />
           <span text-sm>{{ $t('files') }}</span>
         </div>
         <div py2>