cleanup

frontend/src/styles/documents/controls.css

@@ -4,7 +4,7 @@
   gap: 0.25rem;
 }
 
-.view-toggle__button {
+.toggle-button {
   border: 1px solid var(--border);
   background: transparent;
   color: var(--muted);
@@ -14,24 +14,19 @@
   transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
 }
 
-.view-toggle__button:hover,
-.view-toggle__button:focus-visible {
+.toggle-button:hover,
+.toggle-button:focus-visible {
   background: var(--surface-subtle);
   color: var(--fg);
   outline: none;
 }
 
-.view-toggle__button.active {
+.toggle-button.active {
   background: var(--accent);
   color: var(--on-accent);
   border-color: var(--accent);
 }
 
-.view-toggle__icon {
-  width: 1.4rem;
-  height: 1.4rem;
-}
-
 .documents-actions__sort-group {
   display: inline-flex;
   align-items: center;

frontend/src/styles/documents/listing.css

@@ -2,10 +2,18 @@
   padding: 0 0.75rem 0.75rem 0.75rem;
   display: flex;
   flex-direction: column;
+  flex: 1 1 auto;
   min-height: 0;
+  overflow-y: auto;
   --documents-list-row-height: calc(48px + 0.2rem);
 }
 
+.documents-panel:focus-visible {
+  outline: 2px solid var(--selection-ring);
+  outline-offset: 2px;
+  border-radius: 0.25rem;
+}
+
 .tags-panel,
 .correspondents-panel {
   padding: 1.25rem;
@@ -53,12 +61,6 @@
   overflow: hidden;
 }
 
-.documents-panel .panel-section__body {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
 .panel-floating-region {
   position: sticky;
   top: 0.5rem;
@@ -221,25 +223,10 @@
   }
 }
 
-.documents-panel .documents-scroll {
-  overflow-y: auto;
-  background: transparent;
-  min-height: 0;
-  padding-right: 0.3rem;
-  flex-grow: 1;
-}
-
-.documents-panel .documents-scroll:focus-visible {
-  outline: 2px solid var(--selection-ring);
-  outline-offset: 2px;
-  border-radius: 0.25rem;
-}
-
 .documents-panel table {
   max-width: 100%;
   border-collapse: collapse;
   font-size: 0.88rem;
-  margin-top: 0.4rem;
 }
 
 .documents-panel thead th {
@@ -258,7 +245,7 @@
   text-align: left;
 }
 
-.documents-panel--view-grid .documents-scroll {
+.documents-panel--view-grid {
   padding: 0.35rem 0.5rem 1rem;
 }
 

frontend/src/styles/documents/panel-sections.css

@@ -51,12 +51,13 @@
 .breadcrumb-trail {
   display: flex;
   align-items: center;
-  gap: 0.35rem;
+  gap: 0.05rem;
   flex-wrap: nowrap;
   min-width: 0;
   flex: 1 1 auto;
   max-width: 100%;
   overflow: hidden;
+  margin-left: -0.25rem;
 }
 
 .breadcrumb-trail--measure {
@@ -91,7 +92,8 @@
 }
 
 button.breadcrumb-trail__link,
-.breadcrumb-trail__ellipsis-button {
+.breadcrumb-trail__ellipsis-button,
+.breadcrumb-trail__link.is-current {
   padding: 0.25rem;
   background: none;
   border-radius: 0.25rem;

frontend/src/styles/documents/shared-snippets.css

@@ -19,8 +19,3 @@
   width: 100%;
   height: 100%;
 }
-
-.panel-header .icon-button svg {
-  width: 1.41rem;
-  height: 1.41rem;
-}

frontend/src/styles/documents/viewer.css

@@ -396,6 +396,25 @@
   height: 100%;
 }
 
+.document-viewer__object--audio,
+.document-viewer__object--video {
+  width: 100%;
+  max-width: 100%;
+  margin: auto;
+  background: var(--surface-overlay, #000);
+}
+
+.document-viewer__object--audio {
+  height: auto;
+  background: transparent;
+}
+
+.document-viewer__object--video {
+  height: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
 .document-viewer__object:not(.document-viewer__object--image) {
   height: 100%;
 }