Unify and clean up position styling

pvc-vue/src/components/general/NodeSelectBar.vue

@@ -44,8 +44,7 @@ const selectNode = (node) => {
   gap: 0.5rem;
   background-color: white;
   border-radius: 0.25rem;
-  padding-top: 0.5rem;
-  margin-top: -1.25rem !important;
+  padding-top: 0.25rem;
   border-bottom: 1px solid rgba(0, 0, 0, 0.125);
 }
 
@@ -75,5 +74,7 @@ const selectNode = (node) => {
 .node-tab.active {
   color: #0d6efd;
   background-color: rgba(13, 110, 253, 0.1);
+  border-bottom: 4px solid rgba(13, 110, 253, 0.25);
+  margin-bottom: -4px;
 }
 </style> 

pvc-vue/src/components/general/PageTitle.vue

@@ -21,7 +21,6 @@ defineProps({
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 1rem;
   padding-bottom: 0.5rem;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }

pvc-vue/src/components/general/VMSearchBar.vue

@@ -618,8 +618,7 @@ const loadFiltersFromLocalStorage = () => {
   gap: 0.5rem;
   background-color: white;
   border-radius: 0.25rem;
-  padding-top: 0.5rem;
-  margin-top: -1.25rem !important;
+  padding-top: 0.25rem;
   border-bottom: 1px solid rgba(0, 0, 0, 0.125);
 }
 

pvc-vue/src/components/pages/nodes/NodeOverview.vue

@@ -1,5 +1,4 @@
 <template>
-  <div class="overview-container">
   <NodeSelectBar
     v-model="selectedNode"
     :nodes="availableNodes"
@@ -7,7 +6,7 @@
   />
 
   <!-- Node Details -->
-    <div v-if="selectedNodeData" class="node-details">
+  <div v-if="selectedNodeData" class="content-container">
     <!-- Information Cards Section -->
     <CollapsibleSection title="Node Information" :initially-expanded="sections.info">
       <div class="info-row">
@@ -160,7 +159,6 @@
   <div v-else class="no-node-selected">
     <p>Select a node to view details</p>
   </div>
-  </div>
 </template>
 
 <script setup>
@@ -457,17 +455,11 @@ const handleNodeSelect = (node) => {
 
 <style scoped>
 /* Add these missing styles from the original Nodes.vue */
-.overview-container {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  width: 100%;
-}
-
 .content-container {
   background-color: white;
   border-radius: 0.25rem;
-  padding: 1rem;
+  width: 100%;
+  padding-top: 0.25rem;
 }
 
 .loading-container {

pvc-vue/src/components/pages/overview/ClusterOverview.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="overview-container">
+  <div class="content-container">
     <!-- Information Cards Section -->
     <CollapsibleSection title="Cluster Information" :initially-expanded="sections.info">
       <div class="metrics-row">
@@ -870,11 +870,12 @@ const isMaintenanceMode = computed(() => {
 </script>
 
 <style scoped>
-.overview-container {
+.content-container {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
   width: 100%;
+  padding-top: 0.25rem;
 }
 
 .metrics-row {

pvc-vue/src/components/pages/vms/VMOverview.vue

@@ -1,5 +1,4 @@
 <template>
-  <div class="overview-container">
   <VMSearchBar
     :key="`vm-search-${selectedVM}`"
     v-model="searchQuery"
@@ -113,7 +112,6 @@
       </div>
     </div>
   </div>
-  </div>
 </template>
 
 <script setup>
@@ -318,17 +316,12 @@ const formatStorage = (sizeGB) => {
 </script>
 
 <style scoped>
-.overview-container {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  width: 100%;
-}
-
 .content-container {
   background-color: white;
   border-radius: 0.25rem;
   padding: 1rem;
+  width: 100%;
+  padding-top: 0.25rem;
 }
 
 .loading-container {

pvc-vue/src/views/Nodes.vue

@@ -39,9 +39,4 @@ const props = defineProps({
   gap: 0.5rem;
   width: 100%;
 }
-
-/* Remove top margin from first child (usually PageTitle) */
-.content-grid > :first-child {
-  margin-top: 0 !important;
-}
 </style>

pvc-vue/src/views/VMs.vue

@@ -44,9 +44,4 @@ const props = defineProps({
   gap: 0.5rem;
   width: 100%;
 }
-
-/* Remove top margin from first child (usually PageTitle) */
-.content-grid > :first-child {
-  margin-top: 0 !important;
-}
 </style>