🐛 Fix extend button style in prototype tab

frontend/resources/styles/common/refactor/basic-rules.scss

@@ -125,10 +125,11 @@
   @include buttonStyle;
   @include flexCenter;
   @include focusTertiary;
+  --button-tertiary-border-width: $s-2;
   border-radius: $br-8;
   color: var(--button-tertiary-foreground-color-rest);
   background-color: transparent;
-  border: $s-2 solid transparent;
+  border: var(--button-tertiary-border-width) solid transparent;
   svg,
   span svg {
     stroke: var(--button-tertiary-foreground-color-rest);
@@ -136,7 +137,7 @@
   &:hover {
     background-color: var(--button-tertiary-background-color-hover);
     color: var(--button-tertiary-foreground-color-hover);
-    border: $s-2 solid var(--button-secondary-border-color-hover);
+    border-color: var(--button-secondary-border-color-hover);
     svg,
     span svg {
       stroke: var(--button-tertiary-foreground-color-hover);
@@ -144,7 +145,7 @@
   }
   &:active {
     outline: none;
-    border: $s-2 solid transparent;
+    border-color: transparent;
     background-color: var(--button-tertiary-background-color-active);
     color: var(--button-tertiary-foreground-color-active);
     svg,
@@ -169,7 +170,7 @@
 
 .button-icon-selected {
   outline: none;
-  border: $s-2 solid var(--button-icon-border-color-selected);
+  border-color: var(--button-icon-border-color-selected);
   background-color: var(--button-icon-background-color-selected);
   color: var(--button-icon-foreground-color-selected);
   svg {
@@ -183,7 +184,7 @@
   @include focusRadio;
   border-radius: $br-8;
   color: var(--button-radio-foreground-color-rest);
-  border: $s-1 solid var(--button-radio-background-color-rest);
+  border-color: $s-1 solid var(--button-radio-background-color-rest);
   svg,
   span svg {
     stroke: var(--button-radio-foreground-color-rest);

frontend/resources/styles/common/refactor/design-tokens.scss

@@ -65,6 +65,9 @@
   --button-tertiary-border-color-focus: var(--color-accent-primary);
   --button-tertiary-foreground-color-focus: var(--color-foreground-primary);
 
+  --expand-button-icon-border-width: 0;
+  --expand-button-icon-border-width-selected: 0;
+
   --button-icon-foreground-color: var(--color-foreground-secondary);
   --button-icon-foreground-color-hover: var(--color-foreground-secondary);
   --button-icon-background-color-selected: var(--color-background-quaternary);
@@ -396,4 +399,5 @@
   --assets-item-name-foreground-color: var(--color-foreground-primary);
 
   --text-editor-selection-background-color: var(--la-tertiary-70);
+  --expand-button-icon-border-width-selected: 2px;
 }

frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs

@@ -403,10 +403,10 @@
 
 
     [:div {:class (stl/css-case  :element-set-options-group true
-                                 :open extended-open?)}
+                                 :element-set-options-group-open extended-open?)}
           ; Summary
      [:div {:class (stl/css :interactions-summary)}
-      [:div {:class (stl/css-case :extend-btn true
+      [:button {:class (stl/css-case :extend-btn true
                                   :extended extended-open?)
              :on-click toggle-extended}
        i/menu-refactor]

frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss

@@ -96,11 +96,14 @@
   @include flexColumn($s-12);
 }
 
-.element-set-options-group {
+.element-set-options-group-open {
-  &.open {
   @include flexColumn;
+}
+
 .extended-options {
   @include flexColumn;
+}
+
 .property-row {
   @extend .attr-row;
   &.big-row {
@@ -213,25 +216,12 @@
     }
   }
 }
-    }
-  }
 
 .interactions-summary {
   @extend .asset-element;
   height: $s-44;
   padding: 0;
-    gap: $s-4;
+  gap: $s-8;
-    .extend-btn {
-      @extend .button-tertiary;
-      height: 100%;
-      width: $s-28;
-      svg {
-        @extend .button-icon;
-      }
-      &.extended {
-        @extend .button-icon-selected;
-      }
-    }
 
   .remove-btn {
     @extend .button-tertiary;
@@ -242,6 +232,32 @@
     }
   }
 }
+
+.extend-btn {
+  @extend .button-tertiary;
+  --button-tertiary-border-width: var(--expand-button-icon-border-width);
+  height: 100%;
+  width: $s-28;
+  border-end-end-radius: 0;
+  border-start-end-radius: 0;
+  padding: 0;
+  svg {
+    @extend .button-icon;
+  }
+  position: relative;
+  &:after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-inline-end: $s-1 solid var(--panel-background-color);
+  }
+  &.extended {
+    @extend .button-icon-selected;
+    --button-tertiary-border-width: var(--expand-button-icon-border-width-selected);
+  }
 }
 
 .flow-element {