bug #2893 [Site] Improve Package header on mobile (maxperei)

This PR was merged into the 2.x branch.

Discussion
----------

[Site] Improve Package header on mobile

| Q             | A
| ------------- | ---
| Bug fix?      | yes
| New feature?  | no
| Docs?         | no
| Issues        | Fix #2848
| License       | MIT

as mentionned in issue above "buttons should not be kept on the same line on mobile", so this is an arbitrary proposal to display them properly, hope this will match with expectations

_e.g._
![image](https://github.com/user-attachments/assets/81ac237f-81fb-430e-a309-63bcf752a3e0)

Commits
-------

483db99 [Site] Improve Package header on mobile

Author: Kocal

ux.symfony.com/assets/styles/components/_DocsLink.scss

@@ -21,6 +21,8 @@
     opacity: 1;
     padding: var(--space-small, .75rem) var(--space-large, 1.5rem);
     transform: translateY(50%);
+    transition-property: transform;
+    transition-duration: 0ms;
 
     p {
       margin-bottom: 0;
@@ -33,6 +35,14 @@
     &:hover {
       transform: translateY(50%);
     }
+
+    @media screen and (max-width: 768px) {
+      transform: translateY(0);
+
+      &:hover {
+        transform: translateY(0);
+      }
+    }
   }
 }
 .DocsLink_content {

ux.symfony.com/assets/styles/components/_TerminalCommand.scss

@@ -41,7 +41,7 @@
   font-size: .9rem;
   padding: 0 .5rem;
   width: inherit;
-  overflow: clip;
+  overflow: scroll;
   margin: 0;
 }
 
@@ -57,5 +57,3 @@
     opacity: 1;
   }
 }
-
-

ux.symfony.com/templates/components/Package/PackageHeader.html.twig

@@ -12,7 +12,7 @@
             </p>
         </div>
 
-        <div class="d-flex justify-content-center">
+        <div class="d-flex justify-content-center flex-column-reverse flex-md-row">
             {% if command is not defined or command %}
                 <twig:TerminalCommand
                     aria-label="Composer command to install {{ package.humanName }}"
@@ -22,7 +22,7 @@
             {% endif %}
 
             <twig:DocsLink
-                class="ms-3"
+                class="ms-md-3 align-self-center"
                 size="sm"
                 title="Read the docs"
                 url="{{ package.officialDocsUrl }}"