feat(viewer): Enhance sidebar functionality with adjustable width and responsive behavior

atlas/templates/atlas/collection_case_view_take.html

@@ -530,6 +530,8 @@
             top: 0;
             right: 0;
             width: min(850px, 95vw);
+            min-width: 360px;
+            max-width: 95vw;
             height: 100vh;
             background: var(--bs-body-bg);
             border-left: 1px solid var(--bs-border-color);
@@ -539,6 +541,8 @@
             transition: transform 0.2s ease-in-out;
             display: flex;
             flex-direction: column;
+            resize: horizontal;
+            overflow: auto;
         }
 
         .viewer-sidebar.open {
@@ -577,6 +581,17 @@
         .viewer-sidebar-body .viewer-resize-handle {
             display: none;
         }
+
+        body.viewer-sidebar-open {
+            margin-right: var(--viewer-sidebar-width, min(850px, 95vw));
+            transition: margin-right 0.2s ease-in-out;
+        }
+
+        @media (max-width: 991.98px) {
+            body.viewer-sidebar-open {
+                margin-right: 0;
+            }
+        }
     </style>
 
 {% endblock %}
@@ -964,6 +979,7 @@
             var HEIGHT_KEY = 'rad_viewer_h_' + COLL_PK;
             var MODE_KEY = 'rad_viewer_mode_' + COLL_PK;
             var POPOUT_STATE_KEY = 'rad_local_viewer_popout_state';
+            var SIDEBAR_W_KEY = 'rad_viewer_w_' + COLL_PK;
 
             var panel = document.getElementById('viewer-panel');
             var moveableHome = document.getElementById('viewer-moveable-home');
@@ -976,6 +992,7 @@
             var sidebarCloseBtn = document.getElementById('viewer-sidebar-close-btn');
             var popoutBtn = document.getElementById('viewer-popout-btn');
             var mainViewerEl = document.getElementById('main_viewer');
+            var rootStyle = document.documentElement.style;
 
             if (!panel || !moveableHome || !moveable || !container || !mainViewerEl) {
                 return;
@@ -991,6 +1008,29 @@
                 container.style.height = parseInt(savedH, 10) + 'px';
             }
 
+            function applySidebarWidth(px) {
+                if (!sidebarEl || !px || isNaN(px)) return;
+                var clamped = Math.max(360, Math.min(window.innerWidth * 0.95, Math.round(px)));
+                sidebarEl.style.width = clamped + 'px';
+                rootStyle.setProperty('--viewer-sidebar-width', clamped + 'px');
+            }
+
+            var savedW = localStorage.getItem(SIDEBAR_W_KEY);
+            if (savedW && !isNaN(parseInt(savedW, 10))) {
+                applySidebarWidth(parseInt(savedW, 10));
+            } else if (sidebarEl) {
+                rootStyle.setProperty('--viewer-sidebar-width', Math.round(sidebarEl.getBoundingClientRect().width) + 'px');
+            }
+
+            if (sidebarEl && 'ResizeObserver' in window) {
+                var sidebarResizeObserver = new ResizeObserver(function () {
+                    var width = Math.round(sidebarEl.getBoundingClientRect().width);
+                    rootStyle.setProperty('--viewer-sidebar-width', width + 'px');
+                    localStorage.setItem(SIDEBAR_W_KEY, width);
+                });
+                sidebarResizeObserver.observe(sidebarEl);
+            }
+
             var persistHeight = function () {
                 localStorage.setItem(HEIGHT_KEY, Math.round(container.getBoundingClientRect().height));
             };
@@ -1014,6 +1054,8 @@
                 if (!sidebarEl || !sidebarBody) return;
                 sidebarBody.appendChild(moveable);
                 sidebarEl.classList.add('open');
+                document.body.classList.add('viewer-sidebar-open');
+                rootStyle.setProperty('--viewer-sidebar-width', Math.round(sidebarEl.getBoundingClientRect().width) + 'px');
                 if (sidebarBtn) {
                     sidebarBtn.innerHTML = '<i class="bi bi-x-lg"></i> <span class="d-none d-sm-inline">Close sidebar</span>';
                     sidebarBtn.classList.replace('btn-outline-secondary', 'btn-secondary');
@@ -1025,6 +1067,7 @@
                 if (!sidebarEl) return;
                 moveableHome.appendChild(moveable);
                 sidebarEl.classList.remove('open');
+                document.body.classList.remove('viewer-sidebar-open');
                 if (sidebarBtn) {
                     sidebarBtn.innerHTML = '<i class="bi bi-layout-sidebar-reverse"></i> <span class="d-none d-sm-inline">Sidebar</span>';
                     sidebarBtn.classList.replace('btn-secondary', 'btn-outline-secondary');