chore: redorder terminal tab so that muscle memory dont hit the close button

Author: abose

src/extensionsIntegrated/Terminal/main.js

@@ -418,12 +418,12 @@ define(function (require, exports, module) {
                 $item.css("opacity", "0.6");
             }
 
+            $item.append('<span class="terminal-flyout-close"><i class="fa-solid fa-xmark"></i></span>');
             $item.append('<span class="terminal-flyout-icon"><i class="fa-solid fa-terminal"></i></span>');
             $item.append($('<span class="terminal-flyout-title"></span>').text(label));
             if (cwdName) {
                 $item.append($('<span class="terminal-flyout-cwd"></span>').text(cwdName));
             }
-            $item.append('<span class="terminal-flyout-close"><i class="fa-solid fa-xmark"></i></span>');
 
             $item.on("click", function (e) {
                 if (!$(e.target).closest(".terminal-flyout-close").length) {

src/styles/Extn-Terminal.less

@@ -145,6 +145,7 @@
 
 /* Flyout item */
 .terminal-flyout-item {
+    position: relative;
     display: flex;
     align-items: center;
     height: 28px;
@@ -166,7 +167,8 @@
     box-shadow: inset 2px 0 0 #007acc;
 }
 
-/* Icon column: fixed 30px slot, always visible in collapsed mode */
+/* Icon column: fixed 30px slot, always visible in collapsed mode.
+   In expanded mode, CSS order moves it to the right end. */
 .terminal-flyout-icon {
     width: 30px;
     min-width: 30px;
@@ -193,28 +195,42 @@
     min-width: 0;
     max-width: 50%;
     margin-left: 4px;
+    margin-right: 2px;
     opacity: 0.6;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 
-/* Close button: visible only on item hover */
+/* Expanded mode: reorder so icon is at the right end,
+   add left padding for close button area */
+.terminal-tab-flyout:hover .terminal-flyout-item {
+    padding-left: 30px;
+}
+
+.terminal-tab-flyout:hover .terminal-flyout-icon {
+    order: 99;
+}
+
+/* Close button: overlays left padding area, visible only when
+   flyout is expanded AND the specific item is hovered */
 .terminal-flyout-close {
-    display: flex;
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 30px;
+    display: none;
     align-items: center;
     justify-content: center;
-    width: 16px;
-    height: 16px;
     font-size: 10px;
     color: var(--terminal-tab-text);
-    border-radius: 3px;
+    background: var(--terminal-tab-bg);
     flex-shrink: 0;
-    margin-right: 4px;
-    visibility: hidden;
+    z-index: 1;
 }
 
-.terminal-flyout-item:hover .terminal-flyout-close {
-    visibility: visible;
+.terminal-tab-flyout:hover .terminal-flyout-item:hover .terminal-flyout-close {
+    display: flex;
 }
 
 .terminal-flyout-close:hover {