From dfbd47f219c7db49814fd87024021311af87ae6c Mon Sep 17 00:00:00 2001
From: Nils Schneider <nils.schneider@posteo.de>
Date: Thu, 13 Nov 2025 13:22:10 +0100
Subject: [PATCH] fix

---
 frontend/src/desktop/DesktopDocumentCard.tsx  |  6 +--
 frontend/src/desktop/DesktopWorkspace.tsx     | 10 +---
 .../src/desktop/pointer/useDeskPointer.js     |  7 ++-
 frontend/src/desktop/useDeskWorkspaceProps.ts | 28 ----------
 .../documents/SelectionFloatingActions.tsx    | 15 +++---
 .../hooks/documents/useDocumentsWorkspace.ts  |  1 -
 frontend/src/preview/DocumentViewerPanel.tsx  |  8 ++-
 frontend/src/sidebar/SidebarContext.tsx       |  4 +-
 frontend/src/styles/base/theme.css            | 53 +++++++++++--------
 frontend/src/styles/detail/detail-panels.css  | 26 ++++++++-
 frontend/src/styles/documents/listing.css     | 40 +++++---------
 frontend/src/styles/documents/viewer.css      |  2 +-
 12 files changed, 93 insertions(+), 107 deletions(-)

diff --git a/frontend/src/desktop/DesktopDocumentCard.tsx b/frontend/src/desktop/DesktopDocumentCard.tsx
index ab4485a..944e88f 100644
--- a/frontend/src/desktop/DesktopDocumentCard.tsx
+++ b/frontend/src/desktop/DesktopDocumentCard.tsx
@@ -30,7 +30,7 @@ interface DesktopDocumentCardProps {
   getDocumentAsset?: (...args: any[]) => unknown;
   handleNavigatorSnapshot?: (...args: any[]) => void;
   cardPointerHandlers?: React.HTMLAttributes<HTMLDivElement>;
-  onDocumentOpen?: (id: string | number) => void;
+  onInspectDocument?: (id: string | number) => void;
   onTagDragEnter?: (event: React.DragEvent<HTMLDivElement>, docId: string | number) => void;
   onTagDragOver?: (event: React.DragEvent<HTMLDivElement>, docId: string | number) => void;
   onTagDragLeave?: (event: React.DragEvent<HTMLDivElement>, docId: string | number) => void;
@@ -57,7 +57,7 @@ const DesktopDocumentCard: React.FC<DesktopDocumentCardProps> = ({
   getDocumentAsset,
   handleNavigatorSnapshot,
   cardPointerHandlers,
-  onDocumentOpen,
+  onInspectDocument,
   onTagDragEnter,
   onTagDragOver,
   onTagDragLeave,
@@ -117,7 +117,7 @@ const DesktopDocumentCard: React.FC<DesktopDocumentCardProps> = ({
       onKeyDown={(event) => {
         if (event.key === 'Enter' || event.key === ' ') {
           preventAll(event);
-          onDocumentOpen?.(doc.id);
+          onInspectDocument?.(doc.id);
         }
       }}
     >
diff --git a/frontend/src/desktop/DesktopWorkspace.tsx b/frontend/src/desktop/DesktopWorkspace.tsx
index 0405fd5..1d9ade1 100644
--- a/frontend/src/desktop/DesktopWorkspace.tsx
+++ b/frontend/src/desktop/DesktopWorkspace.tsx
@@ -119,7 +119,6 @@ type WorkspaceSnapshotState = {
 interface DesktopWorkspaceProps {
   documents?: DeskDocument[];
   searchResults?: DeskDocument[] | null;
-  onDocumentOpen?: (docId: Identifier | null, options?: Record<string, unknown>) => void;
   onInspectDocument?: (...args: unknown[]) => void;
   onEntryPointer?: (...args: unknown[]) => void;
   onDocumentStackSelect?: (docIds: Identifier[]) => void;
@@ -154,7 +153,6 @@ interface DesktopWorkspaceViewProps {
   tagDropTargetId: string | null;
   pendingTagDocId: string | null;
   pendingRemovalTag: unknown;
-  onDocumentOpen?: DesktopWorkspaceProps['onDocumentOpen'];
   ensureAssetUrl?: DesktopWorkspaceProps['ensureAssetUrl'];
   getDocumentAsset?: DesktopWorkspaceProps['getDocumentAsset'];
   handleNavigatorSnapshot: (docId: Identifier | null, snapshot: NavigatorSnapshot | null) => void;
@@ -199,7 +197,6 @@ const DEBUG_FOCUS = false;
 const DesktopWorkspace: React.FC<DesktopWorkspaceProps> = ({
   documents = [],
   searchResults = null,
-  onDocumentOpen,
   onInspectDocument = null,
   onEntryPointer = null,
   onDocumentStackSelect = null,
@@ -717,7 +714,6 @@ const DesktopWorkspace: React.FC<DesktopWorkspaceProps> = ({
       tagDropTargetId,
       pendingTagDocId,
       pendingRemovalTag,
-      onDocumentOpen,
       ensureAssetUrl,
       getDocumentAsset,
       handleNavigatorSnapshot,
@@ -783,7 +779,6 @@ const DesktopWorkspace: React.FC<DesktopWorkspaceProps> = ({
       layoutSnapshot,
       onClearSelection,
       onCloseDetailPanel,
-      onDocumentOpen,
       onDocumentStackSelect,
       onEntryPointer,
       onPromoteSelection,
@@ -824,7 +819,6 @@ function DesktopWorkspaceView({
   tagDropTargetId,
   pendingTagDocId,
   pendingRemovalTag,
-  onDocumentOpen,
   ensureAssetUrl,
   getDocumentAsset,
   handleNavigatorSnapshot,
@@ -900,7 +894,7 @@ function DesktopWorkspaceView({
     onEntryPointer,
     onDocumentStackSelect,
     onPromoteSelection,
-    onDocumentOpen,
+    onInspectDocument,
     selectedDocumentIds,
     detailPanelOpen,
     onCloseDetailPanel,
@@ -1041,7 +1035,7 @@ function DesktopWorkspaceView({
                   getDocumentAsset={getDocumentAsset}
                   handleNavigatorSnapshot={handleNavigatorSnapshot}
                   cardPointerHandlers={cardPointerHandlers}
-                  onDocumentOpen={onDocumentOpen}
+                  onInspectDocument={onInspectDocument}
                   onTagDragEnter={handleTagDragEnterDoc}
                   onTagDragOver={handleTagDragOverDoc}
                   onTagDragLeave={handleTagDragLeaveDoc}
diff --git a/frontend/src/desktop/pointer/useDeskPointer.js b/frontend/src/desktop/pointer/useDeskPointer.js
index 4feff5d..0200166 100644
--- a/frontend/src/desktop/pointer/useDeskPointer.js
+++ b/frontend/src/desktop/pointer/useDeskPointer.js
@@ -35,7 +35,7 @@ export const useDeskPointer = ({
   onEntryPointer,
   onDocumentStackSelect,
   onPromoteSelection,
-  onDocumentOpen,
+  onInspectDocument,
   selectedDocumentIds,
   detailPanelOpen,
   onCloseDetailPanel,
@@ -327,8 +327,7 @@ export const useDeskPointer = ({
           const stillSelected = Array.isArray(selectedDocumentIds)
             && selectedDocumentIds.includes(doc.id);
           if (isPrimaryRelease && stillSelected) {
-            const useSelection = pointerState.selectedAtDown && pointerState.selectionCountAtDown > 0;
-            safeInvoke(onDocumentOpen, doc.id, { useSelection });
+            safeInvoke(onInspectDocument, doc.id);
           }
         }
       }
@@ -338,7 +337,7 @@ export const useDeskPointer = ({
     },
     [
       handlePointerUp,
-      onDocumentOpen,
+      onInspectDocument,
       onDocumentStackSelect,
       onEntryPointer,
       resetLongPressState,
diff --git a/frontend/src/desktop/useDeskWorkspaceProps.ts b/frontend/src/desktop/useDeskWorkspaceProps.ts
index d46caf3..01cd3e4 100644
--- a/frontend/src/desktop/useDeskWorkspaceProps.ts
+++ b/frontend/src/desktop/useDeskWorkspaceProps.ts
@@ -62,7 +62,6 @@ interface UseDeskWorkspacePropsArgs {
   searchQuery?: string;
   activeCorrespondentFilters?: Identifier[];
   selectedFolder?: Identifier | string | null;
-  openDetailPanel?: (args: { documentIds: Identifier[] }) => void;
 }
 
 const useDeskWorkspaceProps = ({
@@ -111,7 +110,6 @@ const useDeskWorkspaceProps = ({
   searchQuery = '',
   activeCorrespondentFilters = [],
   selectedFolder,
-  openDetailPanel,
 }: UseDeskWorkspacePropsArgs) => {
   const handleDeskDocumentStackSelect: DeskDocumentStackSelectHandler = useCallback(
     (docIds) => {
@@ -146,30 +144,6 @@ const useDeskWorkspaceProps = ({
     [applySelection, resolveDocumentRowKey, selectedEntries, selectionAnchorRef],
   );
 
-  const handleDeskDocumentOpen = useCallback(
-    (docId: Identifier | undefined, { useSelection = false }: { useSelection?: boolean } = {}) => {
-      const selectionDocIds = Array.isArray(selectedDocumentIds)
-        ? selectedDocumentIds
-        : [];
-      let targetIds: Identifier[] = [];
-
-      if ((useSelection || selectionDocIds.includes(docId as Identifier)) && selectionDocIds.length) {
-        targetIds = selectionDocIds;
-      } else if (selectionDocIds.length) {
-        targetIds = selectionDocIds;
-      } else if (docId) {
-        targetIds = [docId];
-      }
-
-      if (!targetIds.length) {
-        return;
-      }
-
-      openDetailPanel?.({ documentIds: targetIds });
-    },
-    [openDetailPanel, selectedDocumentIds],
-  );
-
   const deskViewId = useMemo(() => {
     if (showingSearchResults) {
       const trimmedQuery = searchQuery.trim();
@@ -198,7 +172,6 @@ const useDeskWorkspaceProps = ({
       onViewModeChange: handleDocumentsViewModeChange,
       onExit: handleDeskExit,
       onRefresh: refreshCurrentFolder,
-      onDocumentOpen: handleDeskDocumentOpen,
       onInspectDocument: inspectDocument,
       onEntryPointer: handleEntryPointerCore,
       onDocumentStackSelect: handleDeskDocumentStackSelect,
@@ -240,7 +213,6 @@ const useDeskWorkspaceProps = ({
       handleDocumentsViewModeChange,
       handleDeskExit,
       refreshCurrentFolder,
-      handleDeskDocumentOpen,
       inspectDocument,
       handleEntryPointerCore,
       handleDeskDocumentStackSelect,
diff --git a/frontend/src/documents/SelectionFloatingActions.tsx b/frontend/src/documents/SelectionFloatingActions.tsx
index bb4f326..a1866b5 100644
--- a/frontend/src/documents/SelectionFloatingActions.tsx
+++ b/frontend/src/documents/SelectionFloatingActions.tsx
@@ -509,14 +509,13 @@ const SelectionFloatingActions: React.FC<SelectionFloatingActionsProps> = ({
     <SelectionAssignmentMenu
       label="Move"
       triggerContent={(
-        <span className="quick-add__chip-label">
+        <span className="quick-add__chip-label" title="Move">
           {loadingFolders ? (
             <LoaderIcon className="icon-inline icon--spin" aria-hidden="true" />
           ) : (
             <FolderOutlineIcon className="icon-inline" aria-hidden="true" />
           )}
-          {' '}
-          Move
+          <span className="quick-add__chip-text" aria-hidden="true">Move</span>
         </span>
       )}
       items={moveAssignments}
@@ -582,8 +581,9 @@ const SelectionFloatingActions: React.FC<SelectionFloatingActionsProps> = ({
         <SelectionAssignmentMenu
           label="Tags"
           triggerContent={(
-            <span className="quick-add__chip-label">
-              <TagIcon className="icon-inline" aria-hidden="true" /> Tags
+            <span className="quick-add__chip-label" title="Tags">
+              <TagIcon className="icon-inline" aria-hidden="true" />
+              <span className="quick-add__chip-text" aria-hidden="true">Tags</span>
             </span>
           )}
           items={tagAssignments}
@@ -597,8 +597,9 @@ const SelectionFloatingActions: React.FC<SelectionFloatingActionsProps> = ({
         <SelectionAssignmentMenu
           label="Correspondents"
           triggerContent={(
-            <span className="quick-add__chip-label">
-              <CorrespondentIcon className="icon-inline" aria-hidden="true" /> Correspondents
+            <span className="quick-add__chip-label" title="Correspondents">
+              <CorrespondentIcon className="icon-inline" aria-hidden="true" />
+              <span className="quick-add__chip-text" aria-hidden="true">Correspondents</span>
             </span>
           )}
           items={correspondentAssignments}
diff --git a/frontend/src/hooks/documents/useDocumentsWorkspace.ts b/frontend/src/hooks/documents/useDocumentsWorkspace.ts
index befc884..fae0d14 100644
--- a/frontend/src/hooks/documents/useDocumentsWorkspace.ts
+++ b/frontend/src/hooks/documents/useDocumentsWorkspace.ts
@@ -1538,7 +1538,6 @@ const useDocumentsWorkspace = ({
     searchQuery,
     activeCorrespondentFilters,
     selectedFolder,
-    openDetailPanel,
   });
 
   const contextValue = useMemo(
diff --git a/frontend/src/preview/DocumentViewerPanel.tsx b/frontend/src/preview/DocumentViewerPanel.tsx
index 1c3477f..8f61aeb 100644
--- a/frontend/src/preview/DocumentViewerPanel.tsx
+++ b/frontend/src/preview/DocumentViewerPanel.tsx
@@ -65,7 +65,7 @@ interface DocumentViewerPanelProps extends DocumentSummarySectionProps {
   resolveFolderPath?: (doc: DocumentLike | null) => Array<{ id?: string | number; name?: string }>;
   variant?: 'viewer' | 'sidebar';
   onCollapsePanel?: () => void;
-  onMaximizePanel?: () => void;
+  onMaximizePanel?: (args: { documentIds: Array<string | number> }) => void;
 }
 
 
@@ -418,7 +418,11 @@ const panelRef = useRef<HTMLDivElement | HTMLFormElement | HTMLElement | null>(n
           className="icon-button"
           onClick={(event) => {
             event.stopPropagation();
-            onMaximizePanel?.(document?.id);
+            const targetId = document?.id;
+            if (targetId == null) {
+              return;
+            }
+            onMaximizePanel?.({ documentIds: [targetId] });
           }}
           aria-label="Maximize"
           title="Maximize"
diff --git a/frontend/src/sidebar/SidebarContext.tsx b/frontend/src/sidebar/SidebarContext.tsx
index f0c0da3..b73541c 100644
--- a/frontend/src/sidebar/SidebarContext.tsx
+++ b/frontend/src/sidebar/SidebarContext.tsx
@@ -33,8 +33,8 @@ const SidebarContext = createContext<SidebarContextValue | null>(null);
 
 const THEME_STORAGE_KEY = 'papercrate_theme_settings';
 const DEFAULT_NEUTRAL_HUE = 35;
-const DEFAULT_NEUTRAL_CHROMA = 0.1;
-const DEFAULT_NEUTRAL_CONTRAST = 0.3;
+const DEFAULT_NEUTRAL_CHROMA = 0.5;
+const DEFAULT_NEUTRAL_CONTRAST = 0.5;
 const DEFAULT_THEME_MODE = 'system';
 const THEME_MODES = ['system', 'light', 'dark'];
 
diff --git a/frontend/src/styles/base/theme.css b/frontend/src/styles/base/theme.css
index d3307cf..fd23a72 100644
--- a/frontend/src/styles/base/theme.css
+++ b/frontend/src/styles/base/theme.css
@@ -7,22 +7,29 @@
   --accent-hue-offset: 0deg;
   --dark-hue-offset: 40deg;
   --dark-foreground-hue-offset: 20deg;
-  --neutral-chroma: 0.15;
+  --neutral-chroma: 0.5;
+  --neutral-chroma-min: 0.01;
+  --neutral-chroma-max: 0.20;
+  --neutral-chroma-range: calc(var(--neutral-chroma-max) - var(--neutral-chroma-min));
+  --neutral-chroma-effective: calc(
+    var(--neutral-chroma-min)
+    + clamp(0, var(--neutral-chroma), 1) * var(--neutral-chroma-range)
+  );
   --neutral-contrast: 0.5;
   --neutral-contrast-amount: calc(0.85 + var(--neutral-contrast) * 0.55);
   --neutral-contrast-baseline: 1.125;
   --neutral-contrast-delta: calc(var(--neutral-contrast-amount) - var(--neutral-contrast-baseline));
-  --neutral-chroma-scale: calc(clamp(0.0001, var(--neutral-chroma), 1) / 0.1);
+  --neutral-chroma-scale: calc(clamp(0.0001, var(--neutral-chroma-effective), 1) / 0.1);
 
   /* --- Neutrals --- */
-  --bg: oklch(calc(0.97 + var(--neutral-contrast-delta) * 0.12) calc(var(--neutral-chroma) * 0.001) calc(var(--neutral-hue) + var(--surface-hue-shift)));
-  --surface: oklch(calc(0.985 + var(--neutral-contrast-delta) * 0.1) calc(var(--neutral-chroma) * 0.001) calc(var(--neutral-hue) + var(--surface-hue-shift)));
-  --surface-subtle: oklch(calc(0.96 + var(--neutral-contrast-delta) * 0.16) calc(var(--neutral-chroma) * 0.002) calc(var(--neutral-hue) + var(--surface-hue-shift)));
-  --fg: oklch(calc(0.32 - var(--neutral-contrast-delta) * 0.18) calc(var(--neutral-chroma) * 0.003) calc(var(--neutral-hue) + var(--foreground-hue-offset)));
-  --muted: oklch(calc(0.54 - var(--neutral-contrast-delta) * 0.05) calc(var(--neutral-chroma) * 0.005) calc(var(--neutral-hue) + var(--foreground-hue-offset)));
+  --bg: oklch(calc(0.97 + var(--neutral-contrast-delta) * 0.12) calc(var(--neutral-chroma-effective) * 0.001) calc(var(--neutral-hue) + var(--surface-hue-shift)));
+  --surface: oklch(calc(0.995 + var(--neutral-contrast-delta) * 0.1) calc(var(--neutral-chroma-effective) * 0.001) calc(var(--neutral-hue) + var(--surface-hue-shift)));
+  --surface-subtle: oklch(calc(0.96 + var(--neutral-contrast-delta) * 0.16) calc(var(--neutral-chroma-effective) * 0.002) calc(var(--neutral-hue) + var(--surface-hue-shift)));
+  --fg: oklch(calc(0.32 - var(--neutral-contrast-delta) * 0.18) calc(var(--neutral-chroma-effective) * 0.003) calc(var(--neutral-hue) + var(--foreground-hue-offset)));
+  --muted: oklch(calc(0.54 - var(--neutral-contrast-delta) * 0.05) calc(var(--neutral-chroma-effective) * 0.005) calc(var(--neutral-hue) + var(--foreground-hue-offset)));
   --muted-subtle: color-mix(in oklch, var(--muted) 55%, var(--border));
-  --sidebar-fg: oklch(calc(0.56 + var(--neutral-contrast-delta) * 0.18) calc(var(--neutral-chroma) * 0.003) calc(var(--neutral-hue) + var(--foreground-hue-offset)));
-  --border: oklch(calc(0.92 + var(--neutral-contrast-delta) * 0.15) calc(var(--neutral-chroma) * 0.0015) calc(var(--neutral-hue) + var(--foreground-hue-offset)));
+  --sidebar-fg: oklch(calc(0.56 + var(--neutral-contrast-delta) * 0.18) calc(var(--neutral-chroma-effective) * 0.003) calc(var(--neutral-hue) + var(--foreground-hue-offset)));
+  --border: oklch(calc(0.92 + var(--neutral-contrast-delta) * 0.15) calc(var(--neutral-chroma-effective) * 0.0015) calc(var(--neutral-hue) + var(--foreground-hue-offset)));
 
   /* --- Accent (primary) --- */
   --accent: oklch(0.61 calc(0.16 * var(--neutral-chroma-scale)) calc(var(--neutral-hue) + var(--foreground-hue-offset) + var(--accent-hue-offset)));
@@ -114,14 +121,14 @@
 
   --dark-neutral-hue: calc(var(--neutral-hue) + var(--dark-hue-offset));
   --dark-foreground-hue: calc(var(--neutral-hue) + var(--dark-foreground-hue-offset));
-  --bg: oklch(calc(0.18 - var(--neutral-contrast-delta) * 0.015) calc(var(--neutral-chroma) * 0.1) calc(var(--dark-neutral-hue) + var(--surface-hue-shift)));
-  --surface: oklch(calc(0.22 - var(--neutral-contrast-delta) * 0.012) calc(var(--neutral-chroma) * 0.12) calc(var(--dark-neutral-hue) + var(--surface-hue-shift)));
-  --surface-subtle: oklch(calc(0.26 - var(--neutral-contrast-delta) * 0.01) calc(var(--neutral-chroma) * 0.12) calc(var(--dark-neutral-hue) + var(--surface-hue-shift)));
-  --fg: oklch(calc(0.9 + var(--neutral-contrast-delta) * 0.02) calc(var(--neutral-chroma) * 0.04) var(--dark-foreground-hue));
-  --muted: oklch(calc(0.72 + var(--neutral-contrast-delta) * 0.01) calc(var(--neutral-chroma) * 0.06) var(--dark-foreground-hue));
+  --bg: oklch(calc(0.18 - var(--neutral-contrast-delta) * 0.015) calc(var(--neutral-chroma-effective) * 0.1) calc(var(--dark-neutral-hue) + var(--surface-hue-shift)));
+  --surface: oklch(calc(0.22 - var(--neutral-contrast-delta) * 0.012) calc(var(--neutral-chroma-effective) * 0.12) calc(var(--dark-neutral-hue) + var(--surface-hue-shift)));
+  --surface-subtle: oklch(calc(0.26 - var(--neutral-contrast-delta) * 0.01) calc(var(--neutral-chroma-effective) * 0.12) calc(var(--dark-neutral-hue) + var(--surface-hue-shift)));
+  --fg: oklch(calc(0.9 + var(--neutral-contrast-delta) * 0.02) calc(var(--neutral-chroma-effective) * 0.04) var(--dark-foreground-hue));
+  --muted: oklch(calc(0.72 + var(--neutral-contrast-delta) * 0.01) calc(var(--neutral-chroma-effective) * 0.06) var(--dark-foreground-hue));
   --muted-subtle: color-mix(in oklch, var(--muted) 45%, var(--border));
-  --sidebar-fg: oklch(calc(0.78 + var(--neutral-contrast-delta) * 0.01) calc(var(--neutral-chroma) * 0.06) var(--dark-foreground-hue));
-  --border: oklch(calc(0.33 - var(--neutral-contrast-delta) * 0.01) calc(var(--neutral-chroma) * 0.03) var(--dark-foreground-hue));
+  --sidebar-fg: oklch(calc(0.78 + var(--neutral-contrast-delta) * 0.01) calc(var(--neutral-chroma-effective) * 0.06) var(--dark-foreground-hue));
+  --border: oklch(calc(0.33 - var(--neutral-contrast-delta) * 0.01) calc(var(--neutral-chroma-effective) * 0.03) var(--dark-foreground-hue));
 
   --accent: oklch(0.75 calc(0.16 * var(--neutral-chroma-scale)) calc(var(--dark-foreground-hue) + var(--accent-hue-offset)));
   --accent-hover: oklch(0.82 calc(0.13 * var(--neutral-chroma-scale)) calc(var(--dark-foreground-hue) + var(--accent-hue-offset)));
@@ -191,14 +198,14 @@
 
     --dark-neutral-hue: calc(var(--neutral-hue) + var(--dark-hue-offset));
     --dark-foreground-hue: calc(var(--neutral-hue) + var(--dark-foreground-hue-offset));
-    --bg: oklch(calc(0.5 - 0.35 * var(--neutral-contrast-amount)) calc(var(--neutral-chroma) * 0.1) calc(var(--dark-neutral-hue) + var(--surface-hue-shift)));
-    --surface: oklch(calc(0.5 - 0.31 * var(--neutral-contrast-amount)) calc(var(--neutral-chroma) * 0.12) calc(var(--dark-neutral-hue) + var(--surface-hue-shift)));
-    --surface-subtle: oklch(calc(0.5 - 0.27 * var(--neutral-contrast-amount)) calc(var(--neutral-chroma) * 0.12) calc(var(--dark-neutral-hue) + var(--surface-hue-shift)));
-    --fg: oklch(calc(0.5 + 0.39 * var(--neutral-contrast-amount)) calc(var(--neutral-chroma) * 0.04) var(--dark-foreground-hue));
-    --muted: oklch(calc(0.5 + 0.22 * var(--neutral-contrast-amount)) calc(var(--neutral-chroma) * 0.06) var(--dark-foreground-hue));
+    --bg: oklch(calc(0.5 - 0.35 * var(--neutral-contrast-amount)) calc(var(--neutral-chroma-effective) * 0.1) calc(var(--dark-neutral-hue) + var(--surface-hue-shift)));
+    --surface: oklch(calc(0.5 - 0.31 * var(--neutral-contrast-amount)) calc(var(--neutral-chroma-effective) * 0.12) calc(var(--dark-neutral-hue) + var(--surface-hue-shift)));
+    --surface-subtle: oklch(calc(0.5 - 0.27 * var(--neutral-contrast-amount)) calc(var(--neutral-chroma-effective) * 0.12) calc(var(--dark-neutral-hue) + var(--surface-hue-shift)));
+    --fg: oklch(calc(0.5 + 0.39 * var(--neutral-contrast-amount)) calc(var(--neutral-chroma-effective) * 0.04) var(--dark-foreground-hue));
+    --muted: oklch(calc(0.5 + 0.22 * var(--neutral-contrast-amount)) calc(var(--neutral-chroma-effective) * 0.06) var(--dark-foreground-hue));
     --muted-subtle: color-mix(in oklch, var(--muted) 45%, var(--border));
-    --sidebar-fg: oklch(calc(0.5 + 0.28 * var(--neutral-contrast-amount)) calc(var(--neutral-chroma) * 0.06) var(--dark-foreground-hue));
-    --border: oklch(calc(0.5 - 0.17 * var(--neutral-contrast-amount)) calc(var(--neutral-chroma) * 0.03) var(--dark-foreground-hue));
+    --sidebar-fg: oklch(calc(0.5 + 0.28 * var(--neutral-contrast-amount)) calc(var(--neutral-chroma-effective) * 0.06) var(--dark-foreground-hue));
+    --border: oklch(calc(0.5 - 0.17 * var(--neutral-contrast-amount)) calc(var(--neutral-chroma-effective) * 0.03) var(--dark-foreground-hue));
 
     --accent: oklch(0.75 calc(0.16 * var(--neutral-chroma-scale)) calc(var(--dark-foreground-hue) + var(--accent-hue-offset)));
     --accent-hover: oklch(0.82 calc(0.13 * var(--neutral-chroma-scale)) calc(var(--dark-foreground-hue) + var(--accent-hue-offset)));
diff --git a/frontend/src/styles/detail/detail-panels.css b/frontend/src/styles/detail/detail-panels.css
index 0f51420..e359a82 100644
--- a/frontend/src/styles/detail/detail-panels.css
+++ b/frontend/src/styles/detail/detail-panels.css
@@ -149,10 +149,9 @@
 }
 
 .quick-add__chip {
-  display: inline-flex;
+  display: flex;
   align-items: center;
   gap: 0.35rem;
-  white-space: nowrap;
   border: 1px dashed var(--border);
   border-radius: 999px;
   padding: 0.18rem 0.6rem;
@@ -161,6 +160,10 @@
   color: var(--muted);
   cursor: pointer;
   transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
+  min-width: 0;
+  flex: 1 1 9rem;
+  max-width: 12rem;
+  overflow: hidden;
 }
 
 .quick-add__chip:hover,
@@ -180,6 +183,25 @@
   display: inline-flex;
   align-items: center;
   gap: 0.25rem;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+  flex: 1 1 0;
+}
+
+.quick-add__chip-label .icon-inline {
+  flex-shrink: 0;
+}
+
+.quick-add__chip-text {
+  display: inline-block;
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .quick-add__form {
diff --git a/frontend/src/styles/documents/listing.css b/frontend/src/styles/documents/listing.css
index fe89616..0f4c592 100644
--- a/frontend/src/styles/documents/listing.css
+++ b/frontend/src/styles/documents/listing.css
@@ -69,6 +69,8 @@
   pointer-events: none;
   z-index: 6;
   height: 0;
+  width: calc(100% - 2rem);
+  margin: 0 1rem;
 }
 
 .panel-floating {
@@ -88,30 +90,29 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   gap: 0.75rem;
   z-index: 950000;
   width: auto;
+  max-width: min(640px, calc(100% - 2rem));
   margin: 0 auto;
+  min-width: 0;
+  overflow: hidden;
 }
 
 .panel-floating__buttons {
   display: inline-flex;
   align-items: center;
   gap: 0.25rem;
-  order: 2;
   pointer-events: auto;
 }
 
-.panel-floating__label {
-  order: 0;
-}
-
 .panel-floating__label {
   white-space: nowrap;
   pointer-events: none;
   font-size: 0.95rem;
   color: var(--fg);
+  min-width: 0;
 }
 
 .selection-summary {
@@ -150,15 +151,19 @@
   gap: 0.4rem;
   flex-wrap: nowrap;
   pointer-events: auto;
+  min-width: 0;
+  flex: 1 1 auto;
+  overflow: hidden;
 }
 
 .panel-floating-actions--assignments {
   display: flex;
-  order: 1;
   flex-wrap: nowrap;
-  width: auto;
+  flex: 1 1 auto;
+  min-width: 0;
   white-space: nowrap;
-  justify-content: center;
+  justify-content: flex-start;
+  overflow: hidden;
 }
 
 .panel-floating-actions .quick-add {
@@ -195,23 +200,6 @@
     gap: 0.5rem;
   }
 
-  .panel-floating__label {
-    order: 0;
-    flex: 1 1 auto;
-    text-align: left;
-  }
-
-  .panel-floating__buttons {
-    order: 1;
-    flex: 0 0 auto;
-    justify-content: flex-end;
-  }
-
-  .panel-floating-actions--assignments {
-    order: 2;
-    width: 100%;
-    justify-content: center;
-  }
 
   .panel-floating-actions__button {
     font-size: 1.15rem;
diff --git a/frontend/src/styles/documents/viewer.css b/frontend/src/styles/documents/viewer.css
index ca0320b..49e0ec5 100644
--- a/frontend/src/styles/documents/viewer.css
+++ b/frontend/src/styles/documents/viewer.css
@@ -3,7 +3,7 @@
   flex-direction: column;
   flex: 1;
   min-height: 0;
-  background: var(--bg);
+  background: var(--surface);
 }
 
 .document-viewer-panel__body {