From 772e2c41883755de9ee935bf33efe9d1558653e1 Mon Sep 17 00:00:00 2001
From: Dombi Attila <83396+dombesz@users.noreply.github.com>
Date: Tue, 13 Jan 2026 20:58:16 +0200
Subject: [PATCH 1/2] [#70334] Project dropdown active project close button is
 misaligned.

https://community.openproject.org/work_packages/70334
---
 frontend/src/app/spot/styles/sass/components/list.sass | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/frontend/src/app/spot/styles/sass/components/list.sass b/frontend/src/app/spot/styles/sass/components/list.sass
index 11dc03fba4a6..182e51d4c545 100644
--- a/frontend/src/app/spot/styles/sass/components/list.sass
+++ b/frontend/src/app/spot/styles/sass/components/list.sass
@@ -108,6 +108,9 @@
         .description
           @extend %autocomplete-description
 
+    &-remove
+      margin-left: $spot-spacing-0_5
+
     &-action_disabled &-title
       opacity: 0.5
 

From 91892fe649e65d78b1a10ea24e0fadf0ba1e3e81 Mon Sep 17 00:00:00 2001
From: Dombi Attila <83396+dombesz@users.noreply.github.com>
Date: Tue, 13 Jan 2026 20:58:29 +0200
Subject: [PATCH 2/2] Format the header project select list component file.

---
 .../header-project-select-list.component.html | 93 +++++++++----------
 1 file changed, 46 insertions(+), 47 deletions(-)

diff --git a/frontend/src/app/shared/components/header-project-select/list/header-project-select-list.component.html b/frontend/src/app/shared/components/header-project-select/list/header-project-select-list.component.html
index 37233be7a0d6..894a6d74c7b9 100644
--- a/frontend/src/app/shared/components/header-project-select/list/header-project-select-list.component.html
+++ b/frontend/src/app/shared/components/header-project-select/list/header-project-select-list.component.html
@@ -51,55 +51,54 @@
         @if (currentProjectService.id === project.id.toString()) {
           <a
             [href]="extendedUrl(null)"
+            class="spot-list--item-remove"
             data-test-selector="op-header-project-select--item-remove-icon"
-            >
-            <svg
-              x-circle-icon
-              size="small"
-            ></svg></a>
-          }
-        </a>
-      }
-      @if (project.disabled) {
-        <span
-          class="spot-list--item-action spot-list--item-action_disabled"
-          [ngClass]="{
-            'spot-list--item-action_active': (searchableProjectListService.selectedItemID$ | async) === project.id
-          }"
           >
-          <span
-            class="spot-list--item-title spot-list--item-title_ellipse-text"
-            data-test-selector="op-header-project-select--item-disabled-title"
-          >
-            <span>{{ project.name }}</span>
-            @if (portfolioModelsEnabled) {
-              @switch (project._type) {
-                @case ('Portfolio') {
-                  <span class="description">
-                    <svg briefcase-icon size="xsmall" />
-                    {{ this.I18n.t('js.include_workspaces.types.portfolio') }}
-                  </span>
-                }
-                @case ('Program') {
-                  <span class="description">
-                    <svg versions-icon size="xsmall" />
-                    {{ this.I18n.t('js.include_workspaces.types.program') }}
-                  </span>
-                }
+            <svg x-circle-icon size="small" />
+          </a>
+        }
+      </a>
+    }
+    @if (project.disabled) {
+      <span
+        class="spot-list--item-action spot-list--item-action_disabled"
+        [ngClass]="{
+          'spot-list--item-action_active': (searchableProjectListService.selectedItemID$ | async) === project.id
+        }"
+      >
+        <span
+          class="spot-list--item-title spot-list--item-title_ellipse-text"
+          data-test-selector="op-header-project-select--item-disabled-title"
+        >
+          <span>{{ project.name }}</span>
+          @if (portfolioModelsEnabled) {
+            @switch (project._type) {
+              @case ('Portfolio') {
+                <span class="description">
+                  <svg briefcase-icon size="xsmall" />
+                  {{ this.I18n.t('js.include_workspaces.types.portfolio') }}
+                </span>
+              }
+              @case ('Program') {
+                <span class="description">
+                  <svg versions-icon size="xsmall" />
+                  {{ this.I18n.t('js.include_workspaces.types.program') }}
+                </span>
               }
             }
-          </span>
+          }
         </span>
-      }
-      @if (project.children.length) {
-        <ul
-          op-header-project-select-list
-          [projects]="project.children"
-          [displayMode]="displayMode"
-          [favorited]="favorited"
-          [selected]="selected"
-          [searchText]="searchText"
-        ></ul>
-      }
-    </li>
-  }
+      </span>
+    }
+    @if (project.children.length) {
+      <ul
+        op-header-project-select-list
+        [projects]="project.children"
+        [displayMode]="displayMode"
+        [favorited]="favorited"
+        [selected]="selected"
+        [searchText]="searchText"
+      ></ul>
+    }
+  </li>
+}