Tweak positioning of icons

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

@@ -23,6 +23,14 @@
         >
           <i class="fas fa-times"></i>
         </button>
+        <button 
+          v-else
+          class="btn-clear btn-clear-left disabled" 
+          disabled
+          title="No search to clear"
+        >
+          <i class="fas fa-times"></i>
+        </button>
         
         <input 
           type="text" 
@@ -36,22 +44,31 @@
           class="form-control search-input"
         >
         
-        <i class="fas fa-search search-icon-right"></i>
+        <i class="fas fa-search search-icon-right-open"></i>
       </div>
       
       <!-- VM Display - visible when drawer is closed -->
       <div v-else class="vm-display" @click.stop="openSearchDrawer">
         <button 
           v-if="selectedVMName"
-          class="vm-clear-btn" 
+          class="btn-clear vm-clear-btn" 
           @click.stop="clearSelectedVM"
           title="Clear selected VM"
         >
           <i class="fas fa-times"></i>
         </button>
+        <button 
+          v-else
+          class="btn-clear vm-clear-btn disabled" 
+          disabled
+          title="No VM selected"
+        >
+          <i class="fas fa-times"></i>
+        </button>
+        
         <i class="fas fa-desktop vm-icon"></i>
         <span class="vm-name">{{ selectedVMName || 'Select a VM...' }}</span>
-        <i class="fas fa-search search-icon-right"></i>
+        <i class="fas fa-search search-icon-right-closed"></i>
       </div>
       
       <div class="filter-dropdown" ref="filterDropdown">
@@ -772,10 +789,12 @@ const openSearchDrawer = (event) => {
   position: relative;
   flex: 1;
   min-width: 200px;
+  height: 38px;
 }
 
 .search-input {
-  padding-left: 30px;
+  height: 38px;
+  padding-left: 35px;
   padding-right: 30px;
 }
 
@@ -913,7 +932,11 @@ const openSearchDrawer = (event) => {
 
 .vm-name {
   font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
   flex: 1;
+  padding-left: 0;
 }
 
 .vm-state {
@@ -1061,7 +1084,7 @@ const openSearchDrawer = (event) => {
   min-width: 200px;
   height: 38px;
   padding: 0.375rem 0.75rem;
-  padding-left: 30px;
+  padding-left: 35px;
   padding-right: 30px;
   background-color: #f8f9fa;
   border: 1px solid #ced4da;
@@ -1070,8 +1093,8 @@ const openSearchDrawer = (event) => {
   align-items: center;
   cursor: pointer;
   transition: background-color 0.2s;
-  user-select: none; /* Prevent text selection */
-  z-index: 1; /* Ensure it's clickable */
+  user-select: none;
+  z-index: 1;
 }
 
 /* Add a hover effect to make it clear it's clickable */
@@ -1088,7 +1111,7 @@ const openSearchDrawer = (event) => {
 
 .vm-clear-btn {
   position: absolute;
-  left: 6px;
+  left: 9px;
   top: 50%;
   transform: translateY(-50%);
   background: none;
@@ -1107,7 +1130,8 @@ const openSearchDrawer = (event) => {
 
 .vm-icon {
   color: #6c757d;
-  margin-right: 0.25rem;
+  margin-right: 0.5rem;
+  margin-left: -0.25rem;
 }
 
 .vm-name {
@@ -1116,13 +1140,30 @@ const openSearchDrawer = (event) => {
   overflow: hidden;
   text-overflow: ellipsis;
   flex: 1;
+  padding-left: 0;
 }
 
-.search-icon-right {
+.search-icon-right-open {
   position: absolute;
   right: 10px;
   top: 50%;
   transform: translateY(-50%);
   color: #6c757d;
 }
+
+.search-icon-right-closed {
+  position: absolute;
+  right: 9px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #6c757d;
+}
+
+/* Add disabled style for clear buttons */
+.btn-clear-left.disabled,
+.vm-clear-btn.disabled {
+  color: #ced4da;
+  cursor: default;
+  pointer-events: none;
+}
 </style>