From d7a50735bab91840536c7f9cd3c81ed6fba627a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= <belen.albeza@kaleidos.net>
Date: Thu, 21 May 2026 09:14:45 +0200
Subject: [PATCH] :bug: Fix page and delete page icons in the sidebar

* :bug: Fix page delete icon not disappearing on selected page

* :bug: Fix page icon being clipped on its right side
---
 .../main/ui/workspace/sidebar/sitemap.cljs    |  1 +
 .../main/ui/workspace/sidebar/sitemap.scss    | 30 ++++---------------
 2 files changed, 7 insertions(+), 24 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs b/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs
index 88d9332ef1..d961b453db 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs
@@ -224,6 +224,7 @@
                                    :aria-label (tr "modals.delete-page.title")
                                    :on-click on-delete
                                    :icon-size "s"
+                                   :class (stl/css :page-delete-button)
                                    :icon-class (stl/css :page-delete-button-icon)
                                    :icon i/delete}])]])])]])))
 
diff --git a/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss b/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss
index b642d89450..e688ee1b7d 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss
@@ -55,8 +55,12 @@
   margin-bottom: deprecated.$s-12;
 }
 
+.page-delete-button {
+  --delete-button-display: none;
+}
+
 .page-delete-button-icon {
-  color: transparent;
+  display: var(--delete-button-display);
 }
 
 .page-element {
@@ -97,8 +101,6 @@
     .page-icon {
       @include deprecated.flex-center;
 
-      height: deprecated.$s-32;
-      width: deprecated.$s-24;
       padding: 0 deprecated.$s-4 0 deprecated.$s-8;
     }
 
@@ -136,12 +138,6 @@
       color: var(--layer-row-foreground-color-drag);
       background-color: var(--layer-row-background-color-drag);
 
-      .page-actions button {
-        svg {
-          stroke: var(--layer-row-foreground-color-drag);
-        }
-      }
-
       .page-icon svg {
         stroke: var(--layer-row-foreground-color-drag);
       }
@@ -156,12 +152,6 @@
       box-shadow: deprecated.$s-16 deprecated.$s-0 deprecated.$s-0 deprecated.$s-0
         var(--layer-row-background-color-selected);
 
-      .page-actions button {
-        svg {
-          stroke: var(--layer-row-foreground-color-selected);
-        }
-      }
-
       .page-icon svg {
         stroke: var(--layer-row-foreground-color-selected);
       }
@@ -179,9 +169,7 @@
       .page-actions button {
         opacity: deprecated.$op-10;
 
-        svg {
-          stroke: var(--layer-row-foreground-color-hover);
-        }
+        --delete-button-display: initial;
       }
 
       .page-icon svg {
@@ -218,12 +206,6 @@
       background-color: var(--layer-row-background-color-hidden);
       opacity: deprecated.$op-7;
 
-      .page-actions button {
-        svg {
-          stroke: var(--layer-row-foreground-color-hidden);
-        }
-      }
-
       .page-icon svg {
         stroke: var(--layer-row-foreground-color-hidden);
       }