From b984d49dc0cadcb949719410a89fcd69041826f3 Mon Sep 17 00:00:00 2001
From: Alberto Avon <6561324+vonalbert@users.noreply.github.com>
Date: Mon, 15 Dec 2025 16:35:56 +0100
Subject: [PATCH] fix(menu): alignment of projects and subprojects in sidebar
 (#1974)

This PR changes the width of the collapse-project-button-placeholder
element in order to match the width of the collapse button that has 0.25
+ 0.5 rem of horizontal padding and the svg element inside has 1.25em of
width.

As you can see from the screenshots, the first and third projects are
misaligned compared to the second one. The same happens with
sub-subprojects.

<img width="253" height="129" alt="image"
src="https://github.com/user-attachments/assets/9ca55415-2303-45b5-8a9e-d1b0e03d44bb"
/>
<img width="258" height="258" alt="image"
src="https://github.com/user-attachments/assets/ff6abfbe-5527-48d2-b8aa-2b34da054e19"
/>

Here there are the same projects with this fix applied. The alignment
seems to be preserved even with deeply nested projects.

<img width="247" height="143" alt="image"
src="https://github.com/user-attachments/assets/6566e37a-2017-43d5-b94d-e3daf1a4eb7f"
/>

<img width="279" height="274" alt="image"
src="https://github.com/user-attachments/assets/95d6afd9-ace8-4d55-95c2-c1f924d4826f"
/>
---
 frontend/src/styles/theme/navigation.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/styles/theme/navigation.scss b/frontend/src/styles/theme/navigation.scss
index b7fd5fb45..9d844b898 100644
--- a/frontend/src/styles/theme/navigation.scss
+++ b/frontend/src/styles/theme/navigation.scss
@@ -85,11 +85,12 @@
         svg {
           transition: all $transition;
           color: var(--grey-400);
+          width: 1.25rem;
         }
       }
 
       .collapse-project-button-placeholder {
-        width: 1.625rem;
+        width: 2rem;
         flex-shrink: 0;
       }