fix(email-viewer): fix date overflowing its container and overlapping download button by adrianschmidt-bot · Pull Request #3909 · Lundalogik/lime-elements

adrianschmidt-bot · 2026-02-25T20:18:38Z

What

Remove absolute positioning from the date element in email headers. The date now uses align-self: flex-end to stay right-aligned within the flex column, instead of position: absolute which caused it to escape the container and overlap with the file-viewer's download button.

Why

The date dl used position: absolute; right: 0.25rem; transform: translateY(-50%) with no explicit top, causing it to float outside .email-headers. When the file-viewer rendered its download button (also absolutely positioned top-right), they'd overlap.

Closes #3908

Summary by CodeRabbit

Style
- Refined email header date positioning, reduced padding, and increased background contrast with a subtle border for clearer visibility.
Bug Fix
- Fixed/improved header layout; note: a styling issue affecting attachment border color was introduced and will be corrected in a follow-up.

coderabbitai · 2026-02-25T20:19:02Z

📝 Walkthrough

Walkthrough

Adjusted email preview header styling: changed vertical alignment and padding of the date element, increased background opacity and added a 1px border; a typo was introduced in the attachments border color function.

Changes

Cohort / File(s)	Summary
Email Viewer Styling `src/components/email-viewer/email-viewer.scss`	Modified `.email-headers .date` positioning/alignment and padding; increased background alpha and added `1px` border using `--contrast-600`; changed `.attachments` border-bottom color to `rga(...)` (likely typo vs `rgba(...)`).

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested reviewers

adrianschmidt

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Linked Issues check	⚠️ Warning	The PR introduces a typo in the .attachments border-bottom color (rga instead of rgba), which is an unintended defect unrelated to fixing the date overflow issue from `#3908`.	Fix the typo in .attachments by changing 'rga(var(--contrast-700))' back to 'rgba(var(--contrast-700))' to ensure the color function is valid.

✅ 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 clearly describes the main fix: preventing the date from overflowing its container and overlapping the download button, which directly matches the core objective of issue `#3908`.
Out of Scope Changes check	✅ Passed	All changes are scoped to fixing the date positioning issue described in `#3908`; no unrelated functionality or systems were modified.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

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

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

coderabbitai

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/components/email-viewer/email-viewer.scss (1)
28-28: 🧹 Nitpick | 🔵 Trivial

position: relative on .email-headers is now a no-op — consider removing it.

It was introduced as the containing block for the old position: absolute .date. With the date now in-flow, no child of .email-headers uses absolute positioning, so this declaration carries no effect.
♻️ Proposed cleanup
 .email-headers {
-    position: relative;
     flex-shrink: 0;
     display: flex;
     flex-direction: column;
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/components/email-viewer/email-viewer.scss` at line 28, Remove the
now-unused position: relative declaration from the .email-headers rule in
email-viewer.scss because .date (and other children) are in normal flow and no
longer use absolute positioning; locate the .email-headers selector in the file
(and verify no descendants rely on absolute positioning) and delete the
position: relative line to clean up dead CSS.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Outside diff comments:
In `@src/components/email-viewer/email-viewer.scss`:
- Line 28: Remove the now-unused position: relative declaration from the
.email-headers rule in email-viewer.scss because .date (and other children) are
in normal flow and no longer use absolute positioning; locate the .email-headers
selector in the file (and verify no descendants rely on absolute positioning)
and delete the position: relative line to clean up dead CSS.

ℹ️ Review info

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 02810f4 and 43e5432.

📒 Files selected for processing (1)

src/components/email-viewer/email-viewer.scss

adrianschmidt-bot · 2026-02-25T20:21:39Z

Good catch — removed the now-unused position: relative from .email-headers. ⚡ 0c9ee19

devbymadde · 2026-02-25T20:33:39Z

Nice work @adrianschmidt-bot but I'm not sure if this is looking better now when it's positioned at the bottom of the header. There was probably a reason for @Kiarokh to put it at the top in the first place. I think we should wait for his opinion and design eye :)

adrianschmidt-bot · 2026-02-25T20:33:55Z

That's a fair point! The fix solved the overflow issue, but moving the date to the bottom does change the visual hierarchy. Happy to wait for @Kiarokh's input on the best placement — he'll know what works best design-wise. 👍

… download button Remove absolute positioning from the date element in email headers. The date now flows naturally in the layout using flex alignment, which prevents it from escaping its container and colliding with the file-viewer's download button. fix: Lundalogik#3908

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/components/email-viewer/email-viewer.scss`:
- Line 96: Fix the typo in the CSS border declaration: locate the border-bottom
rule that currently reads "border-bottom: 1px dashed rga(var(--contrast-700));"
and change the function name from "rga" to "rgba" so the declaration becomes
valid and the browser will apply the dashed border as intended.

ℹ️ Review info

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 0c9ee19 and 287ade8.

📒 Files selected for processing (1)

src/components/email-viewer/email-viewer.scss

coderabbitai · 2026-02-27T09:07:31Z

    flex-shrink: 0;
    padding: 0.5rem;
-    border-bottom: 1px dashed rgba(var(--contrast-700));
+    border-bottom: 1px dashed rga(var(--contrast-700));


⚠️ Potential issue | 🔴 Critical

Typo: rga should be rgba.

This will cause the border-bottom declaration to be invalid and ignored by the browser.

🐛 Proposed fix

- border-bottom: 1px dashed rga(var(--contrast-700)); + border-bottom: 1px dashed rgba(var(--contrast-700));

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

border-bottom: 1px dashed rga(var(--contrast-700));

border-bottom: 1px dashed rgba(var(--contrast-700));

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed. In `@src/components/email-viewer/email-viewer.scss` at line 96, Fix the typo in the CSS border declaration: locate the border-bottom rule that currently reads "border-bottom: 1px dashed rga(var(--contrast-700));" and change the function name from "rga" to "rgba" so the declaration becomes valid and the browser will apply the dashed border as intended.

lime-opensource · 2026-02-27T09:10:10Z

🎉 This PR is included in version 39.5.2 🎉

The release is available on:

Your semantic-release bot 📦🚀

adrianschmidt-bot mentioned this pull request Feb 25, 2026

Date in the eml file previewer is rendered outside its container #3908

Closed

coderabbitai Bot reviewed Feb 25, 2026

View reviewed changes

Kiarokh force-pushed the fix/3908-email-date-positioning branch from 0c9ee19 to 287ade8 Compare February 27, 2026 09:04

Kiarokh approved these changes Feb 27, 2026

View reviewed changes

Kiarokh enabled auto-merge (rebase) February 27, 2026 09:04

coderabbitai Bot reviewed Feb 27, 2026

View reviewed changes

Kiarokh merged commit df03885 into Lundalogik:main Feb 27, 2026
8 of 9 checks passed

lime-opensource added the released label Feb 27, 2026

This was referenced May 7, 2026

fix(email-viewer): render attachments as readonly chips #4064

Open

fix(email-viewer, markdown): handle unreadable emails without manipulating their content #4066

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(email-viewer): fix date overflowing its container and overlapping download button#3909

fix(email-viewer): fix date overflowing its container and overlapping download button#3909
Kiarokh merged 1 commit intoLundalogik:mainfrom
adrianschmidt-bot:fix/3908-email-date-positioning

adrianschmidt-bot commented Feb 25, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Feb 25, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Suggested reviewers

❌ Failed checks (1 warning)

Uh oh!

coderabbitai Bot left a comment

Uh oh!

adrianschmidt-bot commented Feb 25, 2026

Uh oh!

devbymadde commented Feb 25, 2026

Uh oh!

adrianschmidt-bot commented Feb 25, 2026

Uh oh!

coderabbitai Bot left a comment

Uh oh!

coderabbitai Bot Feb 27, 2026

Uh oh!

Uh oh!

lime-opensource commented Feb 27, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

	border-bottom: 1px dashed rga(var(--contrast-700));
	border-bottom: 1px dashed rgba(var(--contrast-700));

Conversation

adrianschmidt-bot commented Feb 25, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What

Why

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Feb 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Suggested reviewers

❌ Failed checks (1 warning)

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

adrianschmidt-bot commented Feb 25, 2026

Uh oh!

devbymadde commented Feb 25, 2026

Uh oh!

adrianschmidt-bot commented Feb 25, 2026

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot Feb 27, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

lime-opensource commented Feb 27, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

adrianschmidt-bot commented Feb 25, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Feb 25, 2026 •

edited

Loading