UIEXT-2970: Remove back-and-forth margins of section headlines

.changeset/pretty-numbers-wash.md

@@ -0,0 +1,5 @@
+---
+"@knime/jsonforms": patch
+---
+
+Enable setting the set text in side drawer sections.

packages/jsonforms/src/layoutComponents/SettingsSubPanelLayout.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed, ref } from "vue";
 import { DispatchRenderer } from "@jsonforms/vue";
 
 import { FunctionButton } from "@knime/components";
@@ -10,40 +11,49 @@ import VerticalLayoutBase from "./VerticalLayoutBase.vue";
 import SectionHeading from "./section/SectionHeading.vue";
 import SettingsSubPanel from "./settingsSubPanel/SettingsSubPanel.vue";
 
-defineProps<VueLayoutProps>();
+const props = defineProps<VueLayoutProps>();
+
+const options = computed(() => props.layout.uischema.options ?? {});
+const setText = computed(() => options.value.setText ?? "Set");
+const hover = ref(false);
 </script>
 
 <template>
-  <SettingsSubPanel
-    show-back-arrow
-    background-color-override="var(--knime-gray-ultra-light"
-  >
-    <template #expand-button="{ expand }">
-      <SectionHeading :title-text="layout.uischema.label">
-        <template #right-buttons>
-          <FunctionButton compact class="set-button" @click="expand">
-            <span>Set</span>
-            <NextIcon />
-          </FunctionButton>
-        </template>
-      </SectionHeading>
-    </template>
-
-    <VerticalLayoutBase
-      #default="{ element, index }"
-      :elements="layout.uischema.elements"
+  <div @mouseover="hover = true" @mouseleave="hover = false">
+    <SettingsSubPanel
+      show-back-arrow
+      background-color-override="var(--knime-gray-ultra-light)"
     >
-      <DispatchRenderer
-        :key="`${layout.path}-${index}`"
-        :schema="layout.schema"
-        :uischema="element"
-        :path="layout.path"
-        :enabled="layout.enabled"
-        :renderers="layout.renderers"
-        :cells="layout.cells"
-      />
-    </VerticalLayoutBase>
-  </SettingsSubPanel>
+      <template #expand-button="{ expand }">
+        <SectionHeading :title-text="layout.uischema.label">
+          <template #right-buttons>
+            <div class="flex-row">
+              <slot name="buttons" :hover="hover" />
+              <FunctionButton compact class="set-button" @click="expand">
+                <span>{{ setText }}</span>
+                <NextIcon />
+              </FunctionButton>
+            </div>
+          </template>
+        </SectionHeading>
+      </template>
+
+      <VerticalLayoutBase
+        #default="{ element, index }"
+        :elements="layout.uischema.elements"
+      >
+        <DispatchRenderer
+          :key="`${layout.path}-${index}`"
+          :schema="layout.schema"
+          :uischema="element"
+          :path="layout.path"
+          :enabled="layout.enabled"
+          :renderers="layout.renderers"
+          :cells="layout.cells"
+        />
+      </VerticalLayoutBase>
+    </SettingsSubPanel>
+  </div>
 </template>
 
 <style lang="postcss" scoped>
@@ -52,4 +62,12 @@ defineProps<VueLayoutProps>();
     margin: 0 var(--space-4);
   }
 }
+
+.flex-row {
+  display: flex;
+  flex-direction: row;
+  gap: var(--space-8);
+  align-items: center;
+  justify-content: flex-end;
+}
 </style>

packages/jsonforms/src/layoutComponents/section/SectionHeading.vue

@@ -20,15 +20,12 @@ defineProps<{
   position: sticky;
   top: 0;
   z-index: 1;
-  margin: 0 calc(-1 * var(--horizontal-dialog-padding, 0));
   background-color: var(--knime-gray-ultra-light);
 
   & .section-header-layout-container {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    width: calc(100% - var(--horizontal-dialog-padding, 0) * 2);
-    margin: 0 var(--horizontal-dialog-padding, 0);
     border-bottom: 1px solid var(--knime-silver-sand);
 
     & h3 {