Skip to content

fix navigator comments being scrolled off #13953

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
printfdebugging wants to merge 2 commits into
base: main
Choose a base branch
from
+16 −4
Open

fix navigator comments being scrolled off #13953

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e3a9e7d
use const instead of var
printfdebugging Dec 30, 2025
6eea389
increase navigator-dock-wrapper width so that it doesn't overflow in x
printfdebugging Jan 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 13 additions & 1 deletion browser/css/jssidebar.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -577,8 +577,20 @@ span.jsdialog.sidebar.ui-treeview-notexpandable {
#navigation-options .tab.selected:after {
border-bottom-color: rgba(var(--doc-type), 1);
}

/*
* NOTE: there are some hidden elements on the navigation sidebar
* and the horizontal overflow on `navigator-dock-wrapper` is
* hidden, so if the width is to be changed, then please do so
* with the overflow-x visible so that it's not set too small.
*
* when the width is is less than the largest elements, which
* might be hidden, the x overflow starts building up. and when
* the elements are dynamically loaded, they might get scrolled
* off to the left giving an impression that they are cut off.
*/
#navigation-sidebar {
width: 250px;
width: 266px;
Copy link
Contributor

@banobepascal banobepascal Jan 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Image

Unfortunately, adjusting the width doesn't fix the problem, as it seems to be a position problem.

Image

Copy link
Contributor Author

@printfdebugging printfdebugging Jan 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@eszkadev for how to test

  1. open a document with comments
  2. click on the three dots on the comment (to show the comment menu) and click on "Show in Navigator"
  3. see the navigator.

The comments were scrolled off to the left before this patch (because there's a hidden element which is wider than 250px).

Copy link
Contributor

@eszkadev eszkadev Jan 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see , even with English I see the same result

Copy link
Contributor Author

@printfdebugging printfdebugging Jan 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So do I consider this approved or do we need some changes here? Because my investigations suggested it's a width issue (the width of navigator being smaller than the widest element in it (which is hidden) leading to overflow and hence cut-off. If you inspect the navigator-doc-wrapper element, you will find that it has overflow-x hidden, unchecking that css property shows the problem

image

display: none;
border-inline-end: 1px solid var(--color-border);
/* bg set in #sidebar-dock-wrapper, #navigator-dock-wrapper */
Expand Down
4 changes: 2 additions & 2 deletions browser/src/control/Control.NavigatorPanel.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,13 +98,13 @@ class NavigatorPanel extends SidebarBase {
}

// Create header section
var navHeader = window.L.DomUtil.create(
const navHeader = window.L.DomUtil.create(
'div',
'navigation-header',
navContainer,
);

var navTitle = window.L.DomUtil.create(
const navTitle = window.L.DomUtil.create(
'span',
'navigation-title',
navHeader,
Expand Down
2 changes: 1 addition & 1 deletion cypress_test/integration_tests/desktop/impress/statusbar_spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ describe(['tagdesktop', 'tagnextcloud', 'tagproxy'], 'Statubar tests.', function
if (Cypress.env('INTEGRATION') === 'nextcloud') {
desktopHelper.showStatusBarIfHidden ();
}
desktopHelper.shouldHaveZoomLevel('70');
desktopHelper.shouldHaveZoomLevel('60');
});

it('Selected slide.', function() {
Expand Down
Loading