From a212417fb8b9c7563ac74da6fb1d15762e44641d Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Fri, 11 Jul 2025 08:13:01 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(frontend)=20fix=20action=20buttons?=
 =?UTF-8?q?=20not=20clickable=20(#1162)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

If the title was too long, or the children deepness too deep, the action
buttons in the doc tree were not clickable.
This commit fixes the issue by ensuring that the action buttons are
always clickable, regardless of the title length or children depth.
---
 CHANGELOG.md                                    |  1 +
 .../docs/doc-tree/components/DocSubPageItem.tsx | 17 +++++++++++++++--
 .../docs/doc-tree/components/DocTree.tsx        |  4 ++++
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 74d1c92f..c26b4ff9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,7 @@ and this project adheres to
 
 - 🌐(frontend) keep simple tag during export #1154
 - 🐛(back) manage can-edit endpoint without created room in the ws
+- 🐛(frontend) fix action buttons not clickable #1162
 
 ## [3.4.0] - 2025-07-09
 
diff --git a/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocSubPageItem.tsx b/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocSubPageItem.tsx
index 9fae9746..8c72e31b 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocSubPageItem.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocSubPageItem.tsx
@@ -18,7 +18,7 @@ import {
 import { useLeftPanelStore } from '@/features/left-panel';
 import { useResponsiveStore } from '@/stores';
 
-import Logo from './../assets/sub-page-logo.svg';
+import SubPageIcon from './../assets/sub-page-logo.svg';
 import { DocTreeItemActions } from './DocTreeItemActions';
 
 const ItemTextCss = css`
@@ -99,6 +99,7 @@ export const DocSubPageItem = (props: Props) => {
   return (
     <Box
       className="--docs-sub-page-item"
+      $position="relative"
       $css={css`
         background-color: ${actionsOpen
           ? 'var(--c--theme--colors--greyscale-100)'
@@ -106,6 +107,17 @@ export const DocSubPageItem = (props: Props) => {
 
         .light-doc-item-actions {
           display: ${actionsOpen || !isDesktop ? 'flex' : 'none'};
+          position: absolute;
+          right: 0;
+          background: ${isDesktop
+            ? 'var(--c--theme--colors--greyscale-100)'
+            : 'var(--c--theme--colors--greyscale-000)'};
+        }
+
+        .c__tree-view--node.isSelected {
+          .light-doc-item-actions {
+            background: var(--c--theme--colors--greyscale-100);
+          }
         }
 
         &:hover {
@@ -114,6 +126,7 @@ export const DocSubPageItem = (props: Props) => {
 
           .light-doc-item-actions {
             display: flex;
+            background: var(--c--theme--colors--greyscale-100);
           }
         }
       `}
@@ -136,7 +149,7 @@ export const DocSubPageItem = (props: Props) => {
           $minHeight="24px"
         >
           <Box $width="16px" $height="16px">
-            <Logo />
+            <SubPageIcon />
           </Box>
 
           <Box
diff --git a/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTree.tsx b/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTree.tsx
index fdd520c2..bee2f485 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTree.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTree.tsx
@@ -136,6 +136,10 @@ export const DocTree = ({ initialTargetId }: DocTreeProps) => {
         .c__tree-view--container {
           z-index: 1;
           margin-top: -10px;
+
+          .c__tree-view {
+            overflow: hidden !important;
+          }
         }
       `}
     >