Fix: Ensure email text visibility in Dark Mode (#449)

[IzzaldinSamir]

Closes #449

The Bug

When Dark Mode is enabled, incoming emails containing inline styles (e.g., style="color: #000000") become invisible against the dark background.

The Fix

As discussed in the issue, many email clients resolve this by enforcing a light background for raw email content.
I added Tailwind classes (dark:bg-white dark:text-black dark:p-4 dark:rounded-md) to the messageContentEl wrapper around the <Letter> component. This ensures the email is rendered on a clean, light canvas when Dark Mode is active, preserving complex HTML layouts and ensuring black inline text remains perfectly readable.

Summary by CodeRabbit

• Style
  • Improved dark-mode readability for incoming email content with a light canvas and dark text.
  • Added padding, rounded corners, and clearer borders for a consistent presentation of rich email content in conversations.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 3075612d-acca-46c4-807b-d551b288c991

📥 Commits

Reviewing files that changed from the base of the PR and between a3a1025 and 4f061b6.

📒 Files selected for processing (2)

• frontend/apps/main/src/features/conversation/message/MessageBubble.vue
• frontend/shared-ui/assets/styles/main.scss

🚧 Files skipped from review as they are similar to previous changes (2)

• frontend/apps/main/src/features/conversation/message/MessageBubble.vue
• frontend/shared-ui/assets/styles/main.scss

---

📝 Walkthrough

Walkthrough

Incoming non-text messages apply email-light-canvas when they are incoming. Dark mode renders this content with a white background, dark text, spacing, rounded corners, and a border.

Changes

Message styling

Layer / File(s)	Summary
Style incoming email content frontend/apps/main/src/features/conversation/message/MessageBubble.vue, frontend/shared-ui/assets/styles/main.scss	Incoming non-text messages conditionally receive email-light-canvas. Dark-mode styles define its light canvas and layout properties.

Estimated code review effort: 1 (Trivial) | ~2 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the dark-mode email visibility fix implemented by the changes.
Linked Issues check	✅ Passed	The changes address issue #449 by keeping incoming email text readable on a light canvas in dark mode.
Out of Scope Changes check	✅ Passed	All changes support the linked issue and the stated dark-mode email readability objective.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@frontend/shared-ui/assets/styles/main.scss`:
- Around line 262-264: In the affected style rule, add an empty line between the
`@apply` declaration and the color-scheme: light declaration to satisfy
Stylelint’s declaration-empty-line-before rule; leave the remaining declarations
unchanged.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 3812dafa-8161-4155-8d70-62440ad1436b

📥 Commits

Reviewing files that changed from the base of the PR and between 45c1b6a and 9862adc.

📒 Files selected for processing (2)

• frontend/apps/main/src/features/conversation/message/MessageBubble.vue
• frontend/shared-ui/assets/styles/main.scss

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@frontend/shared-ui/assets/styles/main.scss`:
- Around line 262-265: Remove the Markdown backticks surrounding the CSS
declarations in the affected style block, including the `background` value, so
`@apply`, `color-scheme`, and `background` are valid SCSS/CSS syntax and the
dark-mode email canvas rule compiles successfully.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: f6d8aa8d-8183-4d46-99bb-c78e2144b8cb

📥 Commits

Reviewing files that changed from the base of the PR and between 9862adc and a3a1025.

📒 Files selected for processing (1)

• frontend/shared-ui/assets/styles/main.scss