From 4942b31df2400b4e1bd9cf979ff3637898724c87 Mon Sep 17 00:00:00 2001
From: Eva Marco <evamarcod@gmail.com>
Date: Wed, 28 Oct 2026 16:23:36 +0100
Subject: [PATCH] :recycle: Move the path editing bar styles to the DS

Drop the deprecated styles import, resolve --panel-border-color to
--color-background-quaternary and use logical properties, except top and
height of the bar, which its transition names.

Delete the selectors the DS buttons left unused: .handler-trigger and
.flyout-indicator (the DS icon button draws its own indicator).

No visual change.

AI-assisted-by: claude-opus-5-5
---
 .../ui/workspace/viewport/path_actions.scss   | 39 ++++++-------------
 1 file changed, 11 insertions(+), 28 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/viewport/path_actions.scss b/frontend/src/app/main/ui/workspace/viewport/path_actions.scss
index 634ace8d26..8e3adf2086 100644
--- a/frontend/src/app/main/ui/workspace/viewport/path_actions.scss
+++ b/frontend/src/app/main/ui/workspace/viewport/path_actions.scss
@@ -4,7 +4,6 @@
 //
 // Copyright (c) KALEIDOS SUBSIDIARY SL
 
-@use "refactor/common-refactor.scss" as deprecated;
 @use "ds/_borders.scss" as *;
 @use "ds/_sizes.scss" as *;
 
@@ -12,20 +11,21 @@
   cursor: initial;
   pointer-events: initial;
   position: absolute;
+  // top and height stay physical: the transition below names them.
   top: var(--sp-xl);
-  left: 50%;
+  inset-inline-start: 50%;
   transform: translateX(-50%);
   display: flex;
   align-items: center;
   justify-content: flex-start;
 
   // Keep the bar stable as actions change.
-  width: $sz-430;
+  inline-size: $sz-430;
   height: $sz-48;
   padding: var(--sp-s);
   border-radius: $br-8;
   gap: var(--sp-s);
-  border: $b-2 solid var(--panel-border-color);
+  border: $b-2 solid var(--color-background-quaternary);
   z-index: var(--z-index-panels);
   background-color: var(--color-background-primary);
   transition:
@@ -45,15 +45,15 @@
 
 // Pin the snap toggle to the right.
 .snap-group {
-  margin-left: auto;
+  margin-inline-start: auto;
 }
 
 .separator {
   flex-shrink: 0;
-  width: $sz-1;
-  height: $sz-24;
+  inline-size: $sz-1;
+  block-size: $sz-24;
   margin: 0 var(--sp-xs);
-  background-color: var(--panel-border-color);
+  background-color: var(--color-background-quaternary);
 }
 
 .handler-menu {
@@ -62,34 +62,17 @@
   align-items: center;
 }
 
-// Handler behavior flyout trigger.
-.handler-trigger {
-  position: relative;
-}
-
-// Flyout corner indicator.
-.flyout-indicator {
-  position: absolute;
-  inset-block-end: var(--sp-xs);
-  inset-inline-end: var(--sp-xs);
-  inline-size: $sz-6;
-  block-size: $sz-6;
-  stroke: var(--pathbar-icon-color);
-  fill: none;
-  pointer-events: none;
-}
-
 .handler-popover {
   position: absolute;
-  top: calc(100% + var(--sp-s));
-  left: 50%;
+  inset-block-start: calc(100% + var(--sp-s));
+  inset-inline-start: 50%;
   transform: translateX(-50%);
   display: flex;
   align-items: center;
   padding: var(--sp-xs);
   gap: var(--sp-xxs);
   border-radius: $br-8;
-  border: $b-2 solid var(--panel-border-color);
+  border: $b-2 solid var(--color-background-quaternary);
   background-color: var(--color-background-primary);
   z-index: var(--z-index-dropdown);