🐛(frontend) fix action buttons not clickable (#1162)

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

@@ -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
 

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

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;
+          }
         }
       `}
     >