Make the old modal system responsive and always centred without JS #23693

tzi · 2025-10-20T13:39:09Z

Description:

The old modal design had 2 big responsive design:

In tiny devices, the content overflows horizontally
When resizing our screen (or rotating our device) the design wasn’t updated: modal not centered and sometimes off-screen.
When the content was updated, the design wan’t updated either: modal not centered and sometimes content hidden behind a scroll

Plugin/Submodule update

2 PRs are open in plugin/submodule to update UI screenshots:

Updated UI screenshots after modal size & position change #Ux-287 tag-manager#1053
Update UI screenshots after Profil modal fix, ux-287 plugin-MarketingCampaignsReporting#197

Visits log | desktop

ℹ️ Better vertical centering, and more intuitive scroll

before	after

Visits log | mobile

ℹ️ No content outside of the screen.

before	after

Performance | desktop

ℹ️ Better vertical centering.

before	after

Performance | mobile

ℹ️ Vertical centering always up to date

before	after

Row evolution | desktop

ℹ️ No hidden content.

before	after

Row evolution | mobile

ℹ️ Vertical centering always up to date

before	after

Profile modale

ℹ️ Vertical centering always up to date

The 2-columns layout is now responsive

before	after

I had to make a lot of small fixes. For example, action liste used inline-block elements as wrapper that made it hard to control the children width. By fixing it, it changed all actions list inside the app, fixing bugs and spacing in all cases. For example:

before	after

Checklist

[NA] I have understood, reviewed, and tested all AI outputs before use
[NA] All AI instructions respect security, IP, and privacy rules

Review

plugins/CoreHome/javascripts/popover.js

tzi · 2025-10-20T13:40:07Z

plugins/CoreHome/javascripts/popover.js

                // sometimes the modal can be displayed outside of the current viewport, in this case
                // we scroll to it to make sure it's visible. this isn't a perfect workaround, since it
-                // doesn't center the modal.g
-                var self = this;


ℹ️ Variable not used. That was already he case before my development.

tzi · 2025-10-20T13:41:10Z

plugins/CoreHome/javascripts/popover.js

-    var centerPopover = function () {
-        if (container !== false) {
-            $('.ui-dialog').css({margin: '0 0'});
-            container.dialog("option", "position", {my: 'center', at: 'center', of: '.ui-widget-overlay', collision: 'fit'});
-            // in some cases jQuery UI fails to place the dialog correctly and set the top values to something negative
-            if ($('.ui-dialog').position().top < 0) {
-                $('.ui-dialog').css('top', '0');
-            }
-            $('.ui-dialog').css({margin: '15px 0'});
-        }
-    };


ℹ️ I was able to keep a perfect centering in pure CSS, so I removed this calculation. Since the width/height measurement is blocking the browser, it is a performance gain.

tzi · 2025-10-20T14:46:31Z

plugins/CoreHome/vue/src/Alert/alert.less

+
+  @media (max-width: 600px) {
+    padding: 15px;
+  }


ℹ️ Remove the left padding that was here to display the icon. Make it smaller in the same time

tzi · 2025-10-20T14:47:06Z

plugins/CoreHome/vue/src/Alert/alert.less

+      display: block;
+      margin-bottom: 0.5em;
+      text-align: center;
+    }


ℹ️ Make the icon on top instead on the left of the message on mobile. It will take less space.

tzi · 2025-10-20T14:51:24Z

plugins/Live/stylesheets/live.less

+    @media (max-width: 600px) {
+      position: static;
+      display: block;
+    }


ℹ️ Avoid stacking the link on top of the content.

before after

tzi · 2025-10-24T17:11:43Z

plugins/Dashboard/stylesheets/dashboard.less

  z-index: 1001;
+  inset: 15px !important;
+  margin: auto;
+  width: min-content;


ℹ️ Tag Manager modals do not have explicit width defined with style attribute.
So we are setting a default width here, to keep a small modal in these cases.

tzi · 2025-11-12T10:30:39Z

plugins/Live/stylesheets/live.less

+    ol.actionList > li.collapsed-content-item::after {
+      border-right: 2px solid #d2d2d2;
+      width: 26px;
+      left: -34px;
+    }


without the double border with

tzi · 2025-11-12T15:46:23Z

plugins/Live/javascripts/visitorActions.js

+        const $triggerItem = $(e.target).closest('li');
+        const $root = $triggerItem.parent();
+        const actionsToDisplayCollapsed = +piwik.visitorLogActionsToDisplayCollapsed;
+        const isExpanded = $triggerItem.toggleClass('expanded collapsed').hasClass('expanded');


ℹ️ One time, bu non-reproductible, I’ve got the link label messed up.
By having an explicit state here, I assure that everything is always consistent.

tzi · 2025-11-12T15:47:15Z

plugins/Live/javascripts/visitorActions.js

-                });
+            const currentIndex = $actions.index(this);
+            if (currentIndex === actionsToDisplayCollapsed - 1) {
+                $(this).toggleClass('last-collapsed-action', !isExpanded);


ℹ️ Adding this to avoid having a thread that goes nowhere after the last visible item when an action list is collapsed.

tzi · 2025-11-12T15:50:20Z

plugins/Live/templates/_actionsList.twig

 {% set previousAction = false %}
 {% for actionGroup in actionGroups %}
    {% if actionGroup.pageviewAction is not empty %}
-    {{ postEvent('Live.renderAction', actionGroup.pageviewAction, previousAction, visitInfo) }}


ℹ️ This file contains only whitespace (indentation / extra lines) refactoring because I couldn’t follow.

tzi · 2025-11-13T00:01:50Z

plugins/Live/javascripts/visitorActions.js

+            $li.addClass('last-collapsed-content');
+            $li.prev().removeClass('last-collapsed-content');


ℹ️ Small clean up to have an explicit code that add a class on the last collapsed content.

michalkleiner

Thanks for all the additional changes and the adjustments to the timelines 👍

tzi commented Oct 20, 2025

View reviewed changes

plugins/CoreHome/javascripts/popover.js Show resolved Hide resolved

tzi commented Oct 20, 2025

View reviewed changes

tzi requested a review from sgiehl October 20, 2025 14:51

tzi added Needs Review c: Design / UI For issues that impact Matomo's user interface or the design overall. Enhancement For new feature suggestions that enhance Matomo's capabilities or add a new report, new API etc. labels Oct 20, 2025

tzi requested a review from a team October 21, 2025 12:52

tzi force-pushed the ux-287 branch from 5438785 to 2148ab2 Compare October 24, 2025 17:07

tzi commented Oct 24, 2025

View reviewed changes

tzi force-pushed the ux-287 branch 2 times, most recently from cfeda93 to e463739 Compare October 27, 2025 09:38

tzi mentioned this pull request Oct 27, 2025

Updated UI screenshots after modal size & position change #Ux-287 matomo-org/tag-manager#1053

Merged

tzi force-pushed the ux-287 branch 9 times, most recently from 937cb7b to 6f2ed13 Compare October 28, 2025 08:36

tzi added Pull Request WIP Indicates the current pull request is still work in progress and not ready yet for a review. and removed Needs Review labels Oct 28, 2025

tzi force-pushed the ux-287 branch 3 times, most recently from 6009781 to 467cc66 Compare October 29, 2025 08:05

tzi force-pushed the ux-287 branch from 2abfd31 to 16ee12a Compare November 12, 2025 10:26

tzi commented Nov 12, 2025

View reviewed changes

tzi force-pushed the ux-287 branch 2 times, most recently from cb9acb0 to 668a4cf Compare November 12, 2025 14:29

tzi commented Nov 12, 2025

View reviewed changes

tzi force-pushed the ux-287 branch 3 times, most recently from 72bcefd to 199151f Compare November 13, 2025 00:00

tzi commented Nov 13, 2025

View reviewed changes

tzi requested a review from michalkleiner November 13, 2025 07:09

michalkleiner previously approved these changes Nov 14, 2025

View reviewed changes

tzi added 9 commits November 14, 2025 11:26

Make the old modal system responsive and always centered without JS

f031f29

Update UI screenshots

9ca6e12

Group DOM creation in a single method, feedback from @michalkleiner

7179d3d

Fix visitor profile popup, feedback from @michalkleiner

30c2c07

Update UI screenshots after Profil modal fix

b46cf8c

More space between subactions, feedback from @michalkleiner

36e9b70

Update UI screenshots after vertical space update between subactions

7006b6f

Small update alert and action list design, feedback from @michalkleiner

b5f857a

Update UI screenshots after action list clean up

87d7e2f

tzi dismissed michalkleiner’s stale review via 87d7e2f November 14, 2025 10:26

tzi force-pushed the ux-287 branch from f27c2a5 to 87d7e2f Compare November 14, 2025 10:26

tzi changed the title ~~Make the old modal system responsive and always centered without JS~~ Make the old modal system responsive and always centered without JS, ux-287 Nov 17, 2025

michalkleiner approved these changes Nov 17, 2025

View reviewed changes

michalkleiner changed the title ~~Make the old modal system responsive and always centered without JS, ux-287~~ Make the old modal system responsive and always centred without JS Nov 17, 2025

michalkleiner merged commit e1e415e into 5.x-dev Nov 17, 2025
71 of 75 checks passed

michalkleiner deleted the ux-287 branch November 17, 2025 20:48

sgiehl added this to the 5.6.0 milestone Nov 21, 2025

		$li.addClass('last-collapsed-content');
		$li.prev().removeClass('last-collapsed-content');

Uh oh!

Make the old modal system responsive and always centred without JS #23693

Make the old modal system responsive and always centred without JS #23693

Uh oh!

Conversation

tzi commented Oct 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description:

Plugin/Submodule update

Visits log | desktop

Visits log | mobile

Performance | desktop

Performance | mobile

Row evolution | desktop

Row evolution | mobile

Profile modale

Checklist

Review

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tzi Oct 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tzi Nov 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

michalkleiner left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

3 participants

tzi commented Oct 20, 2025 •

edited

Loading

tzi Oct 20, 2025 •

edited

Loading

tzi Nov 12, 2025 •

edited

Loading