chore: improve assets display (#53)

Author: CoutinhoTTS

packages/devtools/src/app/app.vue

@@ -27,7 +27,7 @@ $connectToServer()
     v-else-if="!connectionInfo.connected"
     text="Connecting..."
   />
-  <div v-else>
+  <div v-else h-vh>
     <NuxtPage />
   </div>
 </template>

packages/devtools/src/app/components/assets/Folder.vue

@@ -21,7 +21,7 @@ const assetTree = computed(() => {
 </script>
 
 <template>
-  <div flex="~ gap-2">
+  <div flex="~ gap-2" p4>
     <DisplayTreeNode
       v-if="assets?.length"
       flex-1

packages/devtools/src/app/components/assets/List.vue

@@ -8,7 +8,7 @@ defineProps<{
 
 <template>
   <div p4>
-    <div flex="~ col gap-1">
+    <div flex="~ col gap-2">
       <template v-for="asset in assets" :key="asset.id">
         <NuxtLink
           :to="{ query: { asset: asset.filename } }"

packages/devtools/src/app/components/assets/Treemap.vue

@@ -224,12 +224,14 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <ChartAssetTreemap
-    v-if="graph"
-    :graph="graph"
-    :selected="nodeSelected"
-    @select="x => selectNode(x)"
-  />
+  <div p4>
+    <ChartAssetTreemap
+      v-if="graph"
+      :graph="graph"
+      :selected="nodeSelected"
+      @select="x => selectNode(x)"
+    />
+  </div>
   <div
     v-if="nodeHover?.meta"
     bg-glass fixed z-panel-nav border="~ base rounded" p2 text-sm