Add remaining vertical space option for sections

Allow positioning content at top, bottom, or centered when section
content does not fill the full viewport height. Only available when
"Use Full Viewport-Height" is enabled.

REDMINE-21191

Author: tf

entry_types/scrolled/config/locales/de.yml

@@ -1383,6 +1383,14 @@ de:
             label: Abstand oben (Hochkant)
           portraitPaddingBottom:
             label: Abstand unten (Hochkant)
+          remainingVerticalSpace:
+            label: Verbleibender vertikaler Raum
+            inline_help: Bestimmt, wo der Inhalt positioniert wird, wenn er nicht die gesamte Höhe des Abschnitts ausfüllt.
+            inline_help_disabled: Nur verfügbar, wenn "Volle Viewport-Höhe" in den Abschnittseinstellungen aktiviert ist.
+            values:
+              around: Um den Inhalt
+              above: Über dem Inhalt
+              below: Unter dem Inhalt
       typography_sizes:
         xl: Sehr groß
         lg: Groß

entry_types/scrolled/config/locales/en.yml

@@ -1366,6 +1366,14 @@ en:
             label: Top padding (Portrait)
           portraitPaddingBottom:
             label: Bottom padding (Portrait)
+          remainingVerticalSpace:
+            label: Remaining vertical space
+            inline_help: Controls where content is positioned when it does not fill the full height of the section.
+            inline_help_disabled: Only available when "Use Full Viewport-Height" is enabled in section settings.
+            values:
+              around: Around content
+              above: Above content
+              below: Below content
       typography_sizes:
         xl: Very large
         lg: Large

entry_types/scrolled/package/spec/frontend/features/sectionPadding-spec.js

@@ -129,4 +129,51 @@ describe('section padding', () => {
       '--foreground-padding-bottom': 'var(--theme-section-padding-bottom-md)',
     });
   });
+
+  it('centers content vertically by default', () => {
+    const {getSectionByPermaId} = renderEntry({
+      seed: {
+        sections: [{id: 5, permaId: 6}],
+        contentElements: [{sectionId: 5}]
+      }
+    });
+
+    const section = getSectionByPermaId(6);
+    expect(section.hasRemainingSpaceAbove()).toBe(false);
+    expect(section.hasRemainingSpaceBelow()).toBe(false);
+  });
+
+  it('supports remaining vertical space above content', () => {
+    const {getSectionByPermaId} = renderEntry({
+      seed: {
+        sections: [{
+          id: 5,
+          permaId: 6,
+          configuration: {remainingVerticalSpace: 'above'}
+        }],
+        contentElements: [{sectionId: 5}]
+      }
+    });
+
+    const section = getSectionByPermaId(6);
+    expect(section.hasRemainingSpaceAbove()).toBe(true);
+    expect(section.hasRemainingSpaceBelow()).toBe(false);
+  });
+
+  it('supports remaining vertical space below content', () => {
+    const {getSectionByPermaId} = renderEntry({
+      seed: {
+        sections: [{
+          id: 5,
+          permaId: 6,
+          configuration: {remainingVerticalSpace: 'below'}
+        }],
+        contentElements: [{sectionId: 5}]
+      }
+    });
+
+    const section = getSectionByPermaId(6);
+    expect(section.hasRemainingSpaceAbove()).toBe(false);
+    expect(section.hasRemainingSpaceBelow()).toBe(true);
+  });
 });

entry_types/scrolled/package/spec/support/pageObjects.js

@@ -200,6 +200,14 @@ function createSectionPageObject(el) {
       return foreground.classList.contains(foregroundStyles.paddingBottom);
     },
 
+    hasRemainingSpaceAbove() {
+      return foreground.classList.contains(foregroundStyles.spaceAbove);
+    },
+
+    hasRemainingSpaceBelow() {
+      return foreground.classList.contains(foregroundStyles.spaceBelow);
+    },
+
     hasFadedOutForeground() {
       return foreground.classList.contains(sharedTransitionStyles.fadedOut);
     },

entry_types/scrolled/package/src/editor/views/EditSectionPaddingsView.js

@@ -1,7 +1,7 @@
 import I18n from 'i18n-js';
 
 import {EditConfigurationView, SeparatorView} from 'pageflow/editor';
-import {SliderInputView, RadioButtonGroupInputView, CheckBoxInputView} from 'pageflow/ui';
+import {SliderInputView, RadioButtonGroupInputView, CheckBoxInputView, SelectInputView} from 'pageflow/ui';
 
 import {SectionPaddingVisualizationView} from './inputs/SectionPaddingVisualizationView';
 import {EditMotifAreaInputView} from './inputs/EditMotifAreaInputView';
@@ -189,6 +189,16 @@ function paddingInputs(tab, options) {
     onInteractionStart: scrollToSectionEnd,
     ...disabledOptions
   });
+
+  tab.view(SeparatorView);
+
+  tab.input('remainingVerticalSpace', SelectInputView, {
+    values: ['around', 'above', 'below'],
+    defaultValue: 'around',
+    disabledBinding: 'fullHeight',
+    disabled: fullHeight => !fullHeight,
+    ...disabledOptions
+  });
 }
 
 const motifAreaBinding = ['backdropType'];

entry_types/scrolled/package/src/frontend/Foreground.js

@@ -24,6 +24,16 @@ function className(props, forcePadding) {
     props.transitionStyles.foreground,
     props.transitionStyles[`foreground-${props.state}`],
     {[styles.paddingBottom]: props.paddingBottom || forcePadding},
-    styles[`${props.heightMode}Height`]
+    styles[`${props.heightMode}Height`],
+    styles[spaceClassName(props.section?.remainingVerticalSpace)]
   )
 }
+
+function spaceClassName(remainingVerticalSpace) {
+  if (remainingVerticalSpace === 'above') {
+    return 'spaceAbove';
+  }
+  else if (remainingVerticalSpace === 'below') {
+    return 'spaceBelow';
+  }
+}

entry_types/scrolled/package/src/frontend/Foreground.module.css

@@ -21,6 +21,14 @@
   min-height: 100vh;
 }
 
+.spaceAbove {
+  justify-content: flex-end;
+}
+
+.spaceBelow {
+  justify-content: flex-start;
+}
+
 .paddingBottom {
   padding-bottom: var(--foreground-padding-bottom, 3em);
 }