Fix Variables tab L5 form regressions

Three fixes for the inline Add Variable form on the L5 sub-nav:

1. The legacy .form-field wrapper carried margin-bottom: 16px which
   pushed the input box off-center within the row's flex layout,
   misaligning the inputs against the done/clear buttons. Drop the
   wrapper and style the inputs with Tailwind primitives matching the
   "Filter by Name" input below: white bg, rounded-md, border
   gray-300, slate-800 text, gray-400 70% placeholder.

2. ListComponent's isAddingOrSelecting$ collapsed the legacy toolbar
   (title, filter, sort, refresh) whenever isAdding$ was true. With
   suppressAddButton=true the inline form lives outside the list in
   an L5 sub-nav, so isAdding$ no longer means "the list's toolbar
   is in form mode". Gate the collapse on suppressAddButton so the
   toolbar stays visible while the L5 form is open.

3. Reserve form-row height on the L5 sub-nav when the consumer wires
   `isAdding` (i.e., plans to host an inline form). Pages without an
   inline form keep their compact button-row height; pages with one
   render at a constant 68px in both closed and open states so the
   user doesn't see the row grow when they click Add.

Author: nabramovitz

src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/variables-tab/variables-tab.component.html

@@ -6,29 +6,29 @@
            Replaces the +Add Variable button. Uses the same data-source
            model bindings the legacy in-toolbar form used; save/cancel
            call dataSource methods directly. -->
-      <div subNavForm class="variables-tab__env-table--add-form flex items-center gap-2">
+      <div subNavForm class="flex items-center gap-2">
         <form #addForm="ngForm" novalidate class="flex items-center gap-2">
-          <div class="form-field">
-            <input class="input" id="envVarName" name="envVarName" #envVarName="ngModel" placeholder="Name"
+          <div class="flex flex-col">
+            <input class="bg-white rounded-md border border-gray-300 px-3 py-2 text-base text-slate-800 placeholder:text-gray-400 placeholder:opacity-70 focus:outline-none focus:ring-1 focus:ring-primary" id="envVarName" name="envVarName" #envVarName="ngModel" placeholder="Name"
               [(ngModel)]="envVarsDataSource.addItem.name" required [appUnique]="envVarNames()">
             @if (envVarName.errors?.required && envVarName.dirty) {
-              <div class="text-red-500 text-sm mt-1">Name is required</div>
+              <div class="text-red-500 text-xs mt-0.5">Name is required</div>
             }
             @if (envVarName.errors?.appUnique && envVarName.dirty) {
-              <div class="text-red-500 text-sm mt-1">{{envVarName.errors.appUnique.message}}</div>
+              <div class="text-red-500 text-xs mt-0.5">{{envVarName.errors.appUnique.message}}</div>
             }
           </div>
-          <div class="form-field">
-            <input class="input" id="envVarValue" name="envVarValue" placeholder="Value"
+          <div class="flex flex-col">
+            <input class="bg-white rounded-md border border-gray-300 px-3 py-2 text-base text-slate-800 placeholder:text-gray-400 placeholder:opacity-70 focus:outline-none focus:ring-1 focus:ring-primary" id="envVarValue" name="envVarValue" placeholder="Value"
               [(ngModel)]="envVarsDataSource.addItem.value">
           </div>
         </form>
-        <button id="addFormButtonAdd" class="btn btn-icon btn-success"
+        <button id="addFormButtonAdd" class="btn btn-icon btn-success h-9"
                 type="button"
                 (click)="envVarsDataSource.saveAdd()" [disabled]="!addForm.valid">
           <span class="material-icons">done</span>
         </button>
-        <button id="addFormButtonCancel" class="btn btn-icon"
+        <button id="addFormButtonCancel" class="btn btn-icon h-9"
                 type="button"
                 (click)="envVarsDataSource.cancelAdd()">
           <span class="material-icons">clear</span>

src/frontend/packages/cloud-foundry/src/features/applications/application/application-tabs-base/tabs/variables-tab/variables-tab.component.scss

@@ -15,12 +15,4 @@
       }
     }
   }
-  &__env-table--add-form {
-    form {
-      @apply flex flex-row;
-    }
-    .form-field {
-      @apply pr-2.5;
-    }
-  }
 }

src/frontend/packages/core/src/shared/components/list-sub-nav/list-sub-nav.component.ts

@@ -44,7 +44,7 @@ export interface ListSubNavAddAction {
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <div data-test="list-sub-nav"
-         class="flex items-center justify-between gap-3 px-6 py-3 bg-content-bg border-b border-content-border">
+         [class]="rowClasses">
       <div class="text-base font-semibold text-content-text whitespace-nowrap" data-test="list-sub-nav-title">
         {{ title }}: <span class="text-content-muted font-medium">{{ count() }}</span>
       </div>
@@ -97,6 +97,15 @@ export class ListSubNavComponent {
     return v ? v() : true;
   });
 
+  /** Row classes. When the consumer wires `isAdding` (i.e., plans to host
+   *  an inline form), reserve enough height to accommodate the form so
+   *  the row doesn't shift between closed and open states. Pages without
+   *  an inline form keep the natural compact button-row height. */
+  protected get rowClasses(): string {
+    const base = 'flex items-center justify-between gap-3 px-6 py-3 bg-content-bg border-b border-content-border';
+    return this.isAdding ? `${base} min-h-[4.25rem]` : base;
+  }
+
   protected readonly isAddDisabled = computed(() => {
     const d = this.addAction?.disabled;
     return d ? d() : false;

src/frontend/packages/core/src/shared/components/list/list.component.ts

@@ -364,12 +364,19 @@ export class ListComponent<T> implements OnInit, OnChanges, OnDestroy, AfterView
     }
     this.multiFilterManagers = this.getMultiFilterManagers();
 
-    // Create convenience observables that make the html clearer
+    // Create convenience observables that make the html clearer.
+    //
+    // When `suppressAddButton` is set the inline add form lives outside
+    // the list (in an L5 sub-nav above it), so `isAdding$` here means
+    // "the upstream form is open" — it should NOT collapse the list's
+    // own toolbar (title, filter row, sort/view/refresh). `isSelecting$`
+    // still does, because multi-select replaces the toolbar with batch
+    // actions in-place.
     this.isAddingOrSelecting$ = observableCombineLatest(
       this.dataSource.isAdding$,
       this.dataSource.isSelecting$
     ).pipe(
-      map(([isAdding, isSelecting]) => isAdding || isSelecting)
+      map(([isAdding, isSelecting]) => isSelecting || (isAdding && !this.suppressAddButton))
     );
     // Set up an observable containing the current view (card/table)
     this.listViewKey = this.dataSource.entityKey + '-' + this.dataSource.paginationKey;