Improve layouts

pvc-vue/src/App.vue

@@ -219,7 +219,7 @@ onUnmounted(() => {
 
 .main-content {
   margin-left: 250px;
-  padding: 1rem;
+  padding: 0.5rem;
   width: calc(100% - 250px);
   min-height: 100vh;
   transition: all 0.3s ease;
@@ -233,12 +233,12 @@ onUnmounted(() => {
 .content-grid {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: 0.5rem;
 }
 
 .overview-row {
   display: grid;
-  gap: 1rem;
+  gap: 0.5rem;
   grid-template-columns: 2fr 3fr;
 }
 

pvc-vue/src/components/ClusterOverview.vue

@@ -214,7 +214,7 @@ const healthChartOptions = {
 .overview-container {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: 0.5rem;
   height: 100%;
 }
 
@@ -228,7 +228,7 @@ const healthChartOptions = {
 .health-content {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: 0.5rem;
   min-height: 300px;
   height: auto;
   width: 100%;
@@ -244,8 +244,8 @@ const healthChartOptions = {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  background: rgba(255, 255, 255, 0.9);
-  padding: 1rem;
+  background: rgba(255, 255, 255, 0.5);
+  padding: 0.25rem 0.5rem;
   border-radius: 0.5rem;
   box-shadow: 0 0 10px rgba(0,0,0,0.05);
   z-index: 2;
@@ -255,10 +255,11 @@ const healthChartOptions = {
   font-size: 2.5rem;
   margin: 0;
   text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
+  line-height: 1;
 }
 
 .health-messages {
-  padding: 1rem;
+  padding: 0.5rem;
   background: rgba(0, 0, 0, 0.02);
   border-radius: 0.25rem;
   flex-grow: 1;
@@ -267,7 +268,7 @@ const healthChartOptions = {
 .messages-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 0.5rem;
+  gap: 0.25rem;
 }
 
 .health-message {
@@ -343,7 +344,7 @@ const healthChartOptions = {
 .metrics-row {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  gap: 1rem;
+  gap: 0.5rem;
 }
 
 .metric-card {
@@ -369,4 +370,16 @@ const healthChartOptions = {
     grid-template-columns: 1fr;
   }
 }
+
+.card-body {
+  padding: 0.5rem;
+}
+
+.card-subtitle {
+  margin-bottom: 0.5rem !important;
+}
+
+.metric-card .card-body {
+  padding: 0.5rem;
+}
 </style>

pvc-vue/src/components/MetricsCharts.vue

@@ -176,14 +176,28 @@ const storageChartData = computed(() => ({
   grid-column: 1 / -1;  /* Make metrics card span full width */
 }
 
+.card-header {
+  padding: 0.5rem;
+}
+
+.card-body {
+  padding: 0.5rem;
+}
+
+.card-title {
+  margin-bottom: 0.5rem;
+}
+
 .metrics-grid {
   display: grid;
-  gap: 1rem;
+  gap: 0.5rem;
   grid-template-columns: repeat(3, 1fr);
+  margin: 0;  /* Remove any default margins */
 }
 
 .metric-item {
   min-height: 250px;
+  padding: 0;  /* Remove any default padding */
 }
 
 @media (max-width: 1400px) {

pvc-vue/src/components/NodeStatus.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="card mb-4">
+  <div class="card">
     <div class="card-header">
       <h5 class="mb-0">Node Overview</h5>
     </div>
     <div class="card-body">
       <div class="row">
         <template v-for="node in nodeData" :key="node.name">
-          <div class="col-md-4 mb-3">
+          <div class="col-md-4 node-wrapper">
             <div class="card">
               <div class="card-body">
                 <h5 class="card-title">{{ node.name }}</h5>
@@ -79,7 +79,19 @@ const formatMemory = (node) => {
 <style scoped>
 .card-title {
   font-size: 1.1rem;
-  margin-bottom: 0.75rem;
+  margin-bottom: 0.5rem;
+}
+
+.card-body {
+  padding: 0.5rem;
+}
+
+.row {
+  margin: -0.25rem;  /* Compensate for node-wrapper padding */
+}
+
+.node-wrapper {
+  padding: 0.25rem;  /* Half of our standard gap to create 0.5rem between cards */
 }
 
 .card-text {