From 412b61bb0b409194c81899c4e454b97a2e9fdf76 Mon Sep 17 00:00:00 2001
From: Cosimo Damiano Prete <nar92uto@gmail.com>
Date: Sat, 9 May 2026 08:47:50 +0200
Subject: [PATCH 1/2] fix(#5307): make the LineChart component have a proper
 parent width

---
 .../src/main/frontend/views/instances/details/LineChart.vue   | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/LineChart.vue b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/LineChart.vue
index 2cd690dbc0a..21828e919c8 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/LineChart.vue
+++ b/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="flex w-full">
+    <canvas id="chart" ref="chart" />
+  </div>
 </template>
 
 <script>

From d85a0e7e60e550c85fd8817654b604066d517c70 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stephan=20Ko=CC=88ninger?=
 <stephan.koeninger@codecentric.de>
Date: Fri, 15 May 2026 14:47:58 +0200
Subject: [PATCH 2/2] style: refactor layout and styles for instance details
 and LineChart component

---
 .../views/instances/details/LineChart.vue     | 14 +++++++-
 .../views/instances/details/index.vue         | 32 ++++++++++++-------
 .../instances/details/instance-switcher.vue   |  3 --
 3 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/LineChart.vue b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/LineChart.vue
index 21828e919c8..1c5026295b1 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/LineChart.vue
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/LineChart.vue
@@ -15,7 +15,7 @@
   -->
 
 <template>
-  <div class="flex w-full">
+  <div class="chart-container">
     <canvas id="chart" ref="chart" />
   </div>
 </template>
@@ -117,6 +117,8 @@ export default {
         datasets,
       },
       options: {
+        responsive: true,
+        maintainAspectRatio: false,
         animation: {
           duration: 0,
         },
@@ -194,3 +196,13 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.chart-container {
+  position: relative;
+  width: 100%;
+  min-height: 300px;
+  max-height: 450px;
+  height: 100%;
+}
+</style>
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/index.vue b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/index.vue
index 5ec26706690..690aa59a8d4 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/index.vue
+++ b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/index.vue
@@ -21,18 +21,18 @@
       <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"
@@ -40,25 +40,25 @@
         />
         <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>
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/instance-switcher.vue b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/instance-switcher.vue
index a9b05e6e347..e980dab7402 100644
--- a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/instance-switcher.vue
+++ b/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";