Widgets are aligned to top

app/gui/src/project-view/assets/base.css

@@ -36,7 +36,7 @@
  *** Node graph core variables ***
  *********************************/
 :root {
-  /** Minimum height of a node "pill" shape. Ports might be higher when widgets demand it. */
+  /** Minimum height of a node "pill" shape. Nodes might be higher when widgets demand it. */
   --node-base-height: 32px;
   /** The minimum height of a port widget. Ports might be higher when widgets inside them demand it. */
   --node-port-height: 24px;
@@ -188,6 +188,34 @@
   }
 }
 
+/** A class of widgets containing subwidgets */
+.widgetParent {
+  display: flex;
+  flex-direction: row;
+  align-items: start;
+  justify-content: center;
+  min-height: var(--node-port-height);
+
+  &:has(.widgetExpanded) {
+    align-self: stretch
+  }
+}
+
+/** A class used in widgets of their fragments not higher than node's "baseline" */
+.widgetSingleLine {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  height: var(--node-port-height);
+}
+
+/** A class for widgets which want to expand their height to the entire node */
+.widgetExpanded {
+  align-self: stretch
+}
+
+
 /* Scrollbar style definitions for textual visualizations which need support for scrolling.
  *
  * The 11px width/height (depending on scrollbar orientation)

app/gui/src/project-view/components/GraphEditor/GraphNode.vue

@@ -497,8 +497,9 @@ const nodeName = computed(() => props.node.pattern?.code())
   border-radius: var(--node-border-radius);
   transition: box-shadow 0.2s ease-in-out;
   box-sizing: border-box;
+  --z-index-component: 24;
   --z-index-component-menu: 20;
-  --z-index-selection-submenu: calc(var(--z-index-component-menu) + 1);
+  --z-index-selection-submenu: 25;
 }
 
 .nodeBackground {
@@ -522,7 +523,7 @@ const nodeName = computed(() => props.node.pattern?.code())
   flex-direction: row;
   align-items: center;
   white-space: nowrap;
-  z-index: 24;
+  z-index: var(--z-index-component);
 }
 
 .binding {

app/gui/src/project-view/components/GraphEditor/widgets/WidgetApplication.vue

@@ -81,7 +81,7 @@ export const widgetDefinition = defineWidget(
 </script>
 
 <template>
-  <div class="WidgetApplication" :class="appClass">
+  <div class="WidgetApplication widgetParent" :class="appClass">
     <NodeWidget :input="targetMaybePort" :nest="application.isInnermost" />
     <div v-if="infixWidgetInput" class="infixOp" :style="operatorStyle">
       <NodeWidget :input="infixWidgetInput" />
@@ -94,10 +94,6 @@ export const widgetDefinition = defineWidget(
 
 <style scoped>
 .WidgetApplication {
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  justify-content: center;
   &.prefix {
     gap: var(--widget-token-pad-unit);
   }

app/gui/src/project-view/components/GraphEditor/widgets/WidgetArgumentName.vue

@@ -62,8 +62,8 @@ export const ArgumentNameShownKey: unique symbol = Symbol.for('WidgetInput:Argum
 </script>
 
 <template>
-  <div class="WidgetArgumentName" :class="{ primary, missing }">
-    <span class="name">
+  <div class="WidgetArgumentName widgetParent" :class="{ primary, missing }">
+    <span class="name widgetSingleLine">
       <span class="widgetApplyPadding" :class="{ widgetRounded: missing }">{{
         props.input[ArgumentInfoKey].info.name
       }}</span>
@@ -74,9 +74,6 @@ export const ArgumentNameShownKey: unique symbol = Symbol.for('WidgetInput:Argum
 
 <style scoped>
 .WidgetArgumentName {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
   gap: var(--widget-token-pad-unit);
 }
 

app/gui/src/project-view/components/GraphEditor/widgets/WidgetBlank.vue

@@ -21,13 +21,12 @@ export const widgetDefinition = defineWidget(
 </script>
 
 <template>
-  <span ref="rootNode" class="WidgetBlank widgetApplyPadding">_</span>
+  <span ref="rootNode" class="WidgetBlank widgetSingleLine widgetApplyPadding">_</span>
 </template>
 
 <style scoped>
 .WidgetBlank {
   color: transparent;
-  display: inline-block;
   position: relative;
   width: 20px;
   &::before {
@@ -37,7 +36,7 @@ export const widgetDefinition = defineWidget(
     width: 20px;
     height: 4px;
     border-radius: 2px;
-    bottom: 0;
+    bottom: 4px;
     background-color: var(--color-widget);
     transition: background-color 0.2s ease;
   }

app/gui/src/project-view/components/GraphEditor/widgets/WidgetCheckbox.vue

@@ -112,19 +112,13 @@ export const widgetDefinition = defineWidget(
 </script>
 
 <template>
-  <div class="WidgetCheckbox" :class="{ primary }">
+  <div class="WidgetCheckbox widgetSingleLine" :class="{ primary }">
     <span v-if="argumentName" class="name widgetApplyPadding" v-text="argumentName" />
     <CheckboxWidget v-model="value" class="widgetRounded" contenteditable="false" />
   </div>
 </template>
 
 <style scoped>
-.WidgetCheckbox {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
 .name {
   opacity: 0.5;
   margin-right: var(--widget-token-pad-unit);

app/gui/src/project-view/components/GraphEditor/widgets/WidgetEnsoExpression.vue

@@ -69,7 +69,7 @@ export const widgetDefinition = defineWidget(
 
 <template>
   <div
-    class="WidgetEnsoExpression widgetRounded widgetPill"
+    class="WidgetEnsoExpression widgetExpanded widgetRounded widgetPill"
     @click.stop="cmWidget?.focusAndSelect()"
   >
     <CodeMirrorWidgetBase
@@ -85,11 +85,3 @@ export const widgetDefinition = defineWidget(
     />
   </div>
 </template>
-
-<style scoped>
-.WidgetEnsoExpression {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-}
-</style>

app/gui/src/project-view/components/GraphEditor/widgets/WidgetFunctionName.vue

@@ -129,6 +129,11 @@ function rewriteMethodPointer(oldMethodPointer: MethodPointer, newMethodPointer:
   graph.value.db.insertSyntheticMethodPointerUpdate(oldMethodPointer, newMethodPointer)
   persisted?.handleModifiedMethodPointer(oldMethodPointer, newMethodPointer)
 }
+
+const widgetClass = computed(() => ({
+  widgetSingleLine: editFieldEnabled.value,
+  widgetParent: !editFieldEnabled.value,
+}))
 </script>
 
 <script lang="ts">
@@ -187,7 +192,7 @@ export const widgetDefinition = defineWidget(
 </script>
 
 <template>
-  <div class="WidgetFunctionName">
+  <div class="WidgetFunctionName" :class="widgetClass">
     <template v-if="!hideThisArg">
       <NodeWidget v-if="thisArg" :input="WidgetInput.FromAst(thisArg)" />
       <NodeWidget v-if="operator" :input="WidgetInput.FromAst(operator)" />
@@ -209,12 +214,6 @@ export const widgetDefinition = defineWidget(
 </template>
 
 <style scoped>
-.WidgetFunctionName {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-}
-
 /*noinspection CssUnusedSymbol*/
 .CodeMirrorRoot {
   font-weight: 800;

app/gui/src/project-view/components/GraphEditor/widgets/WidgetGroup.vue

@@ -38,17 +38,17 @@ export const widgetDefinition = defineWidget(
 </script>
 
 <template>
-  <div class="WidgetGroup">
-    <span v-if="displayParenthesis" class="token widgetApplyPadding">(</span>
+  <div class="WidgetGroup widgetParent">
+    <span v-if="displayParenthesis" class="token widgetSingleLine widgetApplyPadding">(</span>
     <NodeWidget v-if="child" :input="child" />
-    <span v-if="displayParenthesis" class="token widgetApplyPadding">)</span>
+    <span v-if="displayParenthesis" class="token widgetSingleLine widgetApplyPadding">)</span>
   </div>
 </template>
 
 <style scoped>
 .WidgetGroup {
   display: flex;
-  align-items: center;
+  align-items: stretch;
 }
 
 .token {

app/gui/src/project-view/components/GraphEditor/widgets/WidgetHierarchy.vue

@@ -45,7 +45,7 @@ export const widgetDefinition = defineWidget(
 </script>
 
 <template>
-  <div class="WidgetHierarchy" :class="spanClass">
+  <div class="WidgetHierarchy widgetParent" :class="spanClass">
     <NodeWidget
       v-for="child in expressionChildren(props.input.value)"
       :key="child.id"
@@ -56,9 +56,6 @@ export const widgetDefinition = defineWidget(
 
 <style scoped>
 .WidgetHierarchy {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
   transition: background 0.2s ease;
 
   &.Literal {

app/gui/src/project-view/components/GraphEditor/widgets/WidgetIcon.vue

@@ -35,8 +35,14 @@ export const widgetDefinition = defineWidget(
 </script>
 
 <template>
-  <div :class="{ WidgetIcon: true, noGap: props.input[DisplayIcon].noGap === true }">
-    <div class="iconContainer">
+  <div
+    :class="{
+      WidgetIcon: true,
+      widgetParent: true,
+      noGap: props.input[DisplayIcon].noGap === true,
+    }"
+  >
+    <div class="iconContainer widgetSingleLine">
       <Transition>
         <GrowingSpinner
           v-if="icon === '$evaluating'"
@@ -53,22 +59,16 @@ export const widgetDefinition = defineWidget(
 
 <style scoped>
 .WidgetIcon {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
   gap: var(--widget-token-pad-unit);
   &.noGap {
     gap: 0;
   }
 }
 .iconContainer {
-  position: relative;
-  height: 16px;
-  width: 16px;
-  margin: 0 calc((var(--node-port-height) - 16px) / 2);
+  width: var(--node-port-height);
 }
 .nodeCategoryIcon {
-  position: absolute;
+  margin: auto;
 }
 .LoadingSpinner {
   border-radius: 100%;

app/gui/src/project-view/components/GraphEditor/widgets/WidgetMultiSelection.vue

@@ -178,7 +178,7 @@ export const widgetDefinition = defineWidget(
 <template>
   <div
     ref="widgetRoot"
-    class="WidgetMultiSelection clickable"
+    class="WidgetMultiSelection widgetParent clickable"
     @click.stop="toggleDropdownWidget"
     @pointerover="isHovered = true"
     @pointerout="isHovered = false"
@@ -199,10 +199,6 @@ export const widgetDefinition = defineWidget(
 
 <style scoped>
 .WidgetMultiSelection {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
   position: relative;
-  min-height: var(--node-port-height);
 }
 </style>

app/gui/src/project-view/components/GraphEditor/widgets/WidgetNumber.vue

@@ -91,7 +91,7 @@ export const widgetDefinition = defineWidget(
   -->
   <NumericInputWidget
     ref="inputComponent"
-    class="WidgetNumber"
+    class="WidgetNumber widgetSingleLine"
     :limits="limits"
     :placeholder="placeholder"
     :modelValue="value"
@@ -103,10 +103,3 @@ export const widgetDefinition = defineWidget(
     @input="editHandler.edit($event)"
   />
 </template>
-
-<style scoped>
-.WidgetNumber {
-  display: inline-block;
-  vertical-align: middle;
-}
-</style>

app/gui/src/project-view/components/GraphEditor/widgets/WidgetPort.vue

@@ -204,7 +204,7 @@ export const widgetDefinition = defineWidget(
 <template>
   <div
     ref="portRoot"
-    class="WidgetPort"
+    class="WidgetPort widgetParent"
     :data-port="props.input.portId"
     :class="{
       enabled,
@@ -226,14 +226,8 @@ export const widgetDefinition = defineWidget(
 
 <style scoped>
 .WidgetPort {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
   position: relative;
-  text-align: center;
   border-radius: var(--node-port-border-radius);
-  min-height: var(--node-port-height);
   min-width: var(--node-port-height);
   transition: background-color 0.2s ease;
 }

app/gui/src/project-view/components/GraphEditor/widgets/WidgetSelection.vue

@@ -272,7 +272,7 @@ declare module '$/providers/openedProjects/widgetRegistry' {
 <template>
   <div
     ref="widgetRoot"
-    class="WidgetSelection clickable"
+    class="WidgetSelection widgetParent clickable"
     @pointerdown.prevent
     @click.stop="toggleDropdownWidget"
     @keydown.enter.stop
@@ -309,11 +309,7 @@ declare module '$/providers/openedProjects/widgetRegistry' {
 
 <style scoped>
 .WidgetSelection {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
   position: relative;
-  min-height: var(--node-port-height);
 }
 
 .activityElement {

app/gui/src/project-view/components/GraphEditor/widgets/WidgetSelection/SelectionSubmenu.vue

@@ -10,7 +10,7 @@
 import { submenuDropdownStyles } from './styles'
 import { isSubmenuEntry, type SubmenuEntry } from './submenuEntry'
 
 const { extendUpwards = true, ...props } = defineProps<{
   floatReference: Opt<HTMLElement>
   show: boolean
   entries: T[]
@@ -118,11 +118,7 @@
       <SizeTransition height :duration="100">
         <DropdownWidget
           v-if="props.show"
-          :class="[
-            'widgetPill',
-            { outlined: !props.topLevel },
-            { ExtendUpwards: props.topLevel && extendUpwards },
-          ]"
+          class="outlined"
           :entries="entries"
           @clickEntry="onClick"
           @scroll="onScroll"