Skip to content

🐞 Fix footerless minimap positioning and collapsed toggle clipping #207

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
JFWooten4 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

🐞 Fix footerless minimap positioning and collapsed toggle clipping #207

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
18 changes: 13 additions & 5 deletions src/viewer/navigation/minimap.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -320,8 +320,8 @@ html.minimap-disabled body::-webkit-scrollbar-thumb {

.minimap-collapsed .minimap-shell {
top: auto;
/* Fixed-position insets exclude the native scrollbar gutter. */
right: calc(100% - 100vw);
/* Stay on the layout side of the native scrollbar, not underneath it. */
right: 0;
width: 36px;
height: 36px;
min-height: 36px;
Expand All @@ -333,6 +333,14 @@ html.minimap-disabled body::-webkit-scrollbar-thumb {

.minimap-collapsed .minimap-controls {
flex: 1 1 auto;
box-sizing: border-box;
/* Unlike the expanded strip, the standalone button needs every edge. */
border: 1px solid var(--border);
}

.minimap-collapsed.minimap-left .minimap-shell {
right: auto;
left: 0;
}

.minimap-collapsed .minimap-control:not(.minimap-collapse) {
Expand All @@ -344,10 +352,10 @@ html.minimap-disabled body::-webkit-scrollbar-thumb {
flex: 1 1 auto;
}

/* The bottom-right corner of a split pane may be occupied by host chrome.
Raise both expanded and collapsed minimap controls out of that hit area. */
/* Only the footnote scrubber needs clearance for the split-pane host chrome.
In documents without footnotes, anchor the controls at the viewport bottom. */
@media (max-width: 1200px) {
:root {
:root:has(#document-scrubber:not([hidden])) {
--split-view-bottom-clearance: 48px;
}
}
Expand Down
9 changes: 8 additions & 1 deletion tests/minimap.test.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -458,7 +458,7 @@ test('native scrollbar gutter respects toolbar rows, the scrubber, and split-vie
styles,
/:root\s*\{\s*--native-scrollbar-top:\s*52px;\s*--split-view-bottom-clearance:\s*0px;\s*--native-scrollbar-bottom:\s*calc\(var\(--document-scrubber-height, 0px\) \+ var\(--split-view-bottom-clearance\)\);/,
);
assert.match(styles, /@media\s*\(max-width:\s*1200px\)\s*\{\s*:root\s*\{\s*--split-view-bottom-clearance:\s*48px;/);
assert.match(styles, /@media\s*\(max-width:\s*1200px\)\s*\{\s*:root:has\(#document-scrubber:not\(\[hidden\]\)\)\s*\{\s*--split-view-bottom-clearance:\s*48px;/);
assert.match(styles, /:root\.toolbar-two-rows\s*\{\s*--native-scrollbar-top:\s*100px;/);
assert.match(
styles,
Expand All @@ -472,6 +472,13 @@ test('native scrollbar gutter respects toolbar rows, the scrubber, and split-vie
});


test('collapsed minimap toggle stays outside the native scrollbar and keeps its border', () => {
assert.match(styles, /\.minimap-collapsed \.minimap-shell\s*\{[^}]*?right:\s*0;/);
assert.doesNotMatch(styles, /right:\s*calc\(100% - 100vw\)/);
assert.match(styles, /\.minimap-collapsed \.minimap-controls\s*\{[^}]*?border:\s*1px solid var\(--border\);/);
assert.match(styles, /\.minimap-collapsed\.minimap-left \.minimap-shell\s*\{[^}]*?right:\s*auto;[^}]*?left:\s*0;/);
});

test('minimap has a dedicated collapse button without a duplicate settings toggle', () => {
const f = fixture(3);
assert.doesNotMatch(viewerMarkup, /id="show-minimap"/);
Expand Down
Loading