fixup! ⚡️(frontend) improve accessibility of selected document's sub-menu

Author: Ovgodd

src/frontend/apps/impress/src/features/docs/doc-tree/components/DocSubPageItem.tsx

@@ -115,9 +115,11 @@ export const DocSubPageItem = (props: TreeViewNodeProps<Doc>) => {
       aria-selected={isSelected}
       aria-expanded={hasChildren ? isExpanded : undefined}
       $css={css`
-        background-color: ${isActive
-          ? 'var(--c--theme--colors--greyscale-100)'
-          : 'var(--c--theme--colors--greyscale-000)'};
+        /* Ensure the outline (handled by TreeView) matches the visual area */
+        .c__tree-view--node {
+          padding: ${spacingsTokens['3xs']};
+          border-radius: 4px;
+        }
 
         .light-doc-item-actions {
           display: flex;
@@ -126,9 +128,6 @@ export const DocSubPageItem = (props: TreeViewNodeProps<Doc>) => {
           right: 0;
           top: 0;
           height: 100%;
-          background: ${isDesktop
-            ? 'var(--c--theme--colors--greyscale-100)'
-            : 'var(--c--theme--colors--greyscale-000)'};
           z-index: 10;
         }
 
@@ -145,16 +144,15 @@ export const DocSubPageItem = (props: TreeViewNodeProps<Doc>) => {
           }
         }
 
-        &:hover,
-        &:focus-within {
+        .c__tree-view--node:hover,
+        .c__tree-view--node:focus-within {
           background-color: var(--c--theme--colors--greyscale-100);
-          border-radius: 4px;
 
           .light-doc-item-actions {
             display: flex;
             opacity: 1;
             visibility: visible;
-            background: var(--c--theme--colors--greyscale-100);
+            /* background: var(--c--theme--colors--greyscale-100); */
           }
         }