[Site] Improve Package header on mobile

Author: maxperei

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 }}"