Fix bug with VM name showing as filter

pvc-vue/src/assets/styles.css

@@ -1,368 +0,0 @@
-/* Global spacing adjustments */
-.content-grid {
-  gap: 0.25rem !important;
-}
-
-.main-content {
-  padding-top: 0.25rem;
-}
-
-/* Reduce space between page title and content */
-.content-grid > *:first-child + * {
-  margin-top: 0.375rem !important;
-}
-
-/* Target the specific space between title underline and first card */
-.content-grid > div:first-child {
-  margin-bottom: 0.375rem !important;
-}
-
-/* Reduce space after PageTitle component */
-.page-title {
-  margin-bottom: 0.25rem !important;
-}
-
-/* Remove left padding from node tabs */
-.nav-tabs {
-  padding-left: 0 !important;
-  margin-left: 0 !important;
-}
-
-/* Ensure node content aligns with left edge */
-.node-content, .tab-content {
-  padding-left: 0 !important;
-  margin-left: 0 !important;
-}
-
-/* Target the specific element causing the padding */
-div.node-tabs {
-  padding-left: 0 !important;
-  padding-right: 0 !important;
-}
-
-/* More aggressive targeting for node tabs */
-.node-overview .nav,
-.node-overview .nav-tabs,
-.node-overview ul.nav,
-.node-overview ul.nav-tabs {
-  padding-left: 0 !important;
-  margin-left: 0 !important;
-  border-left: 0 !important;
-}
-
-/* Target the first tab item specifically */
-.node-overview .nav-item:first-child,
-.node-overview .nav-link:first-child {
-  margin-left: 0 !important;
-  padding-left: 0 !important;
-}
-
-/* Target any container that might be wrapping the tabs */
-.node-overview > div,
-.node-overview > ul {
-  padding-left: 0 !important;
-  margin-left: 0 !important;
-}
-
-/* Style VM search bar section like node tabs */
-.vm-search-container,
-.vm-list-header,
-.vm-controls {
-  border: none !important;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.125) !important;
-  border-radius: 0 !important;
-  background-color: transparent !important;
-  padding: 0.5rem 0 !important;
-  margin-bottom: 1rem !important;
-}
-
-/* Remove any box shadow from VM search elements */
-.vm-search-container *,
-.vm-list-header *,
-.vm-controls * {
-  box-shadow: none !important;
-}
-
-/* Ensure search input has proper styling */
-.vm-search-input {
-  border: 1px solid rgba(0, 0, 0, 0.2) !important;
-  border-radius: 0.25rem !important;
-}
-
-/* Target the specific VM list controls more directly */
-.vm-overview .list-vms-container,
-.vm-overview .vm-controls-container {
-  border: none !important;
-  box-shadow: none !important;
-  background: transparent !important;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.125) !important;
-  border-radius: 0 !important;
-  padding-left: 0 !important;
-}
-
-/* Target the buttons and inputs directly */
-.vm-overview .btn-group,
-.vm-overview .input-group {
-  margin: 0 !important;
-  background: transparent !important;
-}
-
-/* Target the List VMs button specifically */
-.vm-overview .btn-secondary,
-.vm-overview button[type="button"] {
-  background-color: #6c757d !important;
-  border-color: #6c757d !important;
-}
-
-/* Super aggressive targeting for VM search container */
-.vm-list-container > div:first-child,
-.vm-overview > div:first-child,
-div[class*="vm-"] > div:first-child {
-  border: none !important;
-  background: transparent !important;
-  box-shadow: none !important;
-  border-radius: 0 !important;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.125) !important;
-  padding: 0.5rem 0 !important;
-}
-
-/* Target the actual search box and buttons */
-.input-group,
-.btn-group {
-  margin-bottom: 0 !important;
-}
-
-/* Target any card or container in the VM list header */
-.card,
-.card-header,
-.card-body {
-  /* Target only VM list cards, not ValueCards */
-  .vm-list-container .card,
-  .vm-list-container .card-header,
-  .vm-list-container .card-body,
-  .vm-controls-container .card,
-  .vm-controls-container .card-header,
-  .vm-controls-container .card-body {
-    border: none !important;
-    background: transparent !important;
-    box-shadow: none !important;
-    padding: 0.5rem 0 !important;
-  }
-}
-
-/* Target the specific vm-controls-container element */
-div.vm-controls-container {
-  background-color: transparent !important;
-  border-radius: 0 !important;
-  box-shadow: none !important;
-  padding: 0.5rem 0 !important;
-}
-
-/* Target the light blue background */
-div.vm-controls-container[data-v-8e678963] {
-  background-color: transparent !important;
-}
-
-/* Adjust spacing after page title on VM page */
-.vm-overview .page-title,
-.vm-overview .page-title-container {
-  margin-bottom: 0.05rem !important;
-}
-
-/* Ensure consistent spacing between title and controls */
-.vm-overview .content-grid > *:first-child + * {
-  margin-top: 0.05rem !important;
-}
-
-/* Remove lines under VM names */
-.vm-list-item,
-.vm-item {
-  border-bottom: none !important;
-}
-
-/* Ensure only the controls container has the bottom border */
-.vm-list-container > div:not(:first-child),
-.vm-overview > div:not(:first-child) {
-  border-bottom: none !important;
-}
-
-/* Further reduce spacing between title and controls */
-.content-grid > div:first-child {
-  margin-bottom: 0.05rem !important;
-}
-
-/* Extremely aggressive spacing reduction */
-.page-title + *,
-.page-title-container + * {
-  margin-top: 0 !important;
-}
-
-/* Specifically target VM list items to remove bottom borders */
-.vm-list > div,
-.vm-list-item,
-.vm-item,
-div[class*="vm-list"] > div {
-  border-bottom: none !important;
-  border: none !important;
-}
-
-/* Target the VM list container to remove any borders from its children except the first */
-.vm-list-container > div:not(:first-child) *,
-.vm-overview > div:not(:first-child) * {
-  border-bottom: none !important;
-}
-
-/* Zero out all margins between title and controls */
-.page-title,
-.page-title-container,
-.content-grid > div:first-child {
-  margin-bottom: 0 !important;
-}
-
-/* Reduce padding above the VM controls container */
-div.vm-controls-container,
-.vm-list-container > div:first-child {
-  margin-top: 0.05rem !important;
-  padding-top: 0 !important;
-}
-
-/* Fix double border issue - ensure only one border appears below search */
-.vm-list-container > div:first-child,
-.vm-overview > div:first-child,
-div[class*="vm-"] > div:first-child {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.125) !important;
-}
-
-/* Remove ALL borders from VM list items - extremely aggressive */
-.vm-list-container .vm-list-item,
-.vm-list-container .vm-item,
-.vm-list-container li,
-.vm-list-container tr,
-.vm-list-container div[class*="vm-"],
-.vm-list > div,
-.vm-list > li,
-.vm-list > tr,
-.vm-list-item,
-.vm-item,
-div[class*="vm-list"] > div,
-div[class*="vm-list"] div {
-  border: none !important;
-  border-bottom: none !important;
-  border-top: none !important;
-  border-left: none !important;
-  border-right: none !important;
-}
-
-/* Ensure VM list container itself doesn't have a border */
-.vm-list-container {
-  border: none !important;
-}
-
-/* Target the actual VM list to remove borders */
-.vm-list {
-  border: none !important;
-}
-
-/* Override any hr elements that might be creating lines */
-.vm-list-container hr,
-.vm-list hr,
-.vm-item + hr,
-.vm-list-item + hr {
-  display: none !important;
-}
-
-/* Single border under search bar */
-.vm-controls-container {
-  border: none !important;
-  background: transparent !important;
-}
-
-/* Target VM list items specifically */
-.vm-list-container .vm-list-item {
-  border: none !important;
-  background: transparent !important;
-  padding-top: 0.25rem !important;
-  padding-bottom: 0.25rem !important;
-}
-
-/* Target the VM item content to reduce spacing */
-.vm-item-content,
-.vm-list-item > div,
-button.vm-list-item {
-  padding-top: 0.25rem !important;
-  padding-bottom: 0.25rem !important;
-}
-
-/* Also target any nested content */
-.vm-name,
-.vm-status {
-  padding-top: 0.25rem !important;
-  padding-bottom: 0.25rem !important;
-}
-
-/* Remove any dividers between VM items */
-.vm-list-container .divider,
-.vm-list-container hr,
-.vm-list-item::after,
-.vm-list-item::before {
-  display: none !important;
-}
-
-/* Adjust spacing between title and search */
-.page-title + .vm-controls-container {
-  margin-top: 0 !important;
-}
-
-/* Let's also clean up any duplicate rules */
-.controls-row {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.125) !important;
-}
-
-/* Remove border from vm-name elements */
-.vm-name {
-  border: none !important;
-  border-bottom: none !important;
-}
-
-/* Target both instances of the border */
-div[class*="vm-"] > div:first-child div[class*="vm-"] > div:first-child,
-.vm-list-container > div:first-child div[class*="vm-"] > div:first-child {
-  border: none !important;
-  border-bottom: none !important;
-}
-
-/* Super specific targeting for the border issue */
-div[class*="vm-"] > div:first-child H {
-  border: none !important;
-  border-bottom: none !important;
-}
-
-/* Keep node tabs close to title but adjust content below tabs */
-.node-overview .node-tabs-wrapper {
-  margin-top: 0.25rem !important;
-}
-
-/* Adjust spacing below tabs to match overview spacing */
-.node-overview .node-tabs-wrapper + * {
-  margin-top: 0.375rem !important;
-}
-
-/* Ensure consistent spacing in overview page */
-.overview-container > *:first-child {
-  margin-top: 0.375rem !important;
-}
-
-/* Override spacing specifically for node tabs - keep tight to title */
-.node-overview .content-grid > *:first-child + * {
-  margin-top: 0.25rem !important;  /* Keep tabs close to title */
-}
-
-/* Adjust spacing between tabs and content below */
-.node-overview .node-tabs-wrapper {
-  margin-bottom: 0.375rem !important;  /* Match overview spacing */
-}
-
-/* Remove any extra spacing that might be added by other elements */
-.node-overview .node-details {
-  margin-top: 0 !important;
-}

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

@@ -4,7 +4,7 @@
     <div v-if="!isExpanded" class="section-content-wrapper">
       <div class="section-content">
         <div class="collapsed-section-header">
-          <h6 class="card-title mb-0 metric-label">{{ title }}</h6>
+          <h5 class="section-title" v-if="title">{{ title }}</h5>
         </div>
       </div>
       <div class="toggle-column">
@@ -137,4 +137,19 @@ const toggleSection = () => {
 .section-container.collapsed .section-content-wrapper {
   margin-bottom: 0;
 }
+
+.section-header h6 {
+  font-size: 0.95rem;
+  font-weight: 600;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.section-title {
+  margin: 0;
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: #495057;
+}
 </style> 

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

@@ -1,5 +1,6 @@
 <template>
   <div class="node-select-bar">
+    <div class="node-select-row">
       <button
         v-for="node in nodes"
         :key="node"
@@ -10,10 +11,11 @@
         {{ node }}
       </button>
     </div>
+  </div>
 </template>
 
 <script setup>
-import { defineProps, defineEmits } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 
 const props = defineProps({
   modelValue: {
@@ -24,31 +26,70 @@ const props = defineProps({
     type: Array,
     required: true,
     default: () => []
+  },
+  value: {
+    type: String,
+    default: null
   }
 });
 
 const emit = defineEmits(['update:modelValue', 'select']);
 
+const selectedNode = ref(props.value || props.modelValue);
+
 const selectNode = (node) => {
+  selectedNode.value = node;
   emit('update:modelValue', node);
   emit('select', node);
+  
+  // Save to localStorage
+  localStorage.setItem('selectedNodeId', node);
 };
+
+onMounted(() => {
+  // Restore selected node from localStorage if available
+  const savedNodeId = localStorage.getItem('selectedNodeId');
+  if (savedNodeId && props.nodes.includes(savedNodeId)) {
+    // Only select if the node exists in the available nodes
+    selectedNode.value = savedNodeId;
+    emit('update:modelValue', savedNodeId);
+    emit('select', savedNodeId);
+  }
+});
+
+watch(() => props.value, (newValue) => {
+  if (newValue) {
+    selectedNode.value = newValue;
+  }
+});
+
+watch(() => props.modelValue, (newValue) => {
+  if (newValue) {
+    selectedNode.value = newValue;
+  }
+});
 </script>
 
 <style scoped>
 .node-select-bar {
   display: flex;
-  gap: 0.25rem;
+  flex-direction: column;
-  padding: 0.5rem;
+  gap: 0.5rem;
   background-color: white;
   border-radius: 0.25rem;
-  overflow-x: auto;
+  padding-top: 0.25rem;
   border-bottom: 1px solid rgba(0, 0, 0, 0.125);
-  margin-bottom: 0.5rem;
+}
+
+.node-select-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding-bottom: 0.75rem !important;
 }
 
 .node-tab {
-  padding: 0.375rem 0.75rem;
+  padding: 0.45rem 0.75rem;
   border: none;
   background: none;
   color: #495057;
@@ -66,5 +107,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

@@ -1,6 +1,6 @@
 <template>
-  <div class="controls-bar" ref="controlsBar">
+  <div class="vm-selector-bar" ref="controlsBar">
-    <div class="controls-row">
+    <div class="vm-selector-row">
       <button 
         class="btn btn-outline-secondary list-toggle-btn" 
         @click="toggleList"
@@ -27,9 +27,10 @@
           class="form-control search-input"
         >
         <button 
-          v-if="modelValue && showList && showClearButton" 
+          v-if="shouldShowClearButton"
           class="btn-clear" 
-          @click.stop="clearSearch"
+          @click.stop="handleClearButton"
+          :title="showList ? 'Clear search' : 'Clear selected VM'"
         >
           <i class="fas fa-times"></i>
         </button>
@@ -46,7 +47,7 @@
         </button>
         <div class="filter-menu" v-show="showFilterMenu" ref="filterMenu">
           <div class="filter-section">
-            <h6>Status</h6>
+            <h6>State</h6>
             <div class="filter-options-dropdown">
               <div class="filter-pills">
                 <button 
@@ -98,16 +99,20 @@
           :key="vm.name"
           :data-vm-name="vm.name"
           class="vm-list-item"
-          :class="{ 'active': selectedVM === vm.name || vmFromUrl === vm.name }"
+          :class="{ 'active': isVMSelected(vm.name) }"
           @click="handleVMSelect(vm)"
         >
-          <div v-if="selectedVM === vm.name || vmFromUrl === vm.name" class="active-indicator"></div>
+          <div v-if="isVMSelected(vm.name)" class="active-indicator"></div>
           <div class="vm-item-content">
             <div class="vm-name">{{ vm.name }}</div>
-            <div class="vm-status" :class="getStatusClass(vm.state)">
+            <div class="vm-state" :class="getStateClass(vm.state)">
-              <i class="fas fa-circle status-indicator"></i>
+              <i class="fas fa-circle state-indicator"></i>
               <span>{{ vm.state }}</span>
             </div>
+            <div v-if="vm.node" class="vm-node">
+              <i class="fas fa-server node-icon"></i>
+              <span>{{ vm.node }}</span>
+            </div>
           </div>
         </button>
       </div>
@@ -154,7 +159,8 @@ const emit = defineEmits([
   'toggle-list',
   'select-vm',
   'toggle-filter',
-  'reset-filters'
+  'reset-filters',
+  'clear-vm'
 ]);
 
 // UI state refs
@@ -175,30 +181,73 @@ const appliedFilters = ref({
   nodes: {}
 });
 
+// Add a computed property to determine if the clear button should be shown
+const shouldShowClearButton = computed(() => {
+  // Show when:
+  // 1. List is open and there's a search query
+  // 2. List is closed and there's a selected VM
+  return (props.showList && props.modelValue && props.showClearButton) || 
+         (!props.showList && (props.selectedVM || localStorage.getItem('selectedVMId')));
+});
+
+// Add a computed property to check if a VM is selected
+const isVMSelected = (vmName) => {
+  return props.selectedVM === vmName || 
+         props.vmFromUrl === vmName || 
+         localStorage.getItem('selectedVMId') === vmName;
+};
+
 // Initialize the component
 onMounted(() => {
   // Set up click outside handler
   document.addEventListener('click', handleClickOutside);
   
+  // Get the selected VM from localStorage
+  const savedVMId = localStorage.getItem('selectedVMId');
+  
   // Restore search text from localStorage if available
   const savedSearchText = localStorage.getItem('vmSearchText');
+  
+  // Initialize input value based on context
+  if (!props.showList) {
+    // If list is closed, show the selected VM name in the input
+    const effectiveVM = props.selectedVM || props.vmFromUrl || savedVMId;
+    if (effectiveVM) {
+      // Find the VM in the list to get its full name
+      const vm = props.vmList.find(v => v.name === effectiveVM);
+      if (vm) {
+        inputValue.value = vm.name;
+      } else {
+        inputValue.value = effectiveVM;
+      }
+    }
+  } else if (props.showList) {
+    // If list is open
+    if (props.modelValue) {
+      // If there's a model value, use it
+      inputValue.value = props.modelValue;
+      searchText.value = props.modelValue;
+    } else if (savedSearchText) {
+      // If there's saved search text, restore it
+      inputValue.value = savedSearchText;
+      searchText.value = savedSearchText;
+      emit('update:modelValue', savedSearchText);
+    }
+  }
+  
+  // Always restore the search text ref from localStorage
   if (savedSearchText) {
     searchText.value = savedSearchText;
   }
   
-  // Initialize input value based on selected VM
+  // Load saved filters
-  if (!props.showList && (props.selectedVM || props.vmFromUrl)) {
+  loadFiltersFromLocalStorage();
-    inputValue.value = props.selectedVM || props.vmFromUrl;
-  } else if (props.showList && props.modelValue) {
-    inputValue.value = props.modelValue;
-    searchText.value = props.modelValue;
-    // Save to localStorage
-    localStorage.setItem('vmSearchText', props.modelValue);
-  }
   
   // If the list is visible on mount, scroll to selected VM
-  if (props.showList && (props.selectedVM || props.vmFromUrl)) {
+  if (props.showList) {
+    nextTick(() => {
       scrollToSelectedVM();
+    });
   }
 });
 
@@ -210,14 +259,23 @@ onUnmounted(() => {
 const handleSearch = (event) => {
   const value = event.target.value;
   inputValue.value = value;
+  
+  // Update search text ref
   searchText.value = value;
-  isFilterActive.value = true;
-  
-  // Save search text to localStorage
-  localStorage.setItem('vmSearchText', value);
   
+  // Update the model
   emit('update:modelValue', value);
   emit('search', value);
+  
+  // Save to localStorage for search history
+  if (value) {
+    localStorage.setItem('vmSearchText', value);
+  } else {
+    localStorage.removeItem('vmSearchText');
+  }
+  
+  // Update filter state
+  isFilterActive.value = !!value;
 };
 
 // Handle focus on search input
@@ -260,60 +318,32 @@ const handleSearchClick = () => {
 
 // Toggle the VM list
 const toggleList = () => {
-  // If the list is already open, toggle filtering instead of closing
-  if (props.showList) {
-    // If we're in list mode (not filtering) and the button is clicked, close the drawer
-    if (!isFilterActive.value) {
-      // Save the current search text before closing
-      if (props.modelValue) {
-        searchText.value = props.modelValue;
-        // Save to localStorage
-        localStorage.setItem('vmSearchText', props.modelValue);
-      }
-      
-      // Close the drawer
   emit('toggle-list');
-      return;
-    }
   
-    // Toggle filtering mode
+  // When toggling the list, ensure search text is preserved
-    isFilterActive.value = !isFilterActive.value;
+  const savedSearchText = localStorage.getItem('vmSearchText');
   
-    // If we're turning filtering on, make sure the search text is applied
-    if (isFilterActive.value && searchText.value) {
-      inputValue.value = searchText.value;
-      emit('update:modelValue', searchText.value);
-    }
-    
-    // If we're turning filtering off (switching to list mode), scroll to selected VM
-    if (!isFilterActive.value) {
-      nextTick(() => {
-        scrollToSelectedVM();
-      });
-    }
-    
-    // No need to emit toggle-list since we're not closing the list
-    return;
-  }
-  
-  // If the list is closed, open it without filtering
   if (!props.showList) {
-    // If we're opening the list, deactivate filtering
+    // When opening the list, restore search text if available
-    isFilterActive.value = false;
+    if (savedSearchText && !inputValue.value) {
-    
-    // Restore search text in the input, but don't apply filtering
-    if (searchText.value) {
-      inputValue.value = searchText.value;
-      emit('update:modelValue', searchText.value);
-    }
-    
-    // Schedule scrolling to selected VM after the list opens
       nextTick(() => {
-      scrollToSelectedVM();
+        inputValue.value = savedSearchText;
+        searchText.value = savedSearchText;
+        emit('update:modelValue', savedSearchText);
       });
     }
+  }
+};
 
-  emit('toggle-list');
+// Handle clear button click
+const handleClearButton = () => {
+  if (props.showList) {
+    // If the list is open, clear the search
+    clearSearch();
+  } else {
+    // If the list is closed, clear the selected VM
+    clearSelectedVM();
+  }
 };
 
 // Clear search
@@ -328,8 +358,11 @@ const clearSearch = () => {
   emit('update:modelValue', '');
   emit('clear');
   
-  // Focus the search input after clearing
+  // Scroll to selected VM after clearing search
   nextTick(() => {
+    scrollToSelectedVM();
+    
+    // Focus the search input after clearing
     const searchInput = document.querySelector('.search-input');
     if (searchInput) {
       searchInput.focus();
@@ -337,10 +370,36 @@ const clearSearch = () => {
   });
 };
 
+// Clear selected VM
+const clearSelectedVM = () => {
+  // Clear the input value
+  inputValue.value = '';
+  
+  // Clear from localStorage
+  localStorage.removeItem('selectedVMId');
+  
+  // Don't clear vmSearchText - that's for search history
+  // Only clear if the input value matches the selected VM
+  const savedVMId = localStorage.getItem('selectedVMId');
+  const savedSearchText = localStorage.getItem('vmSearchText');
+  if (savedSearchText === savedVMId) {
+    localStorage.removeItem('vmSearchText');
+  }
+  
+  // Show the VM list
+  emit('toggle-list');
+  
+  // Emit event to parent component
+  emit('clear-vm');
+};
+
 // Select a VM
 const handleVMSelect = (vm) => {
   console.log('Selecting VM:', vm);
   
+  // Update the input value to show the selected VM
+  inputValue.value = vm.name;
+  
   // Save the current search text before selecting a VM
   if (props.modelValue) {
     searchText.value = props.modelValue;
@@ -348,6 +407,9 @@ const handleVMSelect = (vm) => {
     localStorage.setItem('vmSearchText', props.modelValue);
   }
   
+  // Save selected VM to localStorage
+  localStorage.setItem('selectedVMId', vm.name);
+  
   emit('select-vm', vm);
 };
 
@@ -377,6 +439,7 @@ const toggleFilterMenu = () => {
 // Filter toggle
 const handleFilterToggle = (type, value) => {
   appliedFilters.value[type][value] = !appliedFilters.value[type][value];
+  saveFiltersToLocalStorage();
 };
 
 // Reset filters
@@ -387,6 +450,7 @@ const handleResetFilters = () => {
   Object.keys(appliedFilters.value.nodes).forEach(node => {
     appliedFilters.value.nodes[node] = false;
   });
+  saveFiltersToLocalStorage();
   showFilterMenu.value = false;
 };
 
@@ -427,7 +491,24 @@ const availableStates = computed(() => {
   props.vmList.forEach(vm => {
     if (vm.state) states.add(vm.state);
   });
-  return Array.from(states).sort();
+  
+  // Convert to array and ensure all important states are included
+  const statesArray = Array.from(states);
+  const importantStates = ['start', 'disable', 'migrate', 'unmigrate', 'provision', 'mirror', 'stop', 'fail', 'shutdown', 'restart'];
+  
+  // Add any missing important states
+  importantStates.forEach(state => {
+    if (!statesArray.includes(state)) {
+      statesArray.push(state);
+    }
+  });
+  
+  // Sort with 'start' first, then alphabetically
+  return statesArray.sort((a, b) => {
+    if (a.toLowerCase() === 'start') return -1;
+    if (b.toLowerCase() === 'start') return 1;
+    return a.localeCompare(b);
+  });
 });
 
 // Calculate available nodes from vmList
@@ -454,6 +535,9 @@ watch([availableStates, availableNodes], ([states, nodes]) => {
       appliedFilters.value.nodes[node] = false;
     }
   });
+  
+  // Save updated filters
+  saveFiltersToLocalStorage();
 });
 
 // Count active filters
@@ -468,22 +552,46 @@ const activeFiltersCount = computed(() => {
   return count;
 });
 
-// Status class helper
+// Update function name from getStatusClass to getStateClass
-const getStatusClass = (state) => {
+const getStateClass = (state) => {
   if (!state) return 'status-unknown';
-  switch(state.toLowerCase()) {
+  
-    case 'start': return 'status-running';
+  const lowerState = state.toLowerCase();
-    case 'stop': return 'status-stopped';
+  
-    case 'disable': return 'status-paused';
+  // Green for running VMs
-    default: return 'status-unknown';
+  if (lowerState === 'start') {
+    return 'status-running';
   }
+  
+  // Blue for provisioning, migration, etc.
+  if (['disable', 'migrate', 'unmigrate', 'provision'].includes(lowerState)) {
+    return 'status-provisioning';
+  }
+  
+  // Purple for mirror
+  if (lowerState === 'mirror') {
+    return 'status-mirror';
+  }
+  
+  // Red for stopped or failed VMs
+  if (['stop', 'fail'].includes(lowerState)) {
+    return 'status-stopped';
+  }
+  
+  // Yellow for shutdown or restart
+  if (['shutdown', 'restart'].includes(lowerState)) {
+    return 'status-restarting';
+  }
+  
+  // Default to unknown (black) for any other states
+  return 'status-unknown';
 };
 
 // Watch for changes in showList
 watch(() => props.showList, (isVisible) => {
   if (!isVisible) {
     // When list is closed, show selected VM
-    const effectiveVM = props.selectedVM || props.vmFromUrl;
+    const effectiveVM = props.selectedVM || props.vmFromUrl || localStorage.getItem('selectedVMId');
     if (effectiveVM) {
       inputValue.value = effectiveVM;
       
@@ -513,7 +621,7 @@ watch(() => props.showList, (isVisible) => {
 // Watch for changes in selectedVM or vmFromUrl
 watch([() => props.selectedVM, () => props.vmFromUrl], ([selectedVM, vmFromUrl]) => {
   if (!props.showList) {
-    const effectiveVM = selectedVM || vmFromUrl;
+    const effectiveVM = selectedVM || vmFromUrl || localStorage.getItem('selectedVMId');
     if (effectiveVM) {
       inputValue.value = effectiveVM;
     }
@@ -523,31 +631,56 @@ watch([() => props.selectedVM, () => props.vmFromUrl], ([selectedVM, vmFromUrl])
 // Add a function to scroll to the selected VM
 const scrollToSelectedVM = () => {
   nextTick(() => {
-    const selectedVMName = props.selectedVM || props.vmFromUrl;
+    // Find the first selected VM
+    const selectedVMName = props.selectedVM || props.vmFromUrl || localStorage.getItem('selectedVMId');
     if (selectedVMName && vmListContainer.value) {
       const activeElement = vmListContainer.value.querySelector(`[data-vm-name="${selectedVMName}"]`);
       if (activeElement) {
+        // Scroll the element into view
         activeElement.scrollIntoView({ block: 'center', behavior: 'smooth' });
       }
     }
   });
 };
+
+// Add localStorage persistence for filters
+const saveFiltersToLocalStorage = () => {
+  localStorage.setItem('vmFilters', JSON.stringify(appliedFilters.value));
+};
+
+const loadFiltersFromLocalStorage = () => {
+  const savedFilters = localStorage.getItem('vmFilters');
+  if (savedFilters) {
+    try {
+      const parsedFilters = JSON.parse(savedFilters);
+      // Merge saved filters with current filters to handle new states/nodes
+      appliedFilters.value = {
+        states: { ...appliedFilters.value.states, ...parsedFilters.states },
+        nodes: { ...appliedFilters.value.nodes, ...parsedFilters.nodes }
+      };
+    } catch (e) {
+      console.error('Error parsing saved filters:', e);
+    }
+  }
+};
 </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.25rem;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
 }
 
-.controls-row {
+.vm-selector-row {
   display: flex;
   align-items: center;
   gap: 0.5rem;
+  padding-bottom: 0.75rem !important;
 }
 
 .search-box {
@@ -580,6 +713,12 @@ const scrollToSelectedVM = () => {
   cursor: pointer;
   padding: 0;
   font-size: 0.875rem;
+  transition: color 0.2s;
+  z-index: 5; /* Ensure it's above other elements */
+}
+
+.btn-clear:hover {
+  color: #dc3545; /* Red color on hover */
 }
 
 .list-toggle-btn {
@@ -622,7 +761,8 @@ const scrollToSelectedVM = () => {
   background-color: white;
   border-radius: 0.25rem;
   overflow: hidden;
-  margin-top: 0.5rem;
+  margin-top: -0.5rem;
+  padding-bottom: 0.25rem;
 }
 
 .vm-list {
@@ -631,6 +771,7 @@ const scrollToSelectedVM = () => {
   width: 100%;
   max-height: calc(100vh - 200px);
   overflow-y: auto;
+  padding-bottom: 0.25rem;
 }
 
 .vm-list-item {
@@ -638,7 +779,6 @@ const scrollToSelectedVM = () => {
   align-items: center;
   padding: 0.75rem 1rem;
   border: none !important;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
   background-color: white;
   text-align: left;
   cursor: pointer;
@@ -648,6 +788,7 @@ const scrollToSelectedVM = () => {
 
 .vm-list-item:last-child {
   border-bottom: none !important;
+  margin-bottom: 0.25rem;
 }
 
 .vm-list-item:hover {
@@ -671,12 +812,12 @@ const scrollToSelectedVM = () => {
   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;
@@ -688,45 +829,60 @@ const scrollToSelectedVM = () => {
 
 .vm-item-content {
   display: flex;
-  justify-content: space-between;
   align-items: center;
   width: 100%;
+  gap: 1rem;
 }
 
 .vm-name {
   font-weight: 500;
+  flex: 1;
 }
 
-.vm-status {
+.vm-state {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   font-size: 0.875rem;
+  width: 100px;
 }
 
-.status-indicator {
+.vm-node {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  color: #6c757d;
+  width: 100px;
+}
+
+.node-icon {
+  font-size: 0.75rem;
+}
+
+.state-indicator {
   font-size: 0.625rem;
 }
 
-/* Status colors */
+/* Status colors - updated */
 .status-running {
-  color: #28a745;
+  color: #28a745; /* Green */
 }
 
 .status-stopped {
-  color: #6c757d;
+  color: #dc3545; /* Red */
 }
 
-.status-paused {
+.status-provisioning {
-  color: #ffc107;
+  color: #0d6efd; /* Blue */
 }
 
-.status-error {
+.status-mirror {
-  color: #dc3545;
+  color: #6f42c1; /* Purple */
 }
 
-.status-unknown {
+.status-restarting {
-  color: #6c757d;
+  color: #ffc107; /* Yellow */
 }
 
 .no-vms-message {
@@ -741,7 +897,7 @@ const scrollToSelectedVM = () => {
   top: 100%;
   right: 0;
   z-index: 1000;
-  min-width: 250px;
+  min-width: 350px;
   padding: 1rem;
   margin-top: 0.5rem;
   background-color: white;
@@ -757,12 +913,11 @@ const scrollToSelectedVM = () => {
   margin-bottom: 0.5rem;
   font-weight: 600;
   color: #495057;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   padding-bottom: 0.25rem;
 }
 
 .filter-options-dropdown {
-  max-height: 150px;
+  max-height: 200px;
   overflow-y: auto;
   display: flex;
   flex-direction: column;

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">
@@ -146,28 +145,54 @@
 
     <!-- Running VMs Section -->
     <CollapsibleSection title="Running VMs" :initially-expanded="sections.vms">
-        <div class="vms-container">
+      <div class="vm-list-row">
-          <div class="vms-card">
+        <NodeVMList 
+          :vmData="props.vmData"
+          :nodeData="props.nodeData"
+          :nodeName="selectedNode"
+        />
+      </div>
+    </CollapsibleSection>
+
+    <!-- Health Details Section -->
+    <CollapsibleSection title="Health Details" :initially-expanded="sections.health">
+      <div class="health-details-row">
+        <!-- Health messages card -->
+        <div class="metric-card">
           <div class="card-header">
-              <h6 class="card-title mb-0">
+            <h6 class="card-title mb-0 metric-label">Health Messages</h6>
-                <span class="metric-label">Running VMs</span>
-              </h6>
           </div>
           <div class="card-body">
-              <div v-if="!selectedNodeData.running_domains || selectedNodeData.running_domains.length === 0" class="no-vms">
+            <div class="messages-list">
-                <p>No VMs running on this node</p>
+              <template v-if="nodeHealthMessages.length">
-              </div>
-              <div v-else class="vm-list" :style="{ 
-                'grid-template-columns': `repeat(auto-fill, minmax(${calculateVmItemMinWidth}px, 1fr))` 
-              }">
                 <div
-                  v-for="vm in selectedNodeData.running_domains"
+                  v-for="(msg, idx) in nodeHealthMessages"
-                  :key="vm"
+                  :key="idx"
-                  class="vm-item"
+                  :class="[
-                  @click="handleVmClick(vm)"
+                    'health-message',
-                  title="View VM details"
+                    getHealthMessageClass(msg),
+                  ]"
                 >
-                  {{ vm }}
+                  <div class="message-header">
+                    <i class="fas" :class="getMessageIcon(msg)"></i>
+                    <span class="message-id">{{ msg.name }}</span>
+                    <span v-if="msg.health_delta > 0" class="health-delta">
+                      (-{{ msg.health_delta }}%)
+                    </span>
+                  </div>
+                  <div class="message-content">
+                    {{ getMessageContent(msg) }}
+                  </div>
+                </div>
+              </template>
+              <div v-else class="health-message healthy">
+                <div class="message-header">
+                  <i class="fas fa-circle-check me-1"></i>
+                  <span class="message-id">Node healthy</span>
+                </div>
+                <div class="message-content">
+                  Node is at full health with no faults
+                </div>
               </div>
             </div>
           </div>
@@ -180,7 +205,6 @@
   <div v-else class="no-node-selected">
     <p>Select a node to view details</p>
   </div>
-  </div>
 </template>
 
 <script setup>
@@ -193,6 +217,8 @@ import HealthChart from '../../charts/HealthChart.vue';
 import ValueCard from '../../general/ValueCard.vue';
 import CollapsibleSection from '../../general/CollapsibleSection.vue';
 import NodeSelectBar from '../../general/NodeSelectBar.vue';
+import NodeVMList from './NodeVMList.vue';
+import { useRouter, useRoute } from 'vue-router';
 
 // Move all the props, refs, computed properties, and functions from Nodes.vue
 const props = defineProps({
@@ -210,6 +236,11 @@ const props = defineProps({
     type: Object,
     required: true,
     default: () => ({})
+  },
+  vmData: {
+    type: Array,
+    required: true,
+    default: () => []
   }
 });
 
@@ -219,7 +250,8 @@ const sections = ref({
   graphs: true,
   cpu: true,
   resources: true,
-  vms: true
+  vms: true,
+  health: true
 });
 
 // State for selected node and tab scrolling
@@ -430,32 +462,14 @@ const getDomainStateColor = (state) => {
   return 'gray';
 };
 
-// Handle VM click (placeholder until VMs page is implemented)
-const handleVmClick = (vmName) => {
-  console.log(`VM clicked: ${vmName}`);
-  alert(`The VMs page is not yet implemented. You clicked on VM: ${vmName}`);
-};
-
-// Calculate the minimum width for VM items based on the longest VM name
-const calculateVmItemMinWidth = computed(() => {
-  if (!selectedNodeData.value || !selectedNodeData.value.running_domains || !selectedNodeData.value.running_domains.length) {
-    return 100; // Default minimum width
-  }
-  
-  // Find the longest VM name
-  const longestVmName = selectedNodeData.value.running_domains.reduce((longest, current) => {
-    return current.length > longest.length ? current : longest;
-  }, '');
-  
-  // Calculate width based on character count (approx 8px per character plus padding)
-  const minWidth = Math.max(100, longestVmName.length * 8 + 32);
-  return minWidth;
-});
-
 // Initialize the component
 onMounted(() => {
-  // Select the first node by default if available
+  // Check if there's a saved node selection
-  if (props.nodeData && props.nodeData.length > 0) {
+  const savedNodeId = localStorage.getItem('selectedNodeId');
+  if (savedNodeId && props.nodeData.some(node => node.name === savedNodeId)) {
+    selectNode(savedNodeId);
+  } else if (props.nodeData && props.nodeData.length > 0) {
+    // Fall back to selecting the first node
     selectNode(props.nodeData[0].name);
   }
 
@@ -486,178 +500,84 @@ const availableNodes = computed(() => {
 
 const handleNodeSelect = (node) => {
   selectedNode.value = node;
-  // Any other node selection handling logic
+  // Save to localStorage
+  localStorage.setItem('selectedNodeId', node);
+};
+
+// Process node health messages
+const nodeHealthMessages = computed(() => {
+  if (!selectedNodeData.value || !selectedNodeData.value.health_details) {
+    return [];
+  }
+
+  const healthDetails = selectedNodeData.value.health_details;
+  // Make sure we're getting an array of health details
+  if (Array.isArray(healthDetails)) {
+    return healthDetails;
+  } else if (typeof healthDetails === 'object') {
+    // If it's an object, convert to array
+    return Object.values(healthDetails);
+  }
+  return [];
+});
+
+// Helper function to determine message class based on health status
+const getHealthMessageClass = (msg) => {
+  if (msg.health_delta >= 25) {
+    return 'delta-high'; // Red for critical issues (>=25%)
+  }
+  if (msg.health_delta > 0) {
+    return 'delta-medium';
+  }
+  return 'delta-low'; // Green for healthy items
+};
+
+// Helper function to get appropriate icon for health message
+const getMessageIcon = (msg) => {
+  if (msg.health_delta >= 25) {
+    return 'fa-circle-exclamation me-1'; // Warning icon for significant issues
+  }
+  if (msg.health_delta > 0) {
+    return 'fa-info-circle me-1'; // Info icon for minor issues
+  }
+  return 'fa-circle-check me-1'; // Checkmark for healthy items
+};
+
+// Helper function to format message content
+const getMessageContent = (msg) => {
+  return msg.message || 'No details available';
+};
+
+const selectVM = (vmId) => {
+  // Store the VM ID in localStorage so it will be selected when the VMs page loads
+  localStorage.setItem('selectedVMId', vmId);
 };
 </script>
 
 <style scoped>
 /* Add these missing styles from the original Nodes.vue */
-.overview-container {
+.content-container {
+  background-color: white;
+  border-radius: 0.25rem;
+  width: 100%;
+  padding-top: 0.25rem;
+}
+
+.loading-container {
   display: flex;
   flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+}
+
+.info-row, .graphs-row, .resources-row-cpu, .resources-row-memory, .vm-list-row {
+  display: grid;
   gap: 0.5rem;
   width: 100%;
 }
 
-/* Node tabs styling */
+.health-details-row {
-.node-tabs-wrapper {
-  position: relative;
-  width: 100%;
-  overflow: hidden;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
-  margin-bottom: 1rem;
-}
-
-.node-tabs {
-  display: flex;
-  overflow-x: auto;
-  scrollbar-width: none; /* Hide scrollbar for Firefox */
-  -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
-  scroll-behavior: smooth;
-  padding: 0 40px; /* Make room for scroll buttons */
-}
-
-.node-tabs::-webkit-scrollbar {
-  display: none; /* Hide scrollbar for Chrome, Safari, and Opera */
-}
-
-.node-tab {
-  padding: 0.5rem 1rem;
-  background: none;
-  border: none;
-  border-bottom: 2px solid transparent;
-  cursor: pointer;
-  white-space: nowrap;
-  transition: all 0.2s;
-  color: #495057;
-}
-
-.node-tab:hover {
-  background-color: rgba(0, 0, 0, 0.03);
-}
-
-.node-tab.active {
-  border-bottom: 2px solid #0d6efd;
-  color: #0d6efd;
-  font-weight: 600;
-}
-
-.tab-scroll-button {
-  position: absolute;
-  top: 0;
-  height: 100%;
-  width: 40px;
-  background: rgba(255, 255, 255, 0.9);
-  border: none;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 10;
-}
-
-.tab-scroll-button.left {
-  left: 0;
-  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
-}
-
-.tab-scroll-button.right {
-  right: 0;
-  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
-}
-
-/* Node details styling */
-.node-details {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  width: 100%;
-}
-
-.no-node-selected {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 200px;
-  background-color: rgba(0, 0, 0, 0.03);
-  border-radius: 0.25rem;
-  color: #666;
-}
-
-/* Section styling */
-.section-container {
-  position: relative;
-  margin-bottom: 0.5rem;
-}
-
-.section-content-wrapper {
-  display: flex;
-  position: relative;
-}
-
-.section-content {
-  flex: 1;
-  min-width: 0;
-  padding-right: 40px;
-}
-
-.toggle-column {
-  position: absolute;
-  top: 4px;
-  right: 0;
-  width: 40px;
-  height: 30px;
-  z-index: 10;
-  padding-left: 6px;
-}
-
-.section-toggle {
-  background: none;
-  border: none;
-  color: #666;
-  cursor: pointer;
-  padding: 0.25rem;
-  border-radius: 0.25rem;
-  transition: all 0.2s;
-  width: 30px;
-  height: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: rgba(255, 255, 255, 0.8);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-}
-
-.section-toggle:hover {
-  background-color: rgba(0, 0, 0, 0.05);
-  color: #333;
-}
-
-.section-toggle:focus {
-  outline: none;
-  box-shadow: none;
-}
-
-.collapsed-section-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.5rem;
-  background-color: rgba(0, 0, 0, 0.03);
-  border: 1px solid rgba(0, 0, 0, 0.125);
-  border-radius: 0.25rem;
-  height: 38px;
-  width: 100%;
-}
-
-.collapsed-section-header .card-title {
-  margin: 0;
-  color: #495057;
-  font-size: 0.95rem;
-  font-weight: 600;
-}
-
-.metrics-row, .graphs-row, .resources-row-cpu, .resources-row-memory, .info-row {
   display: grid;
   gap: 0.5rem;
   width: 100%;
@@ -665,10 +585,6 @@ const handleNodeSelect = (node) => {
 
 /* Responsive grid layouts */
 @media (min-width: 1201px) {
-  .metrics-row {
-    grid-template-columns: repeat(4, 1fr);
-  }
-
   .info-row {
     grid-template-columns: repeat(3, 1fr);
   }
@@ -684,13 +600,13 @@ const handleNodeSelect = (node) => {
   .resources-row-memory {
     grid-template-columns: repeat(5, 1fr);
   }
+
+  .health-details-row {
+    grid-template-columns: 1fr;
+  }
 }
 
 @media (min-width: 801px) and (max-width: 1200px) {
-  .metrics-row {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
   .info-row {
     grid-template-columns: repeat(2, 1fr);
   }
@@ -706,16 +622,96 @@ const handleNodeSelect = (node) => {
   .resources-row-memory {
     grid-template-columns: repeat(3, 1fr);
   }
+
+  .health-details-row {
+    grid-template-columns: 1fr;
+  }
 }
 
 @media (max-width: 800px) {
-  .metrics-row,
   .info-row,
   .graphs-row,
   .resources-row-cpu,
   .resources-row-memory {
     grid-template-columns: 1fr;
   }
+
+  .health-details-row {
+    grid-template-columns: 1fr;
+  }
+}
+
+.messages-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: 100%;
+  align-self: flex-start;
+}
+
+.health-message {
+  font-size: 0.875rem;
+  text-align: left;
+  padding: 0.5rem;
+  border-radius: 0.25rem;
+  position: relative;
+  height: auto;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  flex: 1;
+  /* Default styling - will be overridden by delta classes */
+  background: rgba(108, 117, 125, 0.15);
+  color: #495057;
+}
+
+.message-header {
+  display: flex;
+  align-items: center;
+  font-weight: 500;
+  margin-bottom: 0.25rem;
+}
+
+.message-id {
+  font-weight: 600;
+}
+
+.message-content {
+  font-size: 0.8rem;
+  line-height: 1.4;
+  white-space: pre-line; /* Allow line breaks in content */
+  color: inherit;
+  opacity: 0.9;
+}
+
+.health-message.healthy {
+  background: rgba(40, 167, 69, 0.1);
+  color: #0d5524;
+}
+
+.delta-low {
+  background: rgba(40, 167, 69, 0.15);  /* Green background */
+  color: #0d5524;
+}
+
+.delta-medium {
+  background: rgba(255, 193, 7, 0.15);  /* Yellow background */
+  color: #856404;
+}
+
+.delta-high {
+  background: rgba(220, 53, 69, 0.15);  /* Red background */
+  color: #721c24;
+}
+
+.delta-info {
+  background: rgba(13, 110, 253, 0.15);  /* Blue background */
+  color: #0d6efd;
+}
+
+.health-delta {
+  margin-left: 0.5rem;
+  font-size: 0.8em;
 }
 
 .metric-card {
@@ -737,7 +733,6 @@ const handleNodeSelect = (node) => {
   border-bottom: 1px solid rgba(0, 0, 0, 0.125);
   height: 38px;
   display: flex;
-  justify-content: space-between;
   align-items: center;
 }
 
@@ -748,6 +743,7 @@ const handleNodeSelect = (node) => {
   justify-content: space-between;
   align-items: center;
   margin: 0;
+  line-height: 1.2;
 }
 
 .metric-card .card-body {
@@ -758,205 +754,7 @@ const handleNodeSelect = (node) => {
   position: relative;
   width: 100%;
   overflow: visible;
-  justify-content: center;
+  justify-content: flex-start;
   align-items: center;
 }
-
-.metric-card .metric-value {
-  font-size: 1.25rem;
-  font-weight: bold;
-  color: #333;
-  line-height: 1;
-  margin: 0;
-  text-align: center;
-  white-space: nowrap;
-  min-width: fit-content;
-}
-
-/* Add back the VM-specific styles */
-.vms-container {
-  width: 100%;
-}
-
-.vms-card {
-  background: white;
-  border: 1px solid rgba(0,0,0,0.125);
-  border-radius: 0.25rem;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  overflow: hidden;
-}
-
-.vms-card .card-header {
-  background-color: rgba(0, 0, 0, 0.03);
-  padding: 0.5rem;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
-  height: 38px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.vms-card .card-body {
-  flex: 1;
-  padding: 0.5rem;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  width: 100%;
-  overflow: visible;
-}
-
-.no-vms {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100px;
-  color: #6c757d;
-  font-style: italic;
-}
-
-.vm-list {
-  display: grid;
-  gap: 0.5rem;
-  width: 100%;
-}
-
-.vm-item {
-  padding: 0.5rem;
-  background-color: rgba(0, 0, 0, 0.015);
-  border: 1px solid rgba(0, 0, 0, 0.05);
-  border-radius: 0.25rem;
-  cursor: pointer;
-  text-align: center;
-  font-weight: 500;
-  color: #333;
-  transition: all 0.2s;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  position: relative;
-}
-
-.vm-item:hover {
-  background-color: rgba(0, 0, 0, 0.04);
-  border-color: rgba(0, 0, 0, 0.1);
-}
-
-/* Also add back these missing utility styles */
-.metric-percentage {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background: rgba(255, 255, 255, 0.8);
-  padding: 0.25rem 0.75rem;
-  border-radius: 0.5rem;
-  box-shadow: 0 0 10px rgba(0,0,0,0.1);
-  z-index: 2;
-}
-
-.metric-percentage .metric-value {
-  font-size: 2.5rem;
-  font-weight: 500;
-  color: #333;
-  line-height: 1;
-  margin: 0;
-  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
-}
-
-.chart-wrapper {
-  position: relative;
-  width: 100%;
-  height: 160px;
-  min-height: 160px;
-  overflow: hidden;
-  border: none;
-  border-radius: 0;
-  background-color: white;
-  margin: 0;
-}
-
-/* Status colors */
-.status-healthy { color: #28a745; }
-.status-warning { color: #ffc107; }
-.status-error { color: #dc3545; }
-
-/* Chart colors */
-.chart-cpu {
-  background: white;
-  border: none;
-}
-
-.chart-memory {
-  background: white;
-  border: none;
-}
-
-.chart-storage, .chart-allocated {
-  background: white;
-  border: none;
-}
-
-.chart-health {
-  background: white;
-  border: none;
-}
-
-/* Toggle column styles */
-.toggle-column.expanded {
-  top: 0;
-  right: 0;
-  height: 100%;
-  display: flex;
-  align-items: flex-start;
-  padding-top: 4px;
-}
-
-/* Section container styles */
-.section-container.collapsed {
-  margin-bottom: 0.5rem;
-}
-
-.section-container.collapsed .section-content-wrapper {
-  margin-bottom: 0;
-}
-
-/* Target the specific element causing the padding */
-ul.nav.nav-tabs {
-  padding-left: 0 !important;
-  margin-left: 0 !important;
-}
-
-/* Target Bootstrap's default tab styling */
-.nav-tabs {
-  padding-left: 0 !important;
-  margin-left: 0 !important;
-}
-
-/* Target any list items in the tabs */
-.nav-tabs > li {
-  margin-left: 0 !important;
-  padding-left: 0 !important;
-}
-
-/* Target the tab container */
-.tab-container {
-  padding-left: 0 !important;
-  margin-left: 0 !important;
-}
-
-/* Target the content grid in nodes view */
-.nodes-view .content-grid {
-  padding-left: 0 !important;
-  margin-left: 0 !important;
-}
-
-/* Target all direct children of content-grid in nodes view */
-.nodes-view .content-grid > * {
-  padding-left: 0 !important;
-  margin-left: 0 !important;
-}
 </style> 

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

@@ -0,0 +1,156 @@
+<template>
+  <div class="vms-container">
+    <div class="card-header">
+      <h6 class="card-title mb-0">
+        <span class="metric-label">Running VMs</span>
+      </h6>
+    </div>
+    <div v-if="!runningDomains || runningDomains.length === 0" class="no-vms">
+      No VMs running on this node
+    </div>
+    <div v-else class="vm-list" :style="{ 
+      'grid-template-columns': `repeat(auto-fill, minmax(150px, 1fr))` 
+    }">
+      <div 
+        v-for="vmName in runningDomains" 
+        :key="vmName" 
+        class="vm-item"
+        @click="selectVMAndNavigate(vmName)"
+      >
+        {{ vmName }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { useRouter } from 'vue-router';
+import { navigateToVM } from '../../../services/navigation';
+
+const props = defineProps({
+  vmData: {
+    type: Array,
+    required: true,
+    default: () => []
+  },
+  nodeData: {
+    type: Array,
+    required: true,
+    default: () => []
+  },
+  nodeName: {
+    type: String,
+    required: true
+  }
+});
+
+const router = useRouter();
+
+// Get the selected node data
+const nodeData = computed(() => {
+  if (!props.nodeName || !props.nodeData || props.nodeData.length === 0) {
+    console.log('No node selected or no node data available');
+    return null;
+  }
+  
+  const node = props.nodeData.find(node => node.name === props.nodeName);
+  console.log(`Node data for ${props.nodeName}:`, node);
+  return node;
+});
+
+// Get running domains from the node data
+const runningDomains = computed(() => {
+  if (!nodeData.value || !nodeData.value.running_domains) {
+    console.log('No running domains found for node:', props.nodeName);
+    return [];
+  }
+  
+  console.log(`Found ${nodeData.value.running_domains.length} running domains on node ${props.nodeName}:`, nodeData.value.running_domains);
+  return nodeData.value.running_domains;
+});
+
+// Navigate to VM details using the navigation service
+const selectVMAndNavigate = (vmName) => {
+  navigateToVM(vmName, router);
+};
+</script>
+
+<style scoped>
+.vms-container {
+  min-width: 180px;
+  background: white;
+  border: 1px solid rgba(0,0,0,0.125);
+  border-radius: 0.25rem;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  width: 100%;
+  overflow: hidden;
+}
+
+.card-header {
+  background-color: rgba(0, 0, 0, 0.03);
+  padding: 0.5rem;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
+  height: 38px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.card-header h6 {
+  font-size: 0.95rem;
+  font-weight: 600;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0;
+}
+
+.no-vms {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100px;
+  color: #6c757d;
+  font-style: italic;
+}
+
+.vm-list {
+  display: grid;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.5rem;
+  border-radius: 0.25rem;
+}
+
+.vm-item {
+  padding: 0.5rem;
+  background-color: rgba(0, 0, 0, 0.015);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  border-radius: 0.25rem;
+  cursor: pointer;
+  text-align: center;
+  font-weight: 500;
+  color: #333;
+  transition: all 0.2s;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  position: relative;
+  display: block;
+}
+
+.vm-item:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+  border-color: rgba(0, 0, 0, 0.1);
+}
+
+.vm-node {
+  font-size: 0.7rem;
+  color: #6c757d;
+  margin-top: 0.25rem;
+}
+</style> 

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"
@@ -14,12 +13,13 @@
     @clear="clearSearch"
     @toggle-list="toggleVMList"
     @select-vm="selectVM"
+    @clear-vm="clearSelectedVM"
   />
 
   <!-- VM Details -->
   <div v-if="selectedVMData && !showVMList" class="content-container">
     <CollapsibleSection title="VM Information" :initially-expanded="sections.info">
-        <div class="info-grid">
+      <div class="info-grid-general">
         <ValueCard 
           title="State" 
           :value="selectedVMData.state || 'Unknown'"
@@ -42,7 +42,7 @@
 
     <!-- Resources Section -->
     <CollapsibleSection title="Resources" :initially-expanded="sections.resources">
-        <div class="info-grid-2">
+      <div class="info-grid-resources">
         <ValueCard 
           title="Disk Size" 
           :value="formatStorage(selectedVMData.disk_size)"
@@ -113,7 +113,6 @@
       </div>
     </div>
   </div>
-  </div>
 </template>
 
 <script setup>
@@ -149,7 +148,7 @@ const props = defineProps({
 });
 
 // Use ref and sync with route
-const selectedVM = ref(route.query.vm || '');
+const selectedVM = ref('');
 const searchQuery = ref('');
 const showVMList = ref(true);
 const searchActive = ref(false);
@@ -173,9 +172,15 @@ const selectedVMData = computed(() => {
 const handleSearch = (value) => {
   searchQuery.value = value;
   searchActive.value = true;
+  
   // Store the search query in localStorage for persistence
   if (value) {
     localStorage.setItem('vmSearchQuery', value);
+    // Also save to vmSearchText for consistency
+    localStorage.setItem('vmSearchText', value);
+  } else {
+    localStorage.removeItem('vmSearchQuery');
+    // Don't remove vmSearchText here - it's used for search history
   }
 };
 
@@ -196,9 +201,17 @@ const handleSearchBlur = (event) => {
 // Toggle VM list visibility
 const toggleVMList = () => {
   showVMList.value = !showVMList.value;
+  
   if (showVMList.value) {
+    // When opening the list
     searchActive.value = false;
     invalidVMSelected.value = false;
+    
+    // Restore search text if available
+    const savedSearchText = localStorage.getItem('vmSearchText');
+    if (savedSearchText && !searchQuery.value) {
+      searchQuery.value = savedSearchText;
+    }
   }
 };
 
@@ -213,8 +226,10 @@ const selectVM = (vm) => {
   // Close the VM list
   showVMList.value = false;
   
-  // Update the URL
+  // Save to localStorage
-  router.push({ query: { vm: vm.name } });
+  localStorage.setItem('selectedVMId', vm.name);
+  
+  // No URL parameter update
 };
 
 // Clear search
@@ -224,75 +239,124 @@ const clearSearch = () => {
   localStorage.removeItem('vmSearchQuery');
 };
 
+// Add a method to clear the selected VM
+const clearSelectedVM = () => {
+  // Clear the selected VM
+  selectedVM.value = '';
+  invalidVMSelected.value = false;
+  
+  // Clear the search query in this component
+  searchQuery.value = '';
+  
+  // Show the VM list
+  showVMList.value = true;
+  
+  // Clear VM selection from localStorage
+  localStorage.removeItem('selectedVMId');
+  
+  // Don't clear vmSearchText unless it matches the VM name
+  const savedVMId = localStorage.getItem('selectedVMId');
+  const savedSearchText = localStorage.getItem('vmSearchText');
+  if (savedSearchText === savedVMId) {
+    localStorage.removeItem('vmSearchText');
+  }
+  
+  // Clear URL parameter if it exists
+  if (route.query.vm) {
+    router.replace({ path: '/vms' }, { replace: true });
+  }
+};
+
 // Lifecycle hooks
 onMounted(() => {
-  console.log('VMOverview mounted, route.query.vm:', route.query.vm);
+  console.log('VMOverview mounted');
+  isLoading.value = true;
+  
+  // Check sources in priority order:
+  // 1. localStorage (for returning to the page or navigating from other pages)
+  // 2. URL query parameter (for backward compatibility)
+  const savedVMId = localStorage.getItem('selectedVMId');
   const vmFromQuery = route.query.vm;
   
-  // Restore previous search query from localStorage if available
+  // Restore previous search query from localStorage
   const savedSearch = localStorage.getItem('vmSearchQuery');
+  const savedSearchText = localStorage.getItem('vmSearchText');
+  
+  // If we have a VM to select
+  let vmToSelect = savedVMId || vmFromQuery;
+  
+  if (vmToSelect && props.vmData.length > 0) {
+    // Check if the VM exists
+    const vmExists = props.vmData.some(v => v.name === vmToSelect);
+    
+    if (vmExists) {
+      selectedVM.value = vmToSelect;
+      showVMList.value = false;
+      
+      // Set the search query to the VM name for display in the search bar
+      searchQuery.value = vmToSelect;
+      
+      // If from URL, save to localStorage for persistence
+      if (vmFromQuery && !savedVMId) {
+        localStorage.setItem('selectedVMId', vmFromQuery);
+        
+        // Remove the VM ID from the URL without reloading the page
+        router.replace({ path: '/vms' }, { replace: true });
+      }
+    } else {
+      console.log('Selected VM does not exist:', vmToSelect);
+      invalidVMSelected.value = true;
+      localStorage.removeItem('selectedVMId');
+      
+      // Only clear search text if it matches the VM name
+      if (savedSearchText === vmToSelect) {
+        localStorage.removeItem('vmSearchText');
+      }
+      
+      // Show the VM list with any saved search
+      showVMList.value = true;
       if (savedSearch) {
         searchQuery.value = savedSearch;
+      } else if (savedSearchText) {
+        searchQuery.value = savedSearchText;
+      }
+    }
+  } else {
+    // No VM selected, show the list with any saved search
+    showVMList.value = true;
+    if (savedSearch) {
+      searchQuery.value = savedSearch;
+    } else if (savedSearchText) {
+      searchQuery.value = savedSearchText;
+    }
   }
   
-  if (vmFromQuery) {
-    console.log('Setting selectedVM to:', vmFromQuery);
-    selectedVM.value = vmFromQuery;
-    isLoading.value = true;
-    showVMList.value = false;
-    
-    // If we have data, verify the VM exists
-    if (props.vmData.length) {
-      const vmExists = props.vmData.some(v => v.name === vmFromQuery);
-      invalidVMSelected.value = !vmExists;
-    }
   isLoading.value = false;
-  } else if (props.vmData.length > 0) {
+});
-    showVMList.value = true;
+
-    invalidVMSelected.value = false;
+// Watch for changes in the selected VM
+watch(selectedVM, (newValue) => {
+  if (newValue) {
+    // Save to localStorage whenever it changes
+    localStorage.setItem('selectedVMId', newValue);
+  } else {
+    localStorage.removeItem('selectedVMId');
   }
 });
 
-onUnmounted(() => {
+// Watch for changes in the VM data
-  // Remove event listeners and clean up resources
-});
-
-// Watch for route changes to update selectedVM
-watch(() => route.query.vm, (newVm) => {
-  // Explicitly update the ref when route changes
-  selectedVM.value = newVm || '';
-  if (newVm) {
-    // Just update UI state, don't trigger another route change
-    invalidVMSelected.value = false;
-    showVMList.value = false;
-  } else if (props.vmData.length > 0) {
-    showVMList.value = true;
-    invalidVMSelected.value = false;
-  }
-}, { immediate: true });
-
-// Watch for changes in the VM list visibility
-watch(() => showVMList.value, (isVisible) => {
-  if (isVisible && selectedVM.value) {
-    // Scroll to selected VM when the list becomes visible
-    nextTick(() => {
-      // Scroll to selected VM logic
-    });
-  }
-});
-
-// Add watcher for vmData to handle loading state
 watch(() => props.vmData, (newData) => {
-  if (selectedVM.value && newData.length) {
+  if (selectedVM.value && newData.length > 0) {
+    // Verify the VM still exists
     const vmExists = newData.some(vm => vm.name === selectedVM.value);
     invalidVMSelected.value = !vmExists;
-  }
-}, { immediate: true });
     
-// Add debug watcher
+    if (!vmExists) {
-watch(() => selectedVM.value, (newVal) => {
+      // If VM no longer exists, clear localStorage
-  console.log('VMOverview selectedVM changed:', newVal);
+      localStorage.removeItem('selectedVMId');
-}, { immediate: true });
+    }
+  }
+}, { deep: true });
 
 // Helper functions
 const getStateColor = (state) => {
@@ -318,17 +382,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 {
@@ -344,37 +403,33 @@ const formatStorage = (sizeGB) => {
   padding: 2rem;
 }
 
-/* Keep only the styles needed for VM details display */
+.info-grid-general {
-.info-grid {
   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;
+  gap: 0.5rem;
-  padding: 1rem;
-  background-color: rgba(0, 0, 0, 0.02);
-  border-radius: 0.25rem;
 }
 
 @media (max-width: 768px) {
-  .info-grid,
+  .info-grid-general,
-  .info-grid-2 {
+  .info-grid-resources {
     grid-template-columns: 1fr;
   }
   

pvc-vue/src/services/navigation.js

@@ -0,0 +1,39 @@
+import { useRouter } from 'vue-router';
+
+/**
+ * Navigate to a VM without using URL parameters
+ * @param {string} vmId - The ID of the VM to navigate to
+ * @param {import('vue-router').Router} router - Vue Router instance
+ */
+export function navigateToVM(vmId, router) {
+  // Save the VM ID to localStorage
+  localStorage.setItem('selectedVMId', vmId);
+  
+  // Navigate to the VMs page
+  router.push('/vms');
+}
+
+/**
+ * Navigate to a node without using URL parameters
+ * @param {string} nodeId - The ID of the node to navigate to
+ * @param {import('vue-router').Router} router - Vue Router instance
+ */
+export function navigateToNode(nodeId, router) {
+  // Save the node ID to localStorage
+  localStorage.setItem('selectedNodeId', nodeId);
+  
+  // Navigate to the Nodes page
+  router.push('/nodes');
+}
+
+/**
+ * Clear the selected VM and return to the default VM page view
+ * @param {import('vue-router').Router} router - Vue Router instance
+ */
+export function clearSelectedVM(router) {
+  // Clear from localStorage
+  localStorage.removeItem('selectedVMId');
+  
+  // Navigate to the VMs page without query parameters
+  router.push('/vms');
+} 

pvc-vue/src/utils/vmSelection.js

@@ -0,0 +1,32 @@
+/**
+ * Selects a VM and saves the selection to localStorage
+ * @param {string} vmId - The ID of the VM to select
+ * @param {import('vue-router').Router} router - Vue Router instance (optional)
+ */
+export function selectVM(vmId, router = null) {
+  // Save to localStorage
+  localStorage.setItem('selectedVMId', vmId);
+  
+  // Optionally update URL if router is provided
+  if (router) {
+    router.push({ 
+      path: '/vms',
+      query: { vm: vmId }
+    });
+  }
+}
+
+/**
+ * Gets the currently selected VM from localStorage
+ * @returns {string|null} The selected VM ID or null if none is selected
+ */
+export function getSelectedVM() {
+  return localStorage.getItem('selectedVMId');
+}
+
+/**
+ * Clears the selected VM from localStorage
+ */
+export function clearSelectedVM() {
+  localStorage.removeItem('selectedVMId');
+} 

pvc-vue/src/views/Nodes.vue

@@ -10,10 +10,11 @@
 </template>
 
 <script setup>
+import { ref, onMounted, watch } from 'vue';
 import PageTitle from '../components/general/PageTitle.vue';
 import NodeOverview from '../components/pages/nodes/NodeOverview.vue';
 
-defineProps({
+const props = defineProps({
   nodeData: {
     type: Array,
     required: true,
@@ -30,6 +31,25 @@ defineProps({
     default: () => ({})
   }
 });
+
+const selectedNode = ref(null);
+
+onMounted(() => {
+  // Restore selected node from localStorage if available
+  const savedNodeId = localStorage.getItem('selectedNodeId');
+  if (savedNodeId) {
+    selectedNode.value = savedNodeId;
+  }
+});
+
+watch(selectedNode, (newValue) => {
+  // Save selected node to localStorage whenever it changes
+  if (newValue) {
+    localStorage.setItem('selectedNodeId', newValue);
+  } else {
+    localStorage.removeItem('selectedNodeId');
+  }
+});
 </script>
 
 <style scoped>
@@ -39,9 +59,4 @@ 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

@@ -11,10 +11,14 @@
 </template>
 
 <script setup>
+import { ref, onMounted, watch } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
 import PageTitle from '../components/general/PageTitle.vue';
 import VMOverview from '../components/pages/vms/VMOverview.vue';
 
-// Define props to receive data from App.vue
+const router = useRouter();
+const route = useRoute();
+
 const props = defineProps({
   vmData: {
     type: Array,
@@ -36,6 +40,9 @@ const props = defineProps({
     default: false
   }
 });
+
+// We'll handle the VM selection in the VMOverview component
+// This parent component just needs to pass the data
 </script>
 
 <style scoped>
@@ -45,9 +52,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>