fix(#5307): make the LineChart component have a proper parent width (#5346)

Co-authored-by: Stephan Köninger <stephan.koeninger@codecentric.de>

Author: cdprete

spring-boot-admin-server-ui/src/main/frontend/views/instances/details/LineChart.vue

@@ -15,7 +15,9 @@
   -->
 
 <template>
-  <canvas id="chart" ref="chart" />
+  <div class="chart-container">
+    <canvas id="chart" ref="chart" />
+  </div>
 </template>
 
 <script>
@@ -115,6 +117,8 @@ export default {
         datasets,
       },
       options: {
+        responsive: true,
+        maintainAspectRatio: false,
         animation: {
           duration: 0,
         },
@@ -192,3 +196,13 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.chart-container {
+  position: relative;
+  width: 100%;
+  min-height: 300px;
+  max-height: 450px;
+  height: 100%;
+}
+</style>

spring-boot-admin-server-ui/src/main/frontend/views/instances/details/index.vue

@@ -21,44 +21,44 @@
       <details-hero :instance="instance" />
     </template>
 
-    <div class="flex gap-6 flex-col lg:flex-row">
-      <div class="flex-1">
+    <div class="instance-grid">
+      <div>
         <details-info v-if="hasInfo" :instance="instance" />
         <details-metadata v-if="hasMetadata" :instance="instance" />
       </div>
-      <div class="flex-1">
+      <div>
         <details-health :instance="instance" />
       </div>
     </div>
 
-    <div class="flex gap-6 flex-col lg:flex-row">
-      <div class="flex-1">
+    <div class="instance-grid">
+      <div>
         <details-process
           v-if="hasProcess"
           :instance="instance"
           class="break-inside-avoid"
         />
         <details-gc v-if="hasGc" :instance="instance" />
       </div>
-      <div class="flex-1">
+      <div>
         <details-threads v-if="hasThreads" :instance="instance" />
       </div>
     </div>
 
-    <div class="flex gap-6 flex-col lg:flex-row">
-      <div class="flex-1">
+    <div class="instance-grid">
+      <div>
         <details-memory v-if="hasMemory" :instance="instance" type="heap" />
       </div>
-      <div class="flex-1">
+      <div>
         <details-memory v-if="hasMemory" :instance="instance" type="nonheap" />
       </div>
     </div>
 
-    <div class="flex gap-6 flex-col lg:flex-row">
-      <div class="flex-1">
+    <div class="instance-grid">
+      <div>
         <details-datasources v-if="hasDatasources" :instance="instance" />
       </div>
-      <div class="flex-1">
+      <div>
         <details-caches v-if="hasCaches" :instance="instance" />
       </div>
     </div>
@@ -204,3 +204,11 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+@reference "../../../index.css";
+
+.instance-grid {
+  @apply grid grid-cols-1 lg:grid-cols-2 gap-4;
+}
+</style>

spring-boot-admin-server-ui/src/main/frontend/views/instances/details/instance-switcher.vue

@@ -107,6 +107,3 @@ export default {
   },
 };
 </script>
-
-<style scoped></style>
-@reference "../../../index.css";