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

* Make the old modal system responsive and always centred without JS
* Update UI screenshots
* Fix visitor profile popup
* More space between subactions
* Small update alert and action list design

Author: tzi

plugins/Actions/tests/UI/expected-screenshots/ActionsDataTable_segmented_visitor_log.png

@@ -2,9 +2,11 @@
     color: #1976d2 !important;
 }
 
-.what-is-new-popup {
-  width: calc(80%);
-  left: calc(10%) !important;
-  height: auto;
-  background: #fafafa;
+.ui-dialog.what-is-new-popup {
+  width: 80%;
+  background: @theme-color-background-tinyContrast;
+
+  @media (max-width: 992px) {
+    width: auto;
+  }
 }

plugins/CoreAdminHome/stylesheets/whatIsNew.less

@@ -6,18 +6,19 @@
  */
 
 var Piwik_Popover = (function () {
-
     var container = false;
     var isOpen = false;
     var closeCallback = false;
     var isProgrammaticClose = false;
     var scrollTopPosition = 0;
     var ajaxLoadingRequest = null;
-
     var createContainer = function () {
         if (container === false) {
             container = $(document.createElement('div')).attr('id', 'Piwik_Popover');
         }
+        if (!$('#Piwik_Popover_Wrapper').length) {
+          $(document.createElement('div')).attr('id', 'Piwik_Popover_Wrapper').appendTo('body');
+        }
     };
 
     var openPopover = function (title, dialogClass) {
@@ -27,9 +28,13 @@ var Piwik_Popover = (function () {
         {
             title: title,
             modal: true,
-            width: '1050px',
+            width: 1050,
             resizable: false,
             autoOpen: true,
+            classes: {
+              "ui-dialog": 'ui-dialog--responsive',
+            },
+            appendTo: '#Piwik_Popover_Wrapper',
             open: function (event, ui) {
                 if (dialogClass) {
                     $(this).parent().addClass(dialogClass).attr('style', '');
@@ -43,11 +48,8 @@ var Piwik_Popover = (function () {
 
                 // 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;
-
+                // doesn't center the modal.
                 scrollTopPosition = $(window).scrollTop();
-
                 $('#root').css({
                     position: 'fixed',
                     height: $(window).height + scrollTopPosition,
@@ -56,9 +58,6 @@ var Piwik_Popover = (function () {
                 });
 
                 window.scrollTo(0, 0);
-
-                centerPopover();
-
             },
             close: function (event, ui) {
                 container.find('div.jqplot-target').trigger('piwikDestroyPlot');
@@ -108,18 +107,6 @@ var Piwik_Popover = (function () {
         isOpen = true;
     };
 
-    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'});
-        }
-    };
-
     return {
 
         /**
@@ -218,8 +205,6 @@ var Piwik_Popover = (function () {
             container.children().each(function (i, childNode) {
                 piwikHelper.compileVueEntryComponents(childNode);
             });
-
-            centerPopover();
         },
 
         /**

plugins/CoreHome/javascripts/popover.js

@@ -14,14 +14,26 @@
   border-radius: 2px;
   font-size: 14px;
   position: relative;
-  &:before {
+
+  @media (max-width: 480px) {
+    padding: 15px;
+  }
+
+  &::before {
     font-family: "matomo";
     content: "\e88f";
     position: absolute;
     left: 20px;
     line-height: 100%; // line-height = font-size
     font-size: 24px;
-    margin-top: -3px
+    margin-top: -3px;
+
+    @media (max-width: 480px) {
+      position: static;
+      display: block;
+      margin-bottom: 0.5em;
+      text-align: center;
+    }
   }
 
   a {

plugins/CoreHome/tests/UI/expected-screenshots/WhatIsNew_what_is_new.png

@@ -81,6 +81,7 @@
 
 #Piwik_Popover .rowevolution .alert-info {
     margin-left: 0;
+    margin-right: 0;
 }
 
 a.rowevolution-startmulti {