fix(terminal): inline shell dropdown into New Terminal button row

Move the shell selector chevron from a separate stacked button to an
inline element on the right side of the New Terminal button. The chevron
is only visible when the flyout is expanded on hover.

Author: abose

src/extensionsIntegrated/Terminal/terminal-panel.html

@@ -5,13 +5,15 @@
             <div class="terminal-tab-flyout">
                 <div class="terminal-flyout-list"></div>
                 <div class="terminal-flyout-actions">
-                    <button class="terminal-flyout-new-btn" title="{{Strings.CMD_NEW_TERMINAL}}">
-                        <span class="terminal-flyout-btn-icon"><i class="fa-solid fa-plus"></i></span>
-                        <span class="terminal-btn-label">New Terminal</span>
-                    </button>
-                    <button class="terminal-flyout-dropdown-btn" title="Select Default Shell">
-                        <span class="terminal-flyout-btn-icon"><i class="fa-solid fa-chevron-up"></i></span>
-                    </button>
+                    <div class="terminal-flyout-new-row">
+                        <button class="terminal-flyout-new-btn" title="{{Strings.CMD_NEW_TERMINAL}}">
+                            <span class="terminal-flyout-btn-icon"><i class="fa-solid fa-plus"></i></span>
+                            <span class="terminal-btn-label">New Terminal</span>
+                        </button>
+                        <button class="terminal-flyout-dropdown-btn" title="Select Default Shell">
+                            <i class="fa-solid fa-chevron-down"></i>
+                        </button>
+                    </div>
                     <div class="terminal-shell-dropdown forced-hidden"></div>
                 </div>
             </div>

src/styles/Extn-Terminal.less

@@ -228,14 +228,20 @@
     position: relative;
 }
 
-.terminal-flyout-new-btn,
-.terminal-flyout-dropdown-btn {
+/* New terminal row: + button fills, dropdown chevron on the right */
+.terminal-flyout-new-row {
+    display: flex;
+    align-items: center;
+    height: 28px;
+}
+
+.terminal-flyout-new-btn {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 6px;
-    height: 28px;
-    width: 100%;
+    flex: 1;
+    height: 100%;
     padding: 0;
     cursor: pointer;
     color: var(--terminal-tab-text);
@@ -246,14 +252,35 @@
     white-space: nowrap;
 }
 
-.terminal-flyout-new-btn:hover,
-.terminal-flyout-dropdown-btn:hover {
+.terminal-flyout-new-btn:hover {
     background: rgba(255, 255, 255, 0.05);
     color: var(--terminal-tab-active-text);
 }
 
+/* Dropdown chevron: hidden in collapsed mode, shown inline when expanded */
 .terminal-flyout-dropdown-btn {
-    border-top: 1px solid var(--terminal-border);
+    display: none;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 100%;
+    padding: 0;
+    cursor: pointer;
+    color: var(--terminal-tab-text);
+    font-size: 9px;
+    background: transparent;
+    border: none;
+    border-left: 1px solid var(--terminal-border);
+    flex-shrink: 0;
+}
+
+.terminal-tab-flyout:hover .terminal-flyout-dropdown-btn {
+    display: flex;
+}
+
+.terminal-flyout-dropdown-btn:hover {
+    background: rgba(255, 255, 255, 0.05);
+    color: var(--terminal-tab-active-text);
 }
 
 /* Icon in action buttons */
@@ -262,10 +289,6 @@
     flex-shrink: 0;
 }
 
-.terminal-flyout-dropdown-btn .terminal-flyout-btn-icon {
-    font-size: 10px;
-}
-
 /* Hide button labels in collapsed mode; show when expanded */
 .terminal-tab-flyout .terminal-btn-label {
     display: none;