Fix inbox empty-state alignment when sidebars are open

[tavva]

Problem

Reported in #55: "Your inbox is empty!" is off-centre when the Obsidian window/panel is narrower than the window — the content doesn't follow the main panel width.

Root cause

.flow-gtd-inbox-modal (the inbox view's contentEl) used width: min(90vw, 1200px). 90vw is 90% of the whole window, not the inbox panel. When sidebars are open the panel is narrower than the window, so contentEl stayed window-sized, overflowed past the panel's right edge, and the inner .flow-inbox-redesign (which centres the empty-state text with margin: 0 auto) centred itself within that too-wide element — drifting the text right of the panel centre. The view title is drawn by Obsidian against the panel, hence the visible misalignment.

Measured live with the right sidebar open: panel 498px (centre 249), but content centred at 405 and overflowing to 809px.

Fix

width: min(90vw, 1200px) → width: 100%. The element now follows its panel; max-width: 1200px + margin: 0 auto still cap and centre on very wide panels.

After fix (sidebar open): content width 498 = panel 498, centre 249 = panel centre 249, no overflow. Full-width unaffected.

Tests

• Added tests/inbox-modal-layout-style.test.ts (would fail on the old 90vw).
• Verified live in Obsidian; npm run format, npm run build, npm test all pass (917 tests).

Fixes #55

Summary by CodeRabbit

• Style

  • Updated inbox modal layout to size relative to its container instead of the viewport, improving responsiveness while maintaining maximum width constraints for consistent behavior across screen sizes.

• Tests

  • Added regression test to verify modal sizing configuration remains correct.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: ea571483-a507-45bb-87d0-3577b6a1764a

📥 Commits

Reviewing files that changed from the base of the PR and between 3bc0da1 and b18c517.

📒 Files selected for processing (2)

• styles.css
• tests/inbox-modal-layout-style.test.ts

---

📝 Walkthrough

Walkthrough

The inbox modal layout is fixed to size relative to its container by changing the CSS width from a viewport-relative calculation to 100%, which allows the modal to follow its parent container width. A regression test is added to validate the styling decision.

Changes

Inbox Modal Layout Fix

Layer / File(s)	Summary
Inbox modal container-relative width styles.css, tests/inbox-modal-layout-style.test.ts	The .flow-gtd-inbox-modal width changes from min(90vw, 1200px) to 100% to size the modal relative to its container. A new test validates the CSS rule by asserting width: 100%, absence of viewport units, and retention of max-width: 1200px and margin: 0 auto.

🎯 2 (Simple) | ⏱️ ~5 minutes

A modal finds its place,
No viewport chains it down,
Container rules supreme. 🐰✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: fixing inbox empty-state alignment when sidebars are open, which matches the CSS modification and test additions in the changeset.
Linked Issues check	✅ Passed	The pull request addresses the core requirement in #55 by changing width from min(90vw, 1200px) to 100% with max-width constraint, ensuring the empty-state content follows the panel width and centers correctly.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing the alignment issue: CSS width adjustment in styles.css and a regression test to prevent reoccurrence, with no unrelated modifications.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ 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 fix/inbox-empty-state-alignment

---

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 and usage tips.}