From 922fc5e0ff2dd6e4cf3a15548392af865e6ad9d2 Mon Sep 17 00:00:00 2001
From: Paul Baernreuther <paul.baernreuther@knime.com>
Date: Mon, 6 Oct 2025 07:43:19 +0200
Subject: [PATCH 1/3] UIEXT-2481: Enable setting the "set text" for side drawer
 sections

UIEXT-2481 (WebUI for DB Table Creator)
---
 .changeset/pretty-numbers-wash.md                         | 5 +++++
 .../src/layoutComponents/SettingsSubPanelLayout.vue       | 8 ++++++--
 2 files changed, 11 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/pretty-numbers-wash.md

diff --git a/.changeset/pretty-numbers-wash.md b/.changeset/pretty-numbers-wash.md
new file mode 100644
index 0000000000..ae74ed4d2d
--- /dev/null
+++ b/.changeset/pretty-numbers-wash.md
@@ -0,0 +1,5 @@
+---
+"@knime/jsonforms": patch
+---
+
+Enable setting the set text in side drawer sections.
diff --git a/packages/jsonforms/src/layoutComponents/SettingsSubPanelLayout.vue b/packages/jsonforms/src/layoutComponents/SettingsSubPanelLayout.vue
index bcd7a89cc3..a5da2dc235 100644
--- a/packages/jsonforms/src/layoutComponents/SettingsSubPanelLayout.vue
+++ b/packages/jsonforms/src/layoutComponents/SettingsSubPanelLayout.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed } from "vue";
 import { DispatchRenderer } from "@jsonforms/vue";
 
 import { FunctionButton } from "@knime/components";
@@ -10,7 +11,10 @@ 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");
 </script>
 
 <template>
@@ -22,7 +26,7 @@ defineProps<VueLayoutProps>();
       <SectionHeading :title-text="layout.uischema.label">
         <template #right-buttons>
           <FunctionButton compact class="set-button" @click="expand">
-            <span>Set</span>
+            <span>{{ setText }}</span>
             <NextIcon />
           </FunctionButton>
         </template>

From ff3e44639918e20cfd23fd868e74e1ab05eb7496 Mon Sep 17 00:00:00 2001
From: Paul Baernreuther <paul.baernreuther@knime.com>
Date: Mon, 6 Oct 2025 08:41:39 +0200
Subject: [PATCH 2/3] UIEXT-2481: Show descriptions for side drawer sections

UIEXT-2481 (WebUI for DB Table Creator)
---
 .../SettingsSubPanelLayout.vue                | 74 +++++++++++--------
 1 file changed, 44 insertions(+), 30 deletions(-)

diff --git a/packages/jsonforms/src/layoutComponents/SettingsSubPanelLayout.vue b/packages/jsonforms/src/layoutComponents/SettingsSubPanelLayout.vue
index a5da2dc235..8e1b2ff338 100644
--- a/packages/jsonforms/src/layoutComponents/SettingsSubPanelLayout.vue
+++ b/packages/jsonforms/src/layoutComponents/SettingsSubPanelLayout.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import { DispatchRenderer } from "@jsonforms/vue";
 
 import { FunctionButton } from "@knime/components";
@@ -15,39 +15,45 @@ 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>{{ setText }}</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>
@@ -56,4 +62,12 @@ const setText = computed(() => options.value.setText ?? "Set");
     margin: 0 var(--space-4);
   }
 }
+
+.flex-row {
+  display: flex;
+  flex-direction: row;
+  gap: var(--space-8);
+  align-items: center;
+  justify-content: flex-end;
+}
 </style>

From 599ddc1536360b565a100830a7bc5770b38e5419 Mon Sep 17 00:00:00 2001
From: Paul Baernreuther <paul.baernreuther@knime.com>
Date: Mon, 6 Oct 2025 08:45:30 +0200
Subject: [PATCH 3/3] UIEXT-2970: Remove back-and-forth margins of section
 headlines

UIEXT-2970 (Section description popover overflows)
---
 .../jsonforms/src/layoutComponents/section/SectionHeading.vue  | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/jsonforms/src/layoutComponents/section/SectionHeading.vue b/packages/jsonforms/src/layoutComponents/section/SectionHeading.vue
index a09736a6c5..69eed03122 100644
--- a/packages/jsonforms/src/layoutComponents/section/SectionHeading.vue
+++ b/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 {