From 483db9935d3784c4fa08fae1cee4da4e21a6fc05 Mon Sep 17 00:00:00 2001
From: maxperei <maxime.pereira@synolia.com>
Date: Thu, 3 Jul 2025 13:57:05 +0200
Subject: [PATCH] [Site] Improve Package header on mobile

---
 ux.symfony.com/assets/styles/components/_DocsLink.scss | 10 ++++++++++
 .../assets/styles/components/_TerminalCommand.scss     |  4 +---
 .../components/Package/PackageHeader.html.twig         |  4 ++--
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/ux.symfony.com/assets/styles/components/_DocsLink.scss b/ux.symfony.com/assets/styles/components/_DocsLink.scss
index b4d7445edc1..98c357ece17 100644
--- a/ux.symfony.com/assets/styles/components/_DocsLink.scss
+++ b/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 {
diff --git a/ux.symfony.com/assets/styles/components/_TerminalCommand.scss b/ux.symfony.com/assets/styles/components/_TerminalCommand.scss
index 28cc8b8be41..f79f98aa0e0 100644
--- a/ux.symfony.com/assets/styles/components/_TerminalCommand.scss
+++ b/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;
   }
 }
-
-
diff --git a/ux.symfony.com/templates/components/Package/PackageHeader.html.twig b/ux.symfony.com/templates/components/Package/PackageHeader.html.twig
index a66eea0fb6a..e66e3e6e6c6 100644
--- a/ux.symfony.com/templates/components/Package/PackageHeader.html.twig
+++ b/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 }}"