[5.2] [Guided tours] Increase the width and adjust the height of the popup (#43810)

* Add sizes to the shepherd element

* Changed the order of the properties.

* Update guidedtours.scss

* Added fix for the popup height in case the content gets taller than the viewport

* Changed property order

* Correct padding for text

* Corrections padding footer

* Use shorthand

* Added footer padding again to accommodate this PR, although added to PR #43809

* Improve the layout of the intro.

* Update guidedtours.joomla_welcome_steps.ini

* Improve the layout of the dashboard panel step

* use <br> rather than <br />

Author: obuisard

administrator/language/en-GB/guidedtours.joomla_welcome.ini

@@ -4,4 +4,4 @@
 ; Note : All ini files need to be saved as UTF-8
 
 COM_GUIDEDTOURS_TOUR_WELCOMETOJOOMLA_TITLE="Welcome to Joomla!"
-COM_GUIDEDTOURS_TOUR_WELCOMETOJOOMLA_DESCRIPTION="<p>This tour will give you a quick overview of how to get started with Joomla!</p><p>You are in the Joomla Administrator area, also known as the "<strong>Backend</strong>". This is where you set up and manage your entire Joomla Site.</p><p><strong>Want to learn more?</strong></p><p>Let's start the tour and build your site with the power of Joomla!</p>"
+COM_GUIDEDTOURS_TOUR_WELCOMETOJOOMLA_DESCRIPTION="<p>This tour will give you a quick overview of how to get started with Joomla!</p><p>You are in the Joomla Administrator area, also known as the "<strong>Backend</strong>".<br>This is where you set up and manage your entire Joomla Site.</p><p><strong>Want to learn more?</strong></p><p>Let's start the tour and build your site with the power of Joomla!</p>"

administrator/language/en-GB/guidedtours.joomla_welcome_steps.ini

@@ -7,7 +7,7 @@ COM_GUIDEDTOURS_TOUR_WELCOMETOJOOMLA_STEP_MENUS_TITLE="The Menu"
 COM_GUIDEDTOURS_TOUR_WELCOMETOJOOMLA_STEP_MENUS_DESCRIPTION="<p>The menu provides access to the Administrator management pages. Each section has a collection of pages for managing that particular aspect of Joomla, such as Content, Menus and Users.</p><p>The window pane icons link to individual dashboards for those sections. The System menu itself leads to a dashboard.</p>"
 
 COM_GUIDEDTOURS_TOUR_WELCOMETOJOOMLA_STEP_QUICKACCESS_TITLE="The Dashboard Panels"
-COM_GUIDEDTOURS_TOUR_WELCOMETOJOOMLA_STEP_QUICKACCESS_DESCRIPTION="<p>Dashboards provide quick access to frequently used pages via their icons.</p><p>Each dashboard panel is an Administrator module that can be customised via its Settings icon <span class=\"icon-cogs\" aria-hidden=\"true\"></span>. This allows you to configure your site dashboards to suit your own purposes.</p>"
+COM_GUIDEDTOURS_TOUR_WELCOMETOJOOMLA_STEP_QUICKACCESS_DESCRIPTION="<p>Dashboards provide quick access to frequently used pages via their icons.</p><p>Each dashboard panel is an Administrator module that can be customised via its Settings icon <span class=\"icon-cogs\" aria-hidden=\"true\"></span>.<br>This allows you to configure your site dashboards to suit your own purposes.</p>"
 
 COM_GUIDEDTOURS_TOUR_WELCOMETOJOOMLA_STEP_NOTIFICATIONS_TITLE="The Notifications Panel"
 COM_GUIDEDTOURS_TOUR_WELCOMETOJOOMLA_STEP_NOTIFICATIONS_DESCRIPTION="<p>The Notifications panel shows when updates are available for Joomla and other extensions. Outstanding Privacy Requests are also shown here.</p>"

build/media_source/plg_system_guidedtours/scss/guidedtours.scss

@@ -5,6 +5,15 @@
 
 @import "../../../../node_modules/shepherd.js/dist/css/shepherd";
 
+.shepherd-element {
+  width: max-content;
+  max-width: min(600px, 90%);
+}
+
+.shepherd-element.shepherd-centered {
+  max-width: min(1200px, 90%);
+}
+
 .shepherd-modal-overlay-container.shepherd-modal-is-visible {
   opacity: .7;
 }
@@ -30,13 +39,16 @@
 }
 
 .shepherd-text {
-  padding: 1em;
+  max-height: calc(100vh - 240px);
+  padding: 1rem 1rem 0;
+  overflow-y: auto;
   line-height: 1.5em;
 }
 
 .shepherd-footer {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
+  padding: 1rem;
 }
 
 .shepherd-button-primary {