🐛(frontend) show full nested doc names with resizable panel by Ovgodd · Pull Request #1456 · suitenumerique/docs

Ovgodd · 2025-10-07T09:05:52Z

Purpose

EDIT & FINAL: Following a discussion with @rl-83, we replaced the horizontal scroll approach with an adjustable panel bar using react-resizable-panels.

This change improves usability by allowing users to resize the document tree panel within defined limits. It ensures better visibility of nested documents without using scrollbars and aligns with the implementation used in our shared UI Kit (where resizing is handled via the MainLayout, not inside the document tree component).

added e2e tests to cover this new resizable behavior too.

issue : 1180

ajustbar.mp4

Proposal

Add react-resizable-panels (v3.0.6) dependency
Implement PanelGroup with a horizontal resize handle in MainLayout
Persist panel size in localStorage
Set min width to 300px, max width to 450px (capped at 40% of viewport)
Keep mobile behavior unchanged (no resize handle)
Add e2e tests for resizable panel behavior

github-actions · 2025-10-13T12:39:58Z

Size Change: +11.2 kB (+0.31%)

Total Size: 3.67 MB

Filename	Size	Change
`apps/impress/out/_next/static/2d5a9810/_buildManifest.js`	0 B	-882 B (removed)	🏆
`apps/impress/out/_next/static/chunks/1245.js`	0 B	-520 kB (removed)	🏆
`apps/impress/out/_next/static/chunks/8495.js`	53.8 kB	+627 B (+1.18%)
`apps/impress/out/_next/static/a487248b/_buildManifest.js`	880 B	+880 B (new file)	🆕
`apps/impress/out/_next/static/chunks/8885.js`	530 kB	+530 kB (new file)	🆕

_{compressed-size-action}

AntoLC

The feature works great, I think we can improve the code though, by separating more the components in MainLayout.

I can see we can move the left panel on the grid page as well, I thought it was only with the tree part, is it as expected ?

AntoLC · 2025-10-15T07:17:00Z

src/frontend/yarn.lock

The yarn.lock gives changes in local.

AntoLC · 2025-10-15T07:41:07Z

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

-          display: ${menuOpen || !isDesktop ? 'flex' : 'none'};
-          position: absolute;
+          display: flex;
+          position: sticky;
          right: 0;
+
+          opacity: ${menuOpen || !isDesktop ? '1' : '0'};


By doing like that the name is cropped far before needed, because the actions button take place even when not displayed.

AntoLC · 2025-10-15T07:43:52Z

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

Not introduce in this PR but I can see there is differences on how the actions buttons are displayed between the top parent and the children, I think it should be &:focus-visible here.

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

Lines 243 to 246 in f059014

&:focus-within {

.doc-tree-root-item-actions {

opacity: 1;

}

AntoLC · 2025-10-15T07:55:34Z

src/frontend/apps/impress/src/layouts/MainLayout.tsx

+          <PanelGroup
+            autoSaveId="docs-left-panel-persistence"
+            direction="horizontal"
+          >
+            <Panel
+              ref={ref}
+              order={0}
+              defaultSize={minPanelSize}
+              minSize={minPanelSize}
+              maxSize={maxPanelSize}
+            >
+              <LeftPanel />
+            </Panel>
+            <PanelResizeHandle
+              className="border-clr-surface-primary"
+              style={{
+                borderRightWidth: '1px',
+                borderRightStyle: 'solid',
+                borderRightColor: colorsTokens['greyscale-200'],
+                width: '1px',
+                cursor: 'col-resize',
+              }}
+            />
+            <Panel order={1}>
+              <Box
+                as="main"
+                role="main"
+                aria-label={t('Main content')}
+                id={MAIN_LAYOUT_ID}
+                $align="center"
+                $width="100%"
+                $height={`calc(100dvh - ${HEADER_HEIGHT}px)`}
+                $padding={{
+                  all: 'base',
+                }}
+                $background={
+                  currentBackgroundColor === 'white'
+                    ? colorsTokens['greyscale-000']
+                    : colorsTokens['greyscale-050']
+                }
+                $css={css`
+                  overflow-y: auto;
+                  overflow-x: clip;
+                `}
+              >
+                {children}
+              </Box>
+            </Panel>
+          </PanelGroup>
+        ) : (


It should have its own component I think.

AntoLC · 2025-10-15T07:58:19Z

src/frontend/apps/impress/src/layouts/MainLayout.tsx

+              <Box
+                as="main"
+                role="main"
+                aria-label={t('Main content')}
+                id={MAIN_LAYOUT_ID}
+                $align="center"
+                $width="100%"
+                $height={`calc(100dvh - ${HEADER_HEIGHT}px)`}
+                $padding={{
+                  all: 'base',
+                }}
+                $background={
+                  currentBackgroundColor === 'white'
+                    ? colorsTokens['greyscale-000']
+                    : colorsTokens['greyscale-050']
+                }
+                $css={css`
+                  overflow-y: auto;
+                  overflow-x: clip;
+                `}
+              >
+                {children}
+              </Box>
+            </Panel>


I can see the code almost the same for the mobile part under, can we factorize this part.

AntoLC · 2025-10-15T07:59:27Z

src/frontend/apps/impress/src/layouts/MainLayout.tsx

+              <LeftPanel />
+            </Panel>
+            <PanelResizeHandle
+              className="border-clr-surface-primary"


Not sure we use it.

AntoLC · 2025-10-15T08:20:31Z

src/frontend/apps/impress/src/layouts/MainLayout.tsx

+  useEffect(() => {
+    const handleResizeStart = () => {
+      setIsResizing(true);
+      if (resizeTimeoutRef.current) {
+        clearTimeout(resizeTimeoutRef.current);
+      }
+      resizeTimeoutRef.current = window.setTimeout(() => {
+        setIsResizing(false);
+      }, 150);
+    };
+
+    window.addEventListener('resize', handleResizeStart);
+
+    return () => {
+      window.removeEventListener('resize', handleResizeStart);
+      if (resizeTimeoutRef.current) {
+        clearTimeout(resizeTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  // Keep pixel-based constraints while the library works in percentages.
+  // We translate px -> % on mount and on viewport resizes so that:
+  // - min stays ~300px, max stays ~450px (capped to 40% on small screens)
+  // - on mobile, the left panel collapses (min = 0)
+  // - when enableResize is false, we lock the size by setting max == min
+  useEffect(() => {
+    const updatePanelSize = () => {
+      const min = Math.round(calculateDefaultSize(MIN_PANEL_SIZE, isDesktop));
+      const max = Math.round(
+        Math.min(calculateDefaultSize(MAX_PANEL_SIZE, isDesktop), 40),
+      );
+      setMinPanelSize(isDesktop ? min : 0);
+      enableResize ? setMaxPanelSize(max) : setMaxPanelSize(min);
+    };
+
+    updatePanelSize();
+    window.addEventListener('resize', updatePanelSize);
+
+    return () => {
+      window.removeEventListener('resize', updatePanelSize);
+    };
+  }, [isDesktop, enableResize]);


This part can be improve I think, we use twice the same listener (resize), we could use only one.
If isDesktop is false, I have the feeling we don't need to listen anything.

When using useEffect, it is good practice to use useCallback around the function called inside, calculateDefaultSize should be inside a useCallback.

I think by having its own component we will be able to remove this notion of isDesktop, this component will be called only when desktop, removing complexity.

AntoLC · 2025-10-17T06:51:02Z

src/frontend/apps/impress/src/layouts/components/ResizableLeftPanel.tsx

+        minSize={minPanelSize}
+        maxSize={maxPanelSize}
+      >
+        <LeftPanel />


Could it be a parameter as well, to be fully generic ?

AntoLC · 2025-10-17T06:51:19Z

src/frontend/apps/impress/package.json

    "react-dom": "*",
    "react-i18next": "15.7.3",
    "react-intersection-observer": "9.16.0",
+    "react-resizable-panels": "^3.0.6",


Suggested change

"react-resizable-panels": "^3.0.6",

"react-resizable-panels": "3.0.6",

AntoLC · 2025-10-17T07:00:17Z

src/frontend/yarn.lock

You should not remove the yarn.lock, you should put back the previous one, then do yarn, it will only include the new dependency react-resizable-panels and what is needed with it.

AntoLC · 2025-10-17T07:06:54Z

src/frontend/apps/impress/src/layouts/MainLayout.tsx

-        >
-          {children}
-        </Box>
+        {renderContent()}


It is a bit anti-pattern like that, what about its own component MainLayoutContent ?

Suggested change

{renderContent()}

<MainLayoutContent enableResizablePanel={enableResizablePanel}>{children}</MainLayoutContent>

AntoLC · 2025-10-17T07:12:46Z

CHANGELOG.md

 - 🐛(frontend) reduce no access image size from 450 to 300 #1463
 - 🐛(frontend) preserve interlink style on drag-and-drop in editor #1460
 - ✨(frontend) load docs logo from public folder via url #1462
+- 🐛(frontend) show full nested doc names with ajustable bar #1456


Under the Unreleased part.

AntoLC

Nice feature !

mainlayout and leftpanel updated with resizable panel saved in localstorage Signed-off-by: Cyril <[email protected]> ✨(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]> ✨(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]> ✨(frontend) add resizable-panels lib also used in our shared ui kit needed for adaptable ui consistent with our shared ui kit components Signed-off-by: Cyril <[email protected]>

Ovgodd requested a review from AntoLC October 7, 2025 09:05

Ovgodd self-assigned this Oct 7, 2025

Ovgodd added bug Something isn't working frontend triage multipages labels Oct 7, 2025

Ovgodd force-pushed the fix/1180-make-horizontal-overflow-panel branch from 0abe61e to f0c1194 Compare October 7, 2025 09:06

Ovgodd marked this pull request as ready for review October 7, 2025 09:06

Ovgodd marked this pull request as draft October 8, 2025 08:44

Ovgodd force-pushed the fix/1180-make-horizontal-overflow-panel branch 5 times, most recently from 3e294e9 to c255024 Compare October 13, 2025 12:30

Ovgodd marked this pull request as ready for review October 13, 2025 12:31

Ovgodd force-pushed the fix/1180-make-horizontal-overflow-panel branch from c255024 to 3406fee Compare October 13, 2025 12:31

Ovgodd force-pushed the fix/1180-make-horizontal-overflow-panel branch from 3406fee to f059014 Compare October 13, 2025 12:43

AntoLC reviewed Oct 15, 2025

View reviewed changes

AntoLC linked an issue Oct 15, 2025 that may be closed by this pull request

🐛 Panel bar adjustable #1180

Closed

Ovgodd force-pushed the fix/1180-make-horizontal-overflow-panel branch 4 times, most recently from 6d49207 to 3326f02 Compare October 16, 2025 08:50

Ovgodd requested a review from AntoLC October 16, 2025 08:52

AntoLC reviewed Oct 17, 2025

View reviewed changes

Ovgodd force-pushed the fix/1180-make-horizontal-overflow-panel branch from 41c4f3b to 4df1842 Compare October 20, 2025 09:17

Ovgodd requested a review from AntoLC October 20, 2025 09:18

Ovgodd force-pushed the fix/1180-make-horizontal-overflow-panel branch from e83ad59 to acb1d71 Compare October 21, 2025 07:42

AntoLC approved these changes Oct 21, 2025

View reviewed changes

Ovgodd force-pushed the fix/1180-make-horizontal-overflow-panel branch from 08af57d to a833fdc Compare October 21, 2025 08:59

Ovgodd merged commit a833fdc into main Oct 21, 2025
21 of 22 checks passed

Ovgodd deleted the fix/1180-make-horizontal-overflow-panel branch October 21, 2025 09:41

Ovgodd changed the title ~~🐛(frontend) show full nested doc names with horizontal scroll support~~ 🐛(frontend) show full nested doc names with resizable panel Oct 27, 2025

AntoLC mentioned this pull request Nov 10, 2025

🔖(minor) release 3.9.0 #1576

Merged

	"react-resizable-panels": "^3.0.6",
	"react-resizable-panels": "3.0.6",

	{renderContent()}
	<MainLayoutContent enableResizablePanel={enableResizablePanel}>{children}</MainLayoutContent>

Comments

Conversation

Ovgodd commented Oct 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Purpose

Proposal

Uh oh!

github-actions bot commented Oct 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

AntoLC left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

AntoLC Oct 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

AntoLC left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Ovgodd commented Oct 7, 2025 •

edited

Loading

github-actions bot commented Oct 13, 2025 •

edited

Loading

AntoLC Oct 15, 2025 •

edited

Loading