-
+
{
+ if (typeof document === 'undefined') {
+ return;
+ }
+
+ const cssValue = String(DOCUMENT_VIEWER_PORTRAIT_HEIGHT_RATIO);
+ const cssText = `:root { --document-viewer-portrait-height-ratio: ${cssValue}; }`;
+
+ let styleEl = document.getElementById(PORTRAIT_RATIO_STYLE_ID);
+ if (!styleEl) {
+ styleEl = document.createElement('style');
+ styleEl.id = PORTRAIT_RATIO_STYLE_ID;
+ document.head.appendChild(styleEl);
+ }
+
+ if (styleEl.textContent !== cssText) {
+ styleEl.textContent = cssText;
+ }
+};
+
+const computeStackedLayoutBreakpoint = () => {
+ const viewportHeight = typeof window !== 'undefined' ? window.innerHeight : 900;
+ const portraitViewportWidth = viewportHeight
+ * DOCUMENT_VIEWER_PORTRAIT_HEIGHT_RATIO
+ * PORTRAIT_WIDTH_TO_HEIGHT;
+ const detailsColumnWidth = 320; // px ~ 20rem for metadata & tabs
+ const gutterAllowance = 48; // padding + grid gap
+
+ return portraitViewportWidth + detailsColumnWidth + gutterAllowance;
+};
+
+export const useViewerLayoutMode = (ref, dependency) => {
+ const [isStacked, setIsStacked] = useState(false);
+
+ useLayoutEffect(() => {
+ ensurePortraitRatioStyle();
+ }, []);
+
+ useLayoutEffect(() => {
+ const node = ref?.current;
+ if (!node) {
+ setIsStacked(false);
+ return undefined;
+ }
+
+ let frame = null;
+ const commitMeasure = (width) => {
+ if (frame) {
+ cancelAnimationFrame(frame);
+ }
+ frame = requestAnimationFrame(() => {
+ const breakpoint = computeStackedLayoutBreakpoint();
+ setIsStacked(width < breakpoint);
+ });
+ };
+
+ const measure = () => {
+ commitMeasure(node.getBoundingClientRect().width);
+ };
+
+ measure();
+
+ if (typeof ResizeObserver === 'undefined') {
+ window.addEventListener('resize', measure);
+ return () => {
+ if (frame) {
+ cancelAnimationFrame(frame);
+ }
+ window.removeEventListener('resize', measure);
+ };
+ }
+
+ const observer = new ResizeObserver((entries) => {
+ if (!entries.length) {
+ return;
+ }
+ commitMeasure(entries[0].contentRect.width);
+ });
+
+ observer.observe(node);
+
+ return () => {
+ observer.disconnect();
+ if (frame) {
+ cancelAnimationFrame(frame);
+ }
+ };
+ }, [ref, dependency]);
+
+ return isStacked;
+};
+
+export default useViewerLayoutMode;
diff --git a/frontend/src/styles/detail/detail-panels.css b/frontend/src/styles/detail/detail-panels.css
index dd76a19..c30b43a 100644
--- a/frontend/src/styles/detail/detail-panels.css
+++ b/frontend/src/styles/detail/detail-panels.css
@@ -75,7 +75,7 @@
}
.detail-panel__content .document-viewer-panel__body {
- padding: 0.5rem 1rem;
+ padding: 0.5rem 0.5rem 0;
}
.detail-section__header {
diff --git a/frontend/src/styles/documents/viewer.css b/frontend/src/styles/documents/viewer.css
index f415d16..5cfccab 100644
--- a/frontend/src/styles/documents/viewer.css
+++ b/frontend/src/styles/documents/viewer.css
@@ -14,6 +14,15 @@
overflow: auto;
}
+.document-viewer-panel__body--stacked {
+ flex-direction: column;
+}
+
+.document-viewer-panel__body--stacked .document-viewer,
+.document-viewer-panel__body--stacked .document-viewer--stacked {
+ min-height: auto;
+}
+
.document-viewer-panel__body > .document-viewer,
.document-viewer-panel__body > .document-viewer--loading {
flex: 1;
@@ -27,14 +36,14 @@
align-items: stretch;
gap: 1rem;
min-height: 0;
- padding: 1rem 1rem;
+ padding: 0.25rem 1rem 1rem;
}
.document-viewer--stacked {
display: flex;
flex-direction: column;
gap: 0.5rem;
- padding: 0.5rem;
+ padding: 0.5rem 1rem 1rem;
overflow: auto;
}
@@ -51,7 +60,7 @@
.document-viewer--stacked .document-viewer__details-pane {
flex: 1 1 auto;
- overflow: auto;
+ overflow: visible;
order: 0;
}