From aa03f714b35cd366a9b8d03ef143a612a472dfc7 Mon Sep 17 00:00:00 2001
From: Tim Fischbach <tfischbach@codevise.de>
Date: Tue, 13 Jan 2026 17:10:27 +0100
Subject: [PATCH] Skip first section styling for excursions

Prevents the special first section styling (like widget margin
padding) from being applied to the first section of an excursion,
since excursions appear in an overlay.

REDMINE-21191
---
 .../features/sectionFirstClass-spec.js        | 67 +++++++++++++++++++
 .../scrolled/package/src/frontend/Section.js  |  2 +-
 2 files changed, 68 insertions(+), 1 deletion(-)
 create mode 100644 entry_types/scrolled/package/spec/frontend/features/sectionFirstClass-spec.js

diff --git a/entry_types/scrolled/package/spec/frontend/features/sectionFirstClass-spec.js b/entry_types/scrolled/package/spec/frontend/features/sectionFirstClass-spec.js
new file mode 100644
index 0000000000..cec22b4809
--- /dev/null
+++ b/entry_types/scrolled/package/spec/frontend/features/sectionFirstClass-spec.js
@@ -0,0 +1,67 @@
+import React from 'react';
+import {act} from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+
+import {frontend} from 'frontend';
+import {renderEntry, usePageObjects} from 'support/pageObjects';
+import {changeLocationHash} from 'support/changeLocationHash';
+
+import styles from 'frontend/Section.module.css';
+
+describe('section first class', () => {
+  usePageObjects();
+
+  beforeEach(() => window.location.hash = '#initial');
+
+  it('is applied to first section of main storyline', () => {
+    const {getSectionByPermaId} = renderEntry({
+      seed: {
+        sections: [{id: 1, permaId: 10}, {id: 2, permaId: 11}]
+      }
+    });
+
+    expect(getSectionByPermaId(10).el).toHaveClass(styles.first);
+  });
+
+  it('is not applied to second section of main storyline', () => {
+    const {getSectionByPermaId} = renderEntry({
+      seed: {
+        sections: [{id: 1, permaId: 10}, {id: 2, permaId: 11}]
+      }
+    });
+
+    expect(getSectionByPermaId(11).el).not.toHaveClass(styles.first);
+  });
+
+  it('is not applied to first section of excursion', () => {
+    frontend.widgetTypes.register('excursionOverlay', {
+      component: function ({children}) {
+        return <div data-testid="excursion-overlay">{children}</div>;
+      }
+    });
+
+    const {getSectionByPermaId} = renderEntry({
+      seed: {
+        widgets: [{
+          typeName: 'excursionOverlay',
+          role: 'excursion'
+        }],
+        storylines: [
+          {id: 1, configuration: {main: true}},
+          {id: 2}
+        ],
+        chapters: [
+          {id: 1, storylineId: 1},
+          {id: 2, storylineId: 2, configuration: {title: 'excursion'}}
+        ],
+        sections: [
+          {id: 1, permaId: 10, chapterId: 1},
+          {id: 2, permaId: 20, chapterId: 2}
+        ]
+      }
+    });
+    act(() => changeLocationHash('#excursion'));
+
+    expect(getSectionByPermaId(20).el).not.toHaveClass(styles.first);
+  });
+});
diff --git a/entry_types/scrolled/package/src/frontend/Section.js b/entry_types/scrolled/package/src/frontend/Section.js
index 26a9c0bb9b..81d48d81da 100644
--- a/entry_types/scrolled/package/src/frontend/Section.js
+++ b/entry_types/scrolled/package/src/frontend/Section.js
@@ -62,7 +62,7 @@ const Section = withInlineEditingDecorator('SectionDecorator', function Section(
              className={classNames(styles.Section,
                                    transitionStyles.section,
                                    backdropSectionClassNames,
-                                   {[styles.first]: section.sectionIndex === 0},
+                                   {[styles.first]: section.sectionIndex === 0 && !section.chapter?.isExcursion},
                                    {[styles.narrow]: section.width === 'narrow'},
                                    `scope-${getAppearanceSectionScopeName(section.appearance)}`,
                                    section.invert ? styles.darkContent : styles.lightContent)}