From 5b62abf8d4b205d8603f3a0d34393d47d30412e8 Mon Sep 17 00:00:00 2001
From: syntaxbullet <syntaxbullet@protonmail.com>
Date: Fri, 31 Jul 2026 17:34:31 +0200
Subject: [PATCH] fix(home): rebalance application form split

---
 .../forms/ApplicationFormSection.tsx          |  7 +-
 .../int/application-form-layout.int.spec.tsx  | 80 +++++++++++++++++++
 2 files changed, 86 insertions(+), 1 deletion(-)
 create mode 100644 tests/int/application-form-layout.int.spec.tsx

diff --git a/src/spa/components/forms/ApplicationFormSection.tsx b/src/spa/components/forms/ApplicationFormSection.tsx
index 4879aeb..c6630bb 100644
--- a/src/spa/components/forms/ApplicationFormSection.tsx
+++ b/src/spa/components/forms/ApplicationFormSection.tsx
@@ -42,12 +42,17 @@ export function ApplicationFormSection({ source }: { source: NewsletterSource })
   const newsletterPhase = newsletterPhaseForApplicationPhase(activeApplicationPhase)
   const benefits = fallbackArray<NewsletterBenefit>(section.benefits, homeContent.application.benefits)
   const finalBenefits = showApplicationForm ? benefits : newsletterCopy.benefits
+  const desktopGridTemplateColumns = source === 'homepage' ? '5fr 1px 7fr' : '4fr 1px 8fr'
 
   return (
     <section style={{ background: '#24366A', position: 'relative', overflow: 'hidden', height: isMobile ? 'auto' : showApplicationForm ? 'calc(100vh - 60px)' : 'auto', minHeight: isMobile ? undefined : showApplicationForm ? undefined : 560, display: 'flex', flexDirection: 'column' }} id="bewerben">
       <div style={{ position: 'absolute', left: -120, top: '50%', transform: 'translateY(-50%)', width: 600, height: 600, borderRadius: '50%', background: 'radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%)', pointerEvents: 'none' }} />
 
-      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '4fr 1px 8fr', position: 'relative', flex: isMobile ? 'none' : 1, minHeight: 0, overflow: 'hidden' }}>
+      <div
+        data-testid="application-form-layout"
+        data-source={source}
+        style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : desktopGridTemplateColumns, position: 'relative', flex: isMobile ? 'none' : 1, minHeight: 0, overflow: 'hidden' }}
+      >
         <div style={{ padding: isMobile ? '32px 24px 24px' : '36px 36px 32px 52px', display: 'flex', flexDirection: 'column', justifyContent: 'center', overflow: 'hidden' }}>
           <span style={{ fontFamily: FF, fontSize: 10, color: '#EFBF04', textTransform: 'uppercase', letterSpacing: '0.36em', fontWeight: 700, display: 'block', marginBottom: 16, opacity: 0.8 }}>{showApplicationForm ? fallbackText(section.eyebrow, homeContent.application.eyebrow) : newsletterCopy.eyebrow}</span>
           <h2 className="type-section-title text-role-inverse" style={{ textTransform: 'uppercase', marginBottom: 16 }}>
diff --git a/tests/int/application-form-layout.int.spec.tsx b/tests/int/application-form-layout.int.spec.tsx
new file mode 100644
index 0000000..d8a993e
--- /dev/null
+++ b/tests/int/application-form-layout.int.spec.tsx
@@ -0,0 +1,80 @@
+import { cleanup, render, screen } from '@testing-library/react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { ApplicationFormSection } from '@/spa/components/forms/ApplicationFormSection'
+
+const viewport = vi.hoisted(() => ({ mobile: false }))
+const cms = vi.hoisted(() => ({ activePhase: '0' }))
+
+vi.mock('@/spa/hooks/useIsMobile', () => ({
+  useIsMobile: () => viewport.mobile,
+}))
+
+vi.mock('@/spa/cmsRoute', () => ({
+  useApplicationForm: () => undefined,
+  useApplicationPhase: () => ({ activePhase: cms.activePhase }),
+  useNewsletterForm: () => undefined,
+}))
+
+vi.mock('@/spa/components/forms/BewerbungsForm', () => ({
+  default: () => <div>Application form</div>,
+}))
+
+vi.mock('@/spa/components/forms/NewsletterInterestForm', () => ({
+  NewsletterInterestForm: () => <div>Newsletter form</div>,
+}))
+
+vi.mock('@/spa/components/ui/UnoptimizedImage', () => ({
+  default: ({ alt }: { alt: string }) => <div role="img" aria-label={alt} />,
+}))
+
+describe('shared application form layout', () => {
+  beforeEach(() => {
+    viewport.mobile = false
+    cms.activePhase = '0'
+  })
+
+  afterEach(() => cleanup())
+
+  it('widens only the homepage blue panel to a five-to-seven desktop split', () => {
+    render(<ApplicationFormSection source="homepage" />)
+
+    const layout = screen.getByTestId('application-form-layout')
+    expect(layout.getAttribute('data-source')).toBe('homepage')
+    expect(layout.style.gridTemplateColumns).toBe('5fr 1px 7fr')
+  })
+
+  it('keeps the Teilnahme desktop split unchanged', () => {
+    render(<ApplicationFormSection source="participation" />)
+
+    const layout = screen.getByTestId('application-form-layout')
+    expect(layout.getAttribute('data-source')).toBe('participation')
+    expect(layout.style.gridTemplateColumns).toBe('4fr 1px 8fr')
+  })
+
+  it('preserves the shared mobile stack for both sources', () => {
+    viewport.mobile = true
+
+    const { rerender } = render(<ApplicationFormSection source="homepage" />)
+    expect(screen.getByTestId('application-form-layout').style.gridTemplateColumns).toBe('1fr')
+
+    rerender(<ApplicationFormSection source="participation" />)
+    expect(screen.getByTestId('application-form-layout').style.gridTemplateColumns).toBe('1fr')
+  })
+
+  it('keeps the homepage ratio across application and newsletter phases', () => {
+    const { rerender } = render(<ApplicationFormSection source="homepage" />)
+    expect(screen.getByText('Application form')).toBeTruthy()
+    expect(screen.getByTestId('application-form-layout').style.gridTemplateColumns).toBe(
+      '5fr 1px 7fr',
+    )
+
+    cms.activePhase = '1'
+    rerender(<ApplicationFormSection source="homepage" />)
+
+    expect(screen.getByText('Newsletter form')).toBeTruthy()
+    expect(screen.getByTestId('application-form-layout').style.gridTemplateColumns).toBe(
+      '5fr 1px 7fr',
+    )
+  })
+})