Add an explicit button to load disk usage details

dashboard/src/components/DiskUsageItem.vue

@@ -1,5 +1,6 @@
 <script setup>
 
+import { Button } from '@cloudron/pankow';
 import { prettyDecimalSize } from '@cloudron/pankow/utils';
 import SystemModel from '../models/SystemModel.js';
 
@@ -170,7 +171,7 @@ async function onExpand() {
 </script>
 
 <template>
-  <div class="disk-item" :style="{ cursor: isExpanded ? null : 'pointer' }" @click="onExpand()">
+  <div class="disk-item">
     <div class="disk-item-title">{{ filesystem.mountpoint }}</div>
     <div>{{ filesystem.type }}</div>
     <div class="usage-label">
@@ -184,9 +185,12 @@ async function onExpand() {
       <div class="disk-used disk-used-busy"></div>
     </div>
     <div class="disk-size" v-else>
-      <div class="disk-used" v-for="content in contents" :key="content.id" :style="{ 'background-color': content.color, width: 100*content.usage/filesystem.size + '%' }"></div>
+      <div class="disk-used" v-for="content in contents" :key="content.id" v-tooltip="content.id" :style="{ 'background-color': content.color, width: 100*content.usage/filesystem.size + '%' }"></div>
     </div>
-    <div v-if="isExpanded">
+    <div v-if="!isExpanded" style="text-align: center">
+      <Button plain @click="onExpand()">Details</Button>
+    </div>
+    <div v-else>
       <div v-if="percent < 100" style="text-align: center;">Calculating disk usage... {{ percent }}%</div>
       <div v-else>
         <table style="width: 100%">
@@ -241,8 +245,8 @@ async function onExpand() {
   display: flex;
   position: relative;
   background-color: white;
-  border-radius: calc(var(--pankow-border-radius) / 1.5);
-  height: 6px;
+  border-radius: var(--pankow-border-radius);
+  height: 12px;
   overflow: hidden;
 }
 
@@ -250,7 +254,11 @@ async function onExpand() {
   display: inline-block;
   background-color: var(--pankow-color-primary);
   white-space: nowrap;
-  height: 6px;
+  height: 12px;
+}
+
+.disk-used.highlight {
+  transform: scale(1.2);
 }
 
 .disk-used-busy::after {