From 8f36c55e72c6c2dadd337d18fda432feedb7c5ea Mon Sep 17 00:00:00 2001 From: 4gray Date: Tue, 13 Oct 2026 08:31:21 +0200 Subject: [PATCH] style(workspace): drop the side panel's divider line The context panel beside Sources, categories, Settings and collections drew a 1px outline-variant border against the content surface, whose background, shadow and rounded top-left corner already mark the edge; the line clashed with that corner. The border stays 1px but transparent, so the panel width, the persisted sidebar widths and the resize handle's position do not move. The handle keeps its hover and drag highlight. Co-Authored-By: Claude Opus 5.5 --- .changes/workspace-side-panel-no-divider.md | 6 ++++++ .../workspace-shell-context-sidebar.component.scss | 11 ++++++----- 2 files changed, 12 insertions(+), 5 deletions(-) create mode 100644 .changes/workspace-side-panel-no-divider.md diff --git a/.changes/workspace-side-panel-no-divider.md b/.changes/workspace-side-panel-no-divider.md new file mode 100644 index 000000000..dd711bff4 --- /dev/null +++ b/.changes/workspace-side-panel-no-divider.md @@ -0,0 +1,6 @@ +--- +type: fix +area: workspace +--- + +The side panel next to Sources, categories and Settings no longer draws a thin divider line against the content area, whose colour, shadow and rounded corner already mark the edge. Dragging the panel's edge still resizes it. diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-context-sidebar/workspace-shell-context-sidebar.component.scss b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-context-sidebar/workspace-shell-context-sidebar.component.scss index 7b79fbc22..6717c16fa 100644 --- a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-context-sidebar/workspace-shell-context-sidebar.component.scss +++ b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-context-sidebar/workspace-shell-context-sidebar.component.scss @@ -12,7 +12,11 @@ } .context-panel { - border-right: 1px solid var(--mat-sys-outline-variant); + // No divider line: the panel and the content surface differ in colour, + // and the content's shadow and rounded corner mark the edge. The border + // stays transparent so the panel keeps its width and the resize handle + // its place. + border-right: 1px solid transparent; background: var(--app-rail-bg, var(--mat-sys-surface-container-low)); display: flex; flex-direction: column; @@ -28,8 +32,7 @@ overflow: hidden; transition: width 180ms ease, - padding 180ms ease, - border-right-color 180ms ease; + padding 180ms ease; } .context-panel--collapsed { @@ -40,7 +43,6 @@ // visible empty strip beside the channels rail while "collapsed". padding-left: 0 !important; padding-right: 0 !important; - border-right-color: transparent; .resize-handle { display: none; @@ -168,7 +170,6 @@ width: 100% !important; min-width: 0 !important; padding: 12px 10px 10px 12px; - border-right-color: var(--mat-sys-outline-variant); } .context-panel :is(.resize-handle) {