Skip to content

fix#14449: Dynamic Content in emails - not all variants visible in editor #14966

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 2 commits into from
May 15, 2025
Merged

fix#14449: Dynamic Content in emails - not all variants visible in editor #14966

merged 2 commits into from
May 15, 2025

Conversation

krishna-ramrakhyani
Copy link
Contributor

Q A
Bug fix? (use the a.b branch) ✔️
New feature/enhancement? (use the a.x branch) ❌
Deprecations? ❌
BC breaks? (use the c.x branch) ❌
Automated tests included? ❌
Related developer documentation PR URL
Issue(s) addressed Fixes #14449

Description

Addresses the issue where dynamic content tabs in the email editor wrap onto multiple lines when there are numerous variants, making some tabs inaccessible.

This change applies CSS to the .dynamic-content .nav-tabs element to make it a flex container that prevents wrapping (white-space: nowrap, flex-wrap: nowrap, display: flex). Horizontal scrolling (overflow-x: auto) is enabled to allow users to access all tabs by scrolling horizontally.

Also includes overflow-y: hidden to prevent unintended vertical scrollbars and scrollbar-width: thin for better scrollbar appearance in Firefox.

Resolves the problem described in issue #14449.

📋 Steps to test this PR:

  1. Open this PR or pull down for testing locally (see docs on testing PRs here)
  2. Navigate to the Email editor and create or edit an email.
  3. Add a Dynamic Content block.
  4. Add a significant number of variants to the Dynamic Content block (e.g., 8 or more, depending on your screen size, enough to cause the tabs to wrap in the unfixed version).
  5. Observe the behavior of the variant tabs in the Dynamic Content editor panel.
  6. Expected Result: The variant tabs should remain on a single line, and a horizontal scrollbar should appear if the tabs exceed the available width, allowing you to scroll to see all tabs. The tabs should not wrap to a new line.

@krishna-ramrakhyani
Copy link
Contributor Author

@escopecz @RCheesley @MadlenF Hello, just wanted to provide an update on issue #14449 regarding the dynamic content tabs not being fully visible.
I've implemented a solution using CSS to ensure the tabs stay on a single line with horizontal scrolling when needed.
Thanks!
Screencast from 2025-05-01 20-58-05.webm

@codecov Codecov
Copy link

codecov bot commented May 1, 2025 •
edited
Loading

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 64.76%. Comparing base (c67717d) to head (8af880c).
Report is 3 commits behind head on 6.0.

Additional details and impacted files

Impacted file tree graph

@@            Coverage Diff            @@
##                6.0   #14966   +/-   ##
=========================================
  Coverage     64.76%   64.76%           
  Complexity    34742    34742           
=========================================
  Files          2276     2276           
  Lines        103762   103762           
=========================================
  Hits          67200    67200           
  Misses        36562    36562
🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@RCheesley RCheesley requested a review from andersonjeccel May 1, 2025 16:32
@krishna-ramrakhyani krishna-ramrakhyani mentioned this pull request May 3, 2025
Closed
1 task
escopecz
escopecz requested changes May 5, 2025
View reviewed changes
@RCheesley RCheesley requested a review from MadlenF May 8, 2025 11:24
@RCheesley
Copy link
Member

Great job @Krishu0765 and welcome to the community with your first PR!

I've requested a review from @MadlenF who reported the issue, hopefully we can get it merged in the next patch release! 🚀

@RCheesley RCheesley added T1 Low difficulty to fix (issue) or test (PR) bug Issues or PR's relating to bugs ready-to-test PR's that are ready to test regression A bug that broke something in the last release dynamic-content labels May 8, 2025
@RCheesley RCheesley linked an issue May 8, 2025 that may be closed by this pull request
Dynamic Content in emails - not all variants visible in editor #14449
Closed
1 task
@RCheesley RCheesley added this to the 6.0.2 milestone May 8, 2025
@RCheesley RCheesley moved this to 🦸🏻 Needs 2 tests in Open Source Fridays May 8, 2025
@RCheesley RCheesley added the code-review-needed PR's that require a code review before merging label May 8, 2025
@krishna-ramrakhyani
Copy link
Contributor Author

Great job @Krishu0765 and welcome to the community with your first PR!

I've requested a review from @MadlenF who reported the issue, hopefully we can get it merged in the next patch release! 🚀

Hi @RCheesley , thank you so much for the warm welcome! Just a small note—this is actually my 3rd PR (one of them has already been merged 🎉). I'm really glad to be contributing and appreciate the support from the community!

@RCheesley
Copy link
Member

Ahhh sorry, I missed that - it says first time contributor on the PR but I guess that when it was created you were new to the repo!

escopecz
escopecz approved these changes May 15, 2025
View reviewed changes
Copy link
Member

@escopecz escopecz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Works well. Thank you!

Before I couldn't scroll to the right to see the new versions:
Screenshot 2025-05-15 at 09 51 55

And with this change I can scroll horizontally through the tabs:
Screenshot 2025-05-15 at 09 55 39

@escopecz escopecz added code-review-passed PRs which have passed code review user-testing-passed PRs which have been successfully tested by the required number of people. and removed ready-to-test PR's that are ready to test code-review-needed PR's that require a code review before merging labels May 15, 2025
@escopecz escopecz merged commit 45069fc into mautic:6.0 May 15, 2025
17 checks passed
@github-project-automation github-project-automation bot moved this from 🦸🏻 Needs 2 tests to 🥳 Done in Open Source Fridays May 15, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@escopecz escopecz escopecz approved these changes

@andersonjeccel andersonjeccel Awaiting requested review from andersonjeccel

@MadlenF MadlenF Awaiting requested review from MadlenF

Assignees
No one assigned
Labels
bug Issues or PR's relating to bugs code-review-passed PRs which have passed code review dynamic-content regression A bug that broke something in the last release T1 Low difficulty to fix (issue) or test (PR) user-testing-passed PRs which have been successfully tested by the required number of people.
Projects
Open Source Fridays
Status: 🥳 Done
Milestone
6.0.2
Development

Successfully merging this pull request may close these issues.

Dynamic Content in emails - not all variants visible in editor
3 participants
@krishna-ramrakhyani @RCheesley @escopecz