style(client): refine drag insertion markers

packages/client/ui-sidebar/src/client/SidebarRoot.module.css

@@ -215,12 +215,16 @@
   min-height: 0;
   display: flex;
   flex-direction: column;
+  margin-left: -4px;
   margin-right: calc(-1 * var(--dsh-sidebar-inline-padding));
+  padding-left: 4px;
   overflow: hidden;
 }
 
 .collapsed .regionArea {
+  margin-left: 0;
   margin-right: 0;
+  padding-left: 0;
 }
 
 /* Foot seat: a pure layout socket pinned under the region; the ui-settings

packages/client/ui-sidebar/tests/sidebar-styles.spec.ts

@@ -30,9 +30,13 @@ describe('SidebarRoot.module.css inset', () => {
     const root = declarations('.root')
     expect(root?.get('--dsh-sidebar-inline-padding')).toBe('12px')
     expect(root?.get('padding')).toBe('6px var(--dsh-sidebar-inline-padding)')
+    expect(declarations('.regionArea')?.get('margin-left')).toBe('-4px')
+    expect(declarations('.regionArea')?.get('padding-left')).toBe('4px')
     expect(declarations('.regionArea')?.get('margin-right')).toBe(
       'calc(-1 * var(--dsh-sidebar-inline-padding))',
     )
+    expect(declarations('.collapsed .regionArea')?.get('margin-left')).toBe('0')
+    expect(declarations('.collapsed .regionArea')?.get('padding-left')).toBe('0')
     expect(declarations('.collapsed .regionArea')?.get('margin-right')).toBe('0')
   })
 })

packages/client/ui-workspace/src/client/WorkspaceBrowser.module.css

@@ -296,12 +296,16 @@
   min-height: 0;
   display: flex;
   flex-direction: column;
+  margin-left: -4px;
   margin-right: calc(-1 * var(--dsh-session-list-edge-inset));
+  padding-left: 4px;
   overflow: hidden;
 }
 
 .rail .listArea {
+  margin-left: 0;
   margin-right: 0;
+  padding-left: 0;
 }
 
 /* Relative for the bottom fade overlay. */
@@ -342,7 +346,9 @@
   flex: 1;
   min-height: 0;
   overflow-y: auto;
+  margin-left: -4px;
   margin-right: var(--dsh-session-list-scrollbar-offset);
+  padding-left: 4px;
   padding-right: calc(
     var(--dsh-session-list-edge-inset)
     - var(--dsh-session-list-scrollbar-width)
@@ -386,20 +392,28 @@
   content: '';
   position: absolute;
   z-index: 1;
-  left: 4px;
+  left: -4px;
   right: 4px;
-  height: 2px;
+  height: 12px;
-  border-radius: 999px;
+  background:
-  background: var(--dsw-alias-state-business-primary);
+    radial-gradient(
+      circle at 6px 6px,
+      transparent 0 3px,
+      var(--dsw-alias-state-business-primary) 3px 5px,
+      transparent 5px
+    ),
+    linear-gradient(
+      var(--dsw-alias-state-business-primary) 0 0
+    ) 10px 5px / calc(100% - 10px) 2px no-repeat;
   pointer-events: none;
 }
 
 .workspaceDropBefore::before {
-  top: -3px;
+  top: -8px;
 }
 
 .workspaceDropAfter::after {
-  bottom: -3px;
+  bottom: -8px;
 }
 
 .sessionOverflowButton {

packages/client/ui-workspace/src/client/rows/Rows.module.css

@@ -236,8 +236,8 @@
   background: var(--dsw-alias-interactive-bg-hover);
 }
 
-/* Session drag insert line: an independent 2px rule between rows, absolutely
+/* Session drag insert marker: a hollow leading dot and 2px rule between rows,
-   positioned so it neither resembles a row border nor changes layout. */
+   absolutely positioned so it neither resembles a row border nor changes layout. */
 .sessionRow.dropBefore,
 .sessionRow.dropAfter {
   position: relative;
@@ -248,20 +248,28 @@
   content: '';
   position: absolute;
   z-index: 1;
-  left: 4px;
+  left: 0;
   right: 4px;
-  height: 2px;
+  height: 12px;
-  border-radius: 999px;
+  background:
-  background: var(--dsw-alias-state-business-primary);
+    radial-gradient(
+      circle at 6px 6px,
+      transparent 0 3px,
+      var(--dsw-alias-state-business-primary) 3px 5px,
+      transparent 5px
+    ),
+    linear-gradient(
+      var(--dsw-alias-state-business-primary) 0 0
+    ) 10px 5px / calc(100% - 10px) 2px no-repeat;
   pointer-events: none;
 }
 
 .sessionRow.dropBefore::before {
-  top: -2px;
+  top: -7px;
 }
 
 .sessionRow.dropAfter::after {
-  bottom: -2px;
+  bottom: -7px;
 }
 
 /* Hover-card body (figma 169:16903): dark surface, fixed colors both themes. */

packages/client/ui-workspace/tests/browser-styles.spec.ts

@@ -48,9 +48,13 @@ describe('WorkspaceBrowser.module.css list', () => {
     expect(root?.get('--dsh-session-list-scrollbar-width')).toBe('8px')
     expect(root?.get('--dsh-session-list-scrollbar-offset')).toBe('2px')
     expect(root?.get('padding-right')).toBe('var(--dsh-session-list-edge-inset)')
+    expect(listArea?.get('margin-left')).toBe('-4px')
+    expect(listArea?.get('padding-left')).toBe('4px')
     expect(listArea?.get('margin-right')).toBe('calc(-1 * var(--dsh-session-list-edge-inset))')
     expect(declarations('.fade')?.get('right')).toBe('var(--dsh-session-list-edge-inset)')
     expect(list?.get('margin-right')).toBe('var(--dsh-session-list-scrollbar-offset)')
+    expect(list?.get('margin-left')).toBe('-4px')
+    expect(list?.get('padding-left')).toBe('4px')
     expect(list?.get('padding-right')).toBe([
       'calc(',
       'var(--dsh-session-list-edge-inset)',
@@ -72,6 +76,20 @@ describe('WorkspaceBrowser.module.css list', () => {
     expect(declarations('.groupSection + .groupSection')?.get('margin-top')).toBe('4px')
   })
 
+  it('draws drag targets as a hollow leading dot joined to the insertion line', () => {
+    const workspaceMarker = declarations('.workspaceDropBefore::before')
+    const sessionMarker = rowDeclarations('.sessionRow.dropBefore::before')
+    expect(workspaceMarker?.get('left')).toBe('-4px')
+    expect(sessionMarker?.get('left')).toBe('0')
+    for (const marker of [workspaceMarker, sessionMarker]) {
+      expect(marker?.get('height')).toBe('12px')
+      expect(marker?.get('background')).toContain('radial-gradient')
+      expect(marker?.get('background')).toContain('linear-gradient')
+      expect(marker?.get('background')).toContain('var(--dsw-alias-state-business-primary) 3px 5px')
+      expect(marker?.get('background')).toContain('10px 5px / calc(100% - 10px) 2px')
+    }
+  })
+
   it('keeps the compact fade, overflow control, search field, and row heights', () => {
     expect(declarations('.fade')?.get('height')).toBe('24px')
     expect(declarations('.sessionOverflowButton')?.get('height')).toBe('28px')