✨(frontend) show full nested doc names with horizontal scroll support

horizontal overflow enabled and opacity used for sticky actions visibility

Signed-off-by: Cyril <[email protected]>

Author: Ovgodd

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

@@ -116,9 +116,11 @@ export const DocSubPageItem = (props: TreeViewNodeProps<Doc>) => {
           ? 'var(--c--theme--colors--greyscale-100)'
           : 'var(--c--theme--colors--greyscale-000)'};
         .light-doc-item-actions {
-          display: ${menuOpen || !isDesktop ? 'flex' : 'none'};
-          position: absolute;
+          display: flex;
+          position: sticky;
           right: 0;
+
+          opacity: ${menuOpen || !isDesktop ? '1' : '0'};
           background: ${isDesktop
             ? 'var(--c--theme--colors--greyscale-100)'
             : 'var(--c--theme--colors--greyscale-000)'};
@@ -137,7 +139,7 @@ export const DocSubPageItem = (props: TreeViewNodeProps<Doc>) => {
           background-color: var(--c--theme--colors--greyscale-100);
           border-radius: 4px;
           .light-doc-item-actions {
-            display: flex;
+            opacity: 1;
             background: var(--c--theme--colors--greyscale-100);
           }
         }

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

@@ -184,6 +184,7 @@ export const DocTree = ({ currentDoc }: DocTreeProps) => {
         /* Remove outline from TreeViewItem wrapper elements */
         .c__tree-view--row {
           outline: none !important;
+          min-width: max-content;
 
           &:focus-visible {
             outline: none !important;
@@ -195,7 +196,7 @@ export const DocTree = ({ currentDoc }: DocTreeProps) => {
           margin-top: -10px;
 
           .c__tree-view {
-            overflow: hidden !important;
+            overflow: visible !important;
           }
         }
       `}

src/frontend/apps/impress/src/features/left-panel/components/LeftPanelDocContent.tsx

@@ -17,7 +17,7 @@ export const LeftPanelDocContent = () => {
     <Box
       $flex={1}
       $width="100%"
-      $css="width: 100%; overflow-y: auto; overflow-x: hidden;"
+      $css="width: 100%; overflow-y: auto"
       className="--docs--left-panel-doc-content"
     >
       <DocTree currentDoc={currentDoc} />