panels

frontend/src/styles/base/theme.css

@@ -101,6 +101,7 @@
   --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
 
   --detail-panel-width: calc(100vw / 3);
+  --sidebar-width: 20em;
   --documents-grid-title-size: 0.8rem;
 }
 

frontend/src/styles/detail/detail-panels.css

@@ -12,6 +12,48 @@
   display: flex;
   flex-direction: column;
   z-index: 1000000;
+  overflow: visible;
+}
+
+.detail-panel--resizing {
+  cursor: col-resize;
+  user-select: none;
+}
+
+.detail-panel__resize-handle {
+  position: absolute;
+  top: 0;
+  left: -0.4rem;
+  width: 0.8rem;
+  height: 100%;
+  border: none;
+  background: transparent;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: col-resize;
+}
+
+.detail-panel__resize-handle span {
+  width: 2px;
+  height: 32px;
+  border-radius: 999px;
+  background: transparent;
+  transition: background 120ms ease;
+}
+
+.detail-panel__resize-handle:hover span,
+.detail-panel__resize-handle:focus-visible span,
+.detail-panel__resize-handle.is-active span {
+  background: var(--accent);
+}
+
+.detail-panel__resize-handle:focus-visible {
+  outline: 2px solid color-mix(in oklch, var(--accent) 60%, transparent);
+  outline-offset: 2px;
+  border-radius: 999px;
 }
 
 .panel-header {

frontend/src/styles/documents/listing.css

@@ -79,7 +79,7 @@
   justify-content: center;
   flex-wrap: nowrap;
   gap: 0.75rem;
-  z-index: 2000000;
+  z-index: 950000;
 }
 
 .panel-floating__label {

frontend/src/styles/layout/structure.css

@@ -14,7 +14,7 @@
   position: relative;
 }
 
-.documents-main--sidebar-collapsed {
+.documents-main--sidebar-hidden {
   position: relative;
 }
 
@@ -30,7 +30,7 @@
   box-shadow: -12px 0 24px -12px var(--shadow-faint);
 }
 
-.documents-main:not(.documents-main--sidebar-collapsed) .main-content {
+.documents-main:not(.documents-main--sidebar-hidden) .main-content {
   border-left: 1px solid var(--border);
 }
 
@@ -77,7 +77,7 @@
 }
 
 
-.documents-main--sidebar-collapsed {
+.documents-main--sidebar-hidden {
   position: relative;
   grid-template-columns: auto minmax(0, 1fr);
 }

frontend/src/styles/sidebar/sidebar.css

@@ -128,10 +128,53 @@
   color: var(--sidebar-fg);
   display: flex;
   flex-direction: column;
-  width: 20em;
-  max-width: 20em;
-  flex: 0 0 20em;
+  width: min(100vw, var(--sidebar-width));
+  max-width: min(100vw, var(--sidebar-width));
+  flex: 0 0 var(--sidebar-width);
   background: var(--bg);
+  position: relative;
+}
+
+.sidebar--resizing {
+  cursor: col-resize;
+  user-select: none;
+}
+
+.sidebar__resize-handle {
+  position: absolute;
+  top: 0;
+  right: -0.4rem;
+  width: 0.8rem;
+  height: 100%;
+  border: none;
+  background: transparent;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: col-resize;
+  z-index: 1;
+}
+
+.sidebar__resize-handle span {
+  width: 2px;
+  height: 32px;
+  border-radius: 999px;
+  background: transparent;
+  transition: background 120ms ease;
+}
+
+.sidebar__resize-handle:hover span,
+.sidebar__resize-handle:focus-visible span,
+.sidebar__resize-handle.is-active span {
+  background: var(--accent);
+}
+
+.sidebar__resize-handle:focus-visible {
+  outline: 2px solid color-mix(in oklch, var(--accent) 60%, transparent);
+  outline-offset: 2px;
+  border-radius: 999px;
 }
 
 .sidebar__body {