🐛(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.

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