panel actions

frontend/src/styles.css

@@ -44,7 +44,6 @@
   --danger-border: color-mix(in oklch, var(--danger) 45%, transparent);
   --danger-soft: color-mix(in oklch, var(--danger) 12%, transparent);
   --danger-subtle: color-mix(in oklch, var(--danger) 8%, transparent);
-  --detail-panel-width: 30em;
 
   /* --- Explorer states --- */
   --row-hover-bg: color-mix(in oklch, var(--accent) 6%, transparent);
@@ -55,6 +54,9 @@
 
   font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   font-size: 15px;
+
+  --detail-panel-width: 30em;
+  --documents-grid-title-size: 0.8rem;
 }
 
 html,
@@ -178,6 +180,41 @@ button.danger:hover:not([disabled]) {
   background: transparent;
 }
 
+.panel-actions .icon-button,
+.panel-actions button,
+.panel-actions a.icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  color: var(--muted);
+  padding: 0.25rem;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease;
+  text-decoration: none;
+}
+
+.panel-actions .icon-button:hover:not([disabled]),
+.panel-actions button:hover:not([disabled]),
+.panel-actions a.icon-button:hover {
+  background: var(--sidebar-hover-bg);
+  color: var(--fg);
+}
+
+.panel-actions .icon-button.ghost,
+.panel-actions button.icon-button.ghost {
+  color: var(--muted);
+  padding: 0.25rem;
+}
+
+.panel-actions .icon-button.ghost:hover:not([disabled]),
+.panel-actions button.icon-button.ghost:hover:not([disabled]) {
+  color: var(--fg);
+  background: var(--sidebar-hover-bg);
+}
+
 .with-icon {
   display: inline-flex;
   align-items: center;
@@ -1019,7 +1056,6 @@ button.danger:hover:not([disabled]) {
 
 .sidebar-correspondent-item {
   display: block;
-  width: 100%;
   background: transparent;
   border-radius: 4px;
   padding: 0.35rem 0.5rem;
@@ -1528,8 +1564,12 @@ button.danger:hover:not([disabled]) {
 
 .panel-actions {
   display: flex;
-  align-items: center;
   gap: 0.5rem;
+  flex-grow: 1;
+}
+
+.panel-actions .spacer {
+  flex-grow: 1;
 }
 
 .detail-panel .panel-body {
@@ -1542,15 +1582,6 @@ button.danger:hover:not([disabled]) {
   padding: 1.25rem;
 }
 
-.detail-actions {
-  display: flex;
-  gap: 0.32rem;
-  margin: 0.6rem 0;
-}
-
-.detail-ocr-trigger {
-  margin: 0.75rem 0;
-}
 
 .detail-ocr__content {
   max-height: 60vh;