fix: restore sender copy-to-clipboard and fix thread subject alignment by sturlan · Pull Request #12966 · nextcloud/mail

sturlan · 2026-05-21T12:28:49Z

Summary

Follow-up to #12666, fixing two regressions it introduced.

#12952 — Lost ability to copy sender email to clipboard

Before #12666 the sender email was rendered as a RecipientBubble (contact popover with Reply / Add to Contact / Copy to clipboard). #12666 replaced it with a plain <button> or <p> — no popover in either case.

Fix:

Replace <p class="sender__email"> with RecipientBubble for the no-recipients case (sender email always clickable when expanded)
Add a From: row with RecipientBubble at the top of the expanded recipients section, restoring the contact popover when To/Cc/Bcc are present

#12946 — Regressed thread subject alignment

#mail-thread-header-fields had padding-inline-start: 66px, computed assuming envelope__header had 8 px of left padding. #12666 changed that padding from --border-radius-element (8 px) to --border-radius-container (12 px),
leaving the sticky header 4 px short.

Fix:

  padding-inline-start: calc(var(--default-grid-baseline) * 14 + var(--border-radius-container) + 2px);
  // 4×14 + 12 + 2 = 70 px — matches actual sender name position

Test plan

Expand a message with To/Cc → click toggle → From: row appears with clickable bubble → popover shows Copy to clipboard
Expand a message with no Cc/Bcc → sender email shown as RecipientBubble inline → click → popover works
Scroll thread → sticky subject header left-aligns with sender name in expanded envelope
npm run lint && npm run stylelint pass

Fixes #12946
Fixes #12952

Summary by CodeRabbit

New Features
- Improved the expanded thread envelope view to show sender details as recipient-style bubbles.
- Added a visible From: section alongside the existing To: recipient list.
Style
- Tweaked the thread header spacing for better alignment with the updated layout.

welcome · 2026-05-21T12:28:52Z

Thanks for opening your first pull request in this repository! ✌️

jancborchardt

According to the screenshots, the alignment is not fully fixed:

The people chips of "To" and "Cc" should have same indentation as those of "From"
The horizontal whitespace between the chips should be the same as the vertical whitespace between the chips
There's very little padding on the right of the inside of the chips

@nimishavijay for review as well

ChristophWurst · 2026-05-21T17:54:57Z

/backport to stable5.8

sturlan · 2026-05-26T07:39:22Z

Should i wait @nimishavijay before proceeding?

nimishavijay · 2026-05-26T08:48:59Z

Nice! Agree with the feedback @jancborchardt gave, plus I'd also add that the chips itself are quite large and blocky. I was think it could be smaller like the NcUserbubble component. Do you think we could get the styling to look similar?

sturlan · 2026-05-28T09:15:15Z

Hi @nimishavijay thanks for the feedback! I've been trying to get the chip styling right but I'm struggling with it — would you be open to taking ownership of the CSS for the recipient display? I'd be happy to leave that part to you and focus on the functional side of things. The current state uses NcUserBubble directly with no custom CSS overrides, so it should be a clean slate for you to work from.

nimishavijay · 2026-05-28T10:39:16Z

would you be open to taking ownership of the CSS for the recipient display?

Of course, I can definitely try my hand. would be better off as a follow up (opened it here #12989) so you are not blocked :)

sturlan · 2026-05-28T16:45:06Z

would you be open to taking ownership of the CSS for the recipient display?

Of course, I can definitely try my hand. would be better off as a follow up (opened it here #12989) so you are not blocked :)

That's great, in that case, if @ChristophWurst and @jancborchardt agree to can close this PR as i addressed the fixes and issues in two commits, one for fixing and the other to remove all custom css so you can have a clean start

github-actions · 2026-06-05T02:16:15Z

Hello there,
Thank you so much for taking the time and effort to create a pull request to our Nextcloud project.

We hope that the review process is going smooth and is helpful for you. We want to ensure your pull request is reviewed to your satisfaction. If you have a moment, our community management team would very much appreciate your feedback on your experience with this PR review process.

Your feedback is valuable to us as we continuously strive to improve our community developer experience. Please take a moment to complete our short survey by clicking on the following link: https://cloud.nextcloud.com/apps/forms/s/i9Ago4EQRZ7TWxjfmeEpPkf6

Thank you for contributing to Nextcloud and we hope to hear from you soon!

(If you believe you should not receive this message, you can add yourself to the blocklist.)

- Replace <p class="sender__email"> with RecipientBubble when expanded and hasRecipients is false, so clicking the sender email always opens the contact popover (reply, add to contact, copy to clipboard) - Add a From: row with RecipientBubble at the top of the expanded recipients section, restoring copy-to-clipboard for the sender when To/Cc/Bcc recipients are present (fixes nextcloud#12952) - Fix #mail-thread-header-fields padding-inline-start from the hardcoded 66px to calc(var(--default-grid-baseline)*14 + var(--border-radius-container) + 2px) to account for the --border-radius-container header padding introduced in PR nextcloud#12666 (fixes nextcloud#12946) Follows up on PR nextcloud#12666. AI-assisted: Claude Code (claude-sonnet-4-6) Signed-off-by: Darko Sturlan <darko.sturlan@gmail.com>

ChristophWurst

Code looks good

coderabbitai · 2026-06-25T07:02:11Z

@ChristophWurst I'll review the changes carefully.

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

ChristophWurst · 2026-06-25T07:02:42Z

@sturlan please post up to date before/after screenshots. Thanks!

coderabbitai · 2026-06-25T07:04:43Z

📝 Walkthrough

Walkthrough

The thread header padding was recalculated from design variables, and the expanded envelope view now shows sender information as recipient bubbles, including a new From: section for all senders.

Changes

Thread header and sender display

Layer / File(s)	Summary
Header spacing `src/components/Thread.vue`	The thread header left padding switches from a fixed value to a calculated CSS expression using grid and border-radius variables.
Expanded sender and recipients `src/components/ThreadEnvelope.vue`	The expanded envelope header shows the first sender as a `RecipientBubble`, and the expanded recipients area adds a `From:` list for all sender entries.

🎯 2 (Simple) | ⏱️ ~10 minutes

Hoppity hop, my whiskers cheer,
The thread now lines up nice and clear.
Sender bubbles, front to back,
Keep the mail-view on the track. 🐇

🚥 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 two main fixes: sender copy-to-clipboard restoration and thread subject alignment.
Linked Issues check	✅ Passed	The changes address both linked issues by restoring sender click actions in ThreadEnvelope.vue and correcting thread header alignment in Thread.vue.
Out of Scope Changes check	✅ Passed	The PR stays focused on the two reported regressions and does not introduce unrelated code changes.
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

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

coderabbitai

Actionable comments posted: 1

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: ab6784ff-e450-44d1-9602-18cda2b48a8e

📥 Commits

Reviewing files that changed from the base of the PR and between 4b1f184 and 9ff6996.

📒 Files selected for processing (2)

src/components/Thread.vue
src/components/ThreadEnvelope.vue

coderabbitai · 2026-06-25T07:04:46Z

-	// 66px to allign with the sender Envelope -> 8px margin + 2px border+ avatar -> 40px width  + envelope__header -> 8px padding + sender-> margin 8px
-	padding-inline-start: 66px;
+	// envelope margin (2×baseline) + border (2px) + header padding (--border-radius-container) + avatar (10×baseline) + sender margin (2×baseline)
+	padding-inline-start: calc(var(--default-grid-baseline) * 14 + var(--border-radius-container) + 2px);


📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win

Replace hardcoded 2px with a design token variable.

+ 2px introduces a magic dimension in SCSS. Use a Nextcloud CSS variable (or derive from one) to keep spacing/dimensions tokenized.

Suggested change

- padding-inline-start: calc(var(--default-grid-baseline) * 14 + var(--border-radius-container) + 2px); + padding-inline-start: calc(var(--default-grid-baseline) * 14 + var(--border-radius-container) + (var(--border-width-input-focused) * 2));

As per coding guidelines, "Use Nextcloud CSS variables for all CSS colors, spacing, and dimensions; do not use magic numbers."

📝 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

padding-inline-start: calc(var(--default-grid-baseline) * 14 + var(--border-radius-container) + 2px);

padding-inline-start: calc(var(--default-grid-baseline) * 14 + var(--border-radius-container) + (var(--border-width-input-focused) * 2));

Source: Coding guidelines

sturlan · 2026-06-25T07:48:18Z

@sturlan please post up to date before/after screenshots. Thanks!

Hi Christoph,
Here is the relevant screenshot, please forgive me, i have only after

sturlan · 2026-06-25T09:12:49Z

@ChristophWurst can this be merged now?

ChristophWurst · 2026-06-25T10:45:11Z

Waiting for @jancborchardt on the design review part

jancborchardt · 2026-06-25T14:50:48Z

My review comments seem to still be happening on the screenshots you posted @sturlan? Let me know if you need me to be more specific. :)

#12966 (review)

ChristophWurst · 2026-06-25T14:58:13Z

Would be worth updating the branch to latest main to get the changes from #13118 in.

sturlan · 2026-06-25T20:31:41Z

Hi @jancborchardt — those three styling points are being handled in the follow-up #12989 by @nimishavijay. In the second commit (f60798d) I removed all custom CSS from the recipient section to give her a clean slate. Would you be able to mark your review as resolved / approved so this can move forward?

@ChristophWurst will do — rebasing onto latest main now to pick up #13118.

ChristophWurst · 2026-06-26T08:40:30Z

@sturlan please post up to date before/after screenshots. Thanks!

sturlan · 2026-06-26T08:43:06Z

@sturlan please post up to date before/after screenshots. Thanks!

Hi,
Already posted in case you missed it, here is the link:
#12966 (comment)

I only have after sceenshots. Will that be a problem?

ChristophWurst · 2026-06-26T08:48:35Z

These screenshots are outdated. They do not represent the latest state. The design fixes of the other branch are not reflected.

sturlan · 2026-06-26T09:16:17Z

Oh, yes i see what you mean, i will pull the latest main and take sceenshots again

ChristophWurst · 2026-06-26T09:39:59Z

You already pulled and merged. Only the screenshots are missing.

sturlan · 2026-06-26T13:18:17Z

sturlan requested review from ChristophWurst, GretaD and kesselb as code owners May 21, 2026 12:28

jancborchardt requested changes May 21, 2026

View reviewed changes

ChristophWurst added bug 3. to review regression labels May 21, 2026

backportbot Bot added the backport-request label May 21, 2026

ChristophWurst assigned sturlan May 21, 2026

nimishavijay mentioned this pull request May 28, 2026

Sender details styling updates #12989

Closed

ChristophWurst closed this Jun 1, 2026

sturlan mentioned this pull request Jun 3, 2026

Lost ability to copy sender email address to clipboard #12952

Open

github-actions Bot added the feedback-requested label Jun 5, 2026

sturlan mentioned this pull request Jun 18, 2026

Regressed element alignment in thread view #12946

Closed

ChristophWurst reopened this Jun 24, 2026

sturlan force-pushed the fix/thread-view-regressions-12946-12952 branch from f60798d to 9ff6996 Compare June 24, 2026 21:11

ChristophWurst reviewed Jun 25, 2026

View reviewed changes

This comment was marked as resolved.

Sign in to view

ChristophWurst requested a review from jancborchardt June 25, 2026 07:02

coderabbitai Bot reviewed Jun 25, 2026

View reviewed changes

Merge branch 'main' into fix/thread-view-regressions-12946-12952

5715838

Merge branch 'main' into fix/thread-view-regressions-12946-12952

58e198b

	padding-inline-start: calc(var(--default-grid-baseline) * 14 + var(--border-radius-container) + 2px);
	padding-inline-start: calc(var(--default-grid-baseline) * 14 + var(--border-radius-container) + (var(--border-width-input-focused) * 2));

Uh oh!

Conversation

sturlan commented May 21, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

#12952 — Lost ability to copy sender email to clipboard

#12946 — Regressed thread subject alignment

Summary by CodeRabbit

Uh oh!

welcome Bot commented May 21, 2026

Uh oh!

jancborchardt left a comment

Choose a reason for hiding this comment

Uh oh!

ChristophWurst commented May 21, 2026

Uh oh!

sturlan commented May 26, 2026

Uh oh!

nimishavijay commented May 26, 2026

Uh oh!

sturlan commented May 28, 2026

Uh oh!

nimishavijay commented May 28, 2026

Uh oh!

sturlan commented May 28, 2026

Uh oh!

github-actions Bot commented Jun 5, 2026

Uh oh!

ChristophWurst left a comment

Choose a reason for hiding this comment

Uh oh!

This comment was marked as resolved.

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

Uh oh!

Uh oh!

ChristophWurst commented Jun 25, 2026

Uh oh!

coderabbitai Bot commented Jun 25, 2026

Walkthrough

Changes

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot Jun 25, 2026

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Uh oh!

sturlan commented Jun 25, 2026

Uh oh!

ChristophWurst commented Jun 25, 2026

Uh oh!

jancborchardt commented Jun 25, 2026

Uh oh!

ChristophWurst commented Jun 25, 2026

Uh oh!

sturlan commented Jun 25, 2026

Uh oh!

ChristophWurst commented Jun 26, 2026

Uh oh!

sturlan commented Jun 26, 2026

Uh oh!

ChristophWurst commented Jun 26, 2026

Uh oh!

sturlan commented Jun 26, 2026

Uh oh!

ChristophWurst commented Jun 26, 2026

Uh oh!

sturlan commented Jun 26, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

sturlan commented May 21, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Jun 25, 2026 •

edited

Loading

sturlan commented Jun 25, 2026 •

edited

Loading