Skip to content

fix: improve slide-list overview preview sizing (#399) #400

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
igoroctaviano wants to merge 3 commits into
base: master
Choose a base branch
from
Open

fix: improve slide-list overview preview sizing (#399) #400

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
80608a0
fix: size slide-list overview previews from container and matrix
igoroctaviano Jul 15, 2026
fa881bf
fix: use integer DICOMweb viewport sizes for overview previews
igoroctaviano Jul 15, 2026
b7a3717
Fix overview map
igoroctaviano Jul 15, 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
9 changes: 9 additions & 0 deletions src/App.dark.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,15 @@
border: 2px solid @primary-color !important;
}

/**
* Mini-map: same inset from bottom as from left (px). Height clamping for tall
* overviews is done in JS ({@link clampOverviewMapInViewport}).
*/
.ol-overviewmap {
left: 8px;
bottom: 8px;
}

img {
object-fit: contain;
max-height: 100%;
Expand Down
9 changes: 9 additions & 0 deletions src/App.light.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,15 @@
border: 2px solid @primary-color !important;
}

/**
* Mini-map: same inset from bottom as from left (px). Height clamping for tall
* overviews is done in JS ({@link clampOverviewMapInViewport}).
*/
.ol-overviewmap {
left: 8px;
bottom: 8px;
}

img {
object-fit: contain;
max-height: 100%;
Expand Down
24 changes: 19 additions & 5 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -504,7 +504,21 @@ class App extends React.Component<AppProps, AppState> {
}

const layoutStyle = { height: '100vh' }
const layoutContentStyle = { height: '100%' }
/** Default fill when there is no MemoryFooter below Content. */
const layoutContentStyle = { height: '100%' as const }
/**
* Fill space between Header and Footer. `height: 100%` made Content as tall
* as the full Layout and left a larger gap above the memory footer than the
* overview mini-map's left inset. Only used on routes that render
* MemoryFooter when monitoring is enabled.
*/
const layoutContentWithFooterStyle = enableMemoryMonitoring
? {
flex: 1,
minHeight: 0,
overflow: 'hidden' as const,
}
: layoutContentStyle

if (this.state.redirectTo !== undefined) {
return (
Expand Down Expand Up @@ -553,7 +567,7 @@ class App extends React.Component<AppProps, AppState> {
clients={this.state.clients}
defaultClients={this.state.defaultClients}
/>
<Layout.Content style={layoutContentStyle}>
<Layout.Content style={layoutContentWithFooterStyle}>
{worklist}
</Layout.Content>
{enableMemoryMonitoring && (
Expand All @@ -577,7 +591,7 @@ class App extends React.Component<AppProps, AppState> {
clients={this.state.clients}
defaultClients={this.state.defaultClients}
/>
<Layout.Content style={layoutContentStyle}>
<Layout.Content style={layoutContentWithFooterStyle}>
<ParametrizedCaseViewer
clients={this.state.clients}
user={this.state.user}
Expand Down Expand Up @@ -607,7 +621,7 @@ class App extends React.Component<AppProps, AppState> {
clients={this.state.clients}
defaultClients={this.state.defaultClients}
/>
<Layout.Content style={layoutContentStyle}>
<Layout.Content style={layoutContentWithFooterStyle}>
<ParametrizedCaseViewer
clients={this.state.clients}
user={this.state.user}
Expand Down Expand Up @@ -636,7 +650,7 @@ class App extends React.Component<AppProps, AppState> {
clients={this.state.clients}
defaultClients={this.state.defaultClients}
/>
<Layout.Content style={layoutContentStyle}>
<Layout.Content style={layoutContentWithFooterStyle}>
Logged out
</Layout.Content>
{enableMemoryMonitoring && (
Expand Down
Loading
Loading