Fix exercise question card headspace

[FleetAdmiralJakob]

Summary

• centers Üben/Praxis question cards on the full viewport to match the Figma vertical-center constraint
• keeps question content responsive with 24 pt side padding and a 345 pt maximum width
• keeps answer actions visible below the centered region while preserving ScrollView fallback for oversized content
• prevents keyboard-driven Android window resizing from moving the card, while still accepting genuine multi-window and foldable viewport changes

Root cause

Removing the original fixed top margin eliminated the excessive headspace, but it left the card positioned directly after the header. The approved Figma frames instead constrain the card to the vertical center of the full screen. The final implementation derives a symmetric center region from the live viewport and keeps the header, card, and action widths aligned responsively.

Verification

• pnpm test — 27 files, 128 tests passed
• pnpm format:check
• pnpm typecheck
• pnpm lint
• Matt Pocock two-axis review — Standards: 0 remaining findings; Spec: 0 findings
• CodeRabbit CLI final review — 0 findings
• CodeRabbit cloud review — 0 actionable comments
• GitHub/Expo CI — all 6 checks passed
• isolated iPhone 17 and iPhone 13 mini simulator QA via Computer Use
• full-timeline video inspection — 4.90 seconds; 10 frames at 2 fps; every sampled frame shows only the centered Üben card and the x=2 → x=4 selection change; no onboarding or unrelated screen

Before — reported issue

The original issue screenshot shows the excessive blank space above the exercise question card.

Source: DAY-166 / GitHub issue #218

After — final visual evidence

iPhone 17

iPhone 13 mini

Interaction recording

day166-centered-interaction.mp4

Design references

• Üben — Figma
• Praxis — Figma
• Lernkarten — intentionally unchanged

#218

Closes #218

[linear-code]

DAY-166

[coderabbitai]

📝 Walkthrough

Walkthrough

The learning session screen now uses keyboard-aware viewport tracking and shared geometry helpers to center and size question content responsively. Header and action-row styling accept runtime overrides, and layout behavior is covered by tests.

Changes

Responsive learning session layout

Layer / File(s)	Summary
Layout geometry contracts src/features/learning-plans/session-content-layout.ts, src/features/learning-plans/session-content-layout.test.ts	Adds constants and tested helpers for centered question height, question position, responsive width, and stable keyboard-aware viewport height.
Viewport and question rendering integration src/app/learning-plans/.../sessions/.../index.tsx	Tracks window and keyboard changes, applies conditional content padding and header width, and renders the question branch with computed minimum height instead of fixed top spacing.
Reusable component style wiring src/components/screen-header.tsx, src/app/learning-plans/.../sessions/.../index.tsx	Adds ScreenHeader.runtimeStyle and merges optional ActionRow.className values with its default layout classes.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Possibly related PRs

• Dayova/dayova-mvp#150: Modifies the same learning session screen’s question flow, spacing, and action-row handling.
• Dayova/dayova-mvp#151: Extends styling behavior in the same ScreenHeader component.

Suggested reviewers: gamius00

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The PR addresses issue #218 by removing the extra top offset and tightening the exercise question card layout.
Out of Scope Changes check	✅ Passed	No clearly unrelated changes are present; the layout helpers, header styling, and tests support the question-card spacing fix.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately captures the main UI change: reducing excess headspace on the exercise question card.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch codex/day-166-exercise-headspace

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[FleetAdmiralJakob]

@coderabbitai review

[coderabbitai]

✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[FleetAdmiralJakob]

Final visual evidence (supersedes the earlier attachments)

iPhone 17

iPhone 13 mini

Interaction recording

day166-centered-interaction.mp4

Full-timeline evidence inspection: 4.90-second video; 10 frames sampled at 2 fps (0.5-second interval); one contact sheet; no audio stream. Every sampled frame shows only the centered Üben question card, with the selected answer changing from x=2 to x=4; no onboarding or unrelated screen appears.

[Gamius00]

Thanks, but it doesnt make sense to merge it, because I am currently refactoring the learnflow and also the UI of the learncards. But we can stay in touch and can discuss it.