From 4ca93fcc9a5f94c43e7e2ecb6d8fe22e409e389a Mon Sep 17 00:00:00 2001
From: Joshua Boniface <joshuab@clearcable.ca>
Date: Sun, 2 Mar 2025 16:52:52 -0500
Subject: [PATCH] Further adjust spacing to be perfect

---
 .../src/components/general/NodeSelectBar.vue  |  4 ++--
 .../src/components/general/VMSearchBar.vue    | 16 ++++++++--------
 .../src/components/pages/vms/VMOverview.vue   | 19 ++++++++-----------
 3 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/pvc-vue/src/components/general/NodeSelectBar.vue b/pvc-vue/src/components/general/NodeSelectBar.vue
index d003f1e..5c8345e 100644
--- a/pvc-vue/src/components/general/NodeSelectBar.vue
+++ b/pvc-vue/src/components/general/NodeSelectBar.vue
@@ -44,7 +44,7 @@ const selectNode = (node) => {
   gap: 0.5rem;
   background-color: white;
   border-radius: 0.25rem;
-  padding: 1rem;
+  padding-top: 0.5rem;
   margin-top: -1.25rem !important;
   border-bottom: 1px solid rgba(0, 0, 0, 0.125);
 }
@@ -57,7 +57,7 @@ const selectNode = (node) => {
 }
 
 .node-tab {
-  padding: 0.375rem 0.75rem;
+  padding: 0.45rem 0.75rem;
   border: none;
   background: none;
   color: #495057;
diff --git a/pvc-vue/src/components/general/VMSearchBar.vue b/pvc-vue/src/components/general/VMSearchBar.vue
index e44910e..7b67366 100644
--- a/pvc-vue/src/components/general/VMSearchBar.vue
+++ b/pvc-vue/src/components/general/VMSearchBar.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="controls-bar" ref="controlsBar">
-    <div class="controls-row">
+  <div class="vm-selector-bar" ref="controlsBar">
+    <div class="vm-selector-row">
       <button 
         class="btn btn-outline-secondary list-toggle-btn" 
         @click="toggleList"
@@ -612,18 +612,18 @@ const loadFiltersFromLocalStorage = () => {
 </script>
 
 <style scoped>
-.controls-bar {
+.vm-selector-bar {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
   background-color: white;
   border-radius: 0.25rem;
-  padding: 1rem;
+  padding-top: 0.5rem;
   margin-top: -1.25rem !important;
   border-bottom: 1px solid rgba(0, 0, 0, 0.125);
 }
 
-.controls-row {
+.vm-selector-row {
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -702,7 +702,7 @@ const loadFiltersFromLocalStorage = () => {
   background-color: white;
   border-radius: 0.25rem;
   overflow: hidden;
-  margin-top: 0.5rem;
+  margin-top: -0.5rem;
   padding-bottom: 0.25rem;
 }
 
@@ -753,12 +753,12 @@ const loadFiltersFromLocalStorage = () => {
   z-index: 2 !important;
 }
 
-.controls-bar .vm-list-container .vm-list .vm-list-item.active {
+.vm-selector-bar .vm-list-container .vm-list .vm-list-item.active {
   background-color: rgba(13, 110, 253, 0.15) !important;
   position: relative !important;
 }
 
-.controls-bar .vm-list-container .vm-list .vm-list-item.active::before {
+.vm-selector-bar .vm-list-container .vm-list .vm-list-item.active::before {
   content: '';
   position: absolute !important;
   left: 0 !important;
diff --git a/pvc-vue/src/components/pages/vms/VMOverview.vue b/pvc-vue/src/components/pages/vms/VMOverview.vue
index b6cfc42..8acaf42 100644
--- a/pvc-vue/src/components/pages/vms/VMOverview.vue
+++ b/pvc-vue/src/components/pages/vms/VMOverview.vue
@@ -344,36 +344,33 @@ const formatStorage = (sizeGB) => {
   padding: 2rem;
 }
 
-.info-grid {
+.info-grid-general {
   display: grid;
-  gap: 1rem;
+  gap: 0.5rem;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 }
 
-.info-grid-2 {
+.info-grid-resources {
   display: grid;
-  gap: 1rem;
+  gap: 0.5rem;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 }
 
 .cards-stack {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: 0.5rem;
 }
 
 .detail-card {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 1rem;
-  padding: 1rem;
-  background-color: rgba(0, 0, 0, 0.02);
-  border-radius: 0.25rem;
+  gap: 0.5rem;
 }
 
 @media (max-width: 768px) {
-  .info-grid,
-  .info-grid-2 {
+  .info-grid-general,
+  .info-grid-resources {
     grid-template-columns: 1fr;
   }