Repository: symfony/ux (php)

Issue:
[Site] Packages buttons issues on mobile
![image](https://github.com/user-attachments/assets/2eb0c1c3-80c0-486a-9549-fe1f2824de40)

The buttons should not be kept on the same line on mobile devices

Pull request description:
[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)


Patch:
diff --git a/src/LiveComponent/assets/dist/live.min.css b/src/LiveComponent/assets/dist/live.min.css
index c61367b2..df7a2da8 100644
--- a/src/LiveComponent/assets/dist/live.min.css
+++ b/src/LiveComponent/assets/dist/live.min.css
@@ -1,1 +1,1 @@
-[data-loading=""],[data-loading=show],[data-loading*=\|show]{display:none}
\ No newline at end of file
+[data-loading=""],[data-loading=show],[data-loading=delay\|show]{display:none}
\ No newline at end of file
diff --git a/src/LiveComponent/assets/styles/live.css b/src/LiveComponent/assets/styles/live.css
index 66d4f16f..7f16a53d 100644
--- a/src/LiveComponent/assets/styles/live.css
+++ b/src/LiveComponent/assets/styles/live.css
@@ -1,3 +1,3 @@
-[data-loading=""], [data-loading="show"], [data-loading*="|show"] {
+[data-loading=""], [data-loading="show"], [data-loading="delay|show"] {
     display: none;
 }
diff --git a/src/React/src/AssetMapper/ReactControllerLoaderAssetCompiler.php b/src/React/src/AssetMapper/ReactControllerLoaderAssetCompiler.php
index 637979b7..d998471d 100644
--- a/src/React/src/AssetMapper/ReactControllerLoaderAssetCompiler.php
+++ b/src/React/src/AssetMapper/ReactControllerLoaderAssetCompiler.php
@@ -57,7 +57,7 @@ class ReactControllerLoaderAssetCompiler implements AssetCompilerInterface
                 $controllerNameForVariable,
                 $relativeImportPath
             );
-            $componentParts[] = \sprintf('"%s": %s', Path::normalize($name), $controllerNameForVariable);
+            $componentParts[] = \sprintf('"%s": %s', $name, $controllerNameForVariable);
         }
 
         $importCode = implode("\n", $importLines);
diff --git a/src/Svelte/src/AssetMapper/SvelteControllerLoaderAssetCompiler.php b/src/Svelte/src/AssetMapper/SvelteControllerLoaderAssetCompiler.php
index 8cb1020e..20ac8094 100644
--- a/src/Svelte/src/AssetMapper/SvelteControllerLoaderAssetCompiler.php
+++ b/src/Svelte/src/AssetMapper/SvelteControllerLoaderAssetCompiler.php
@@ -57,7 +57,7 @@ class SvelteControllerLoaderAssetCompiler implements AssetCompilerInterface
                 $controllerNameForVariable,
                 $relativeImportPath
             );
-            $componentParts[] = \sprintf('"%s": %s', Path::normalize($name), $controllerNameForVariable);
+            $componentParts[] = \sprintf('"%s": %s', $name, $controllerNameForVariable);
         }
 
         $importCode = implode("\n", $importLines);
diff --git a/src/Toolkit/src/Kit/KitSynchronizer.php b/src/Toolkit/src/Kit/KitSynchronizer.php
index 0f13f921..0aaf9584 100644
--- a/src/Toolkit/src/Kit/KitSynchronizer.php
+++ b/src/Toolkit/src/Kit/KitSynchronizer.php
@@ -69,8 +69,8 @@ final class KitSynchronizer
         ;
 
         foreach ($finder as $file) {
-            $relativePathNameToKit = Path::normalize($file->getRelativePathname());
-            $relativePathName = str_replace($componentsPath.'/', '', $relativePathNameToKit);
+            $relativePathNameToKit = $file->getRelativePathname();
+            $relativePathName = str_replace($componentsPath.\DIRECTORY_SEPARATOR, '', $relativePathNameToKit);
             $componentName = $this->extractComponentName($relativePathName);
 
             $meta = null;
@@ -161,8 +161,8 @@ final class KitSynchronizer
         ;
 
         foreach ($finder as $file) {
-            $relativePathNameToKit = Path::normalize($file->getRelativePathname());
-            $relativePathName = str_replace($controllersPath.'/', '', $relativePathNameToKit);
+            $relativePathNameToKit = $file->getRelativePathname();
+            $relativePathName = str_replace($controllersPath.\DIRECTORY_SEPARATOR, '', $relativePathNameToKit);
             $controllerName = $this->extractStimulusControllerName($relativePathName);
             $controller = new StimulusController(
                 name: $controllerName,
diff --git a/src/Vue/src/AssetMapper/VueControllerLoaderAssetCompiler.php b/src/Vue/src/AssetMapper/VueControllerLoaderAssetCompiler.php
index 2a8314b8..ded6a251 100644
--- a/src/Vue/src/AssetMapper/VueControllerLoaderAssetCompiler.php
+++ b/src/Vue/src/AssetMapper/VueControllerLoaderAssetCompiler.php
@@ -57,7 +57,7 @@ class VueControllerLoaderAssetCompiler implements AssetCompilerInterface
                 $controllerNameForVariable,
                 $relativeImportPath
             );
-            $componentParts[] = \sprintf('"%s": %s', Path::normalize($name), $controllerNameForVariable);
+            $componentParts[] = \sprintf('"%s": %s', $name, $controllerNameForVariable);
         }
 
         $importCode = implode("\n", $importLines);
diff --git a/ux.symfony.com/assets/styles/components/_DocsLink.scss b/ux.symfony.com/assets/styles/components/_DocsLink.scss
index b4d7445e..98c357ec 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 28cc8b8b..f79f98aa 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 a66eea0f..e66e3e6e 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 }}"


Test patch:
diff --git a/src/Toolkit/tests/Command/DebugKitCommandTest.php b/src/Toolkit/tests/Command/DebugKitCommandTest.php
index 7ce441cd..406d237d 100644
--- a/src/Toolkit/tests/Command/DebugKitCommandTest.php
+++ b/src/Toolkit/tests/Command/DebugKitCommandTest.php
@@ -12,7 +12,6 @@
 namespace Symfony\UX\Toolkit\Tests\Command;
 
 use Symfony\Bundle\FrameworkBundle\Test\KernelTestCase;
-use Symfony\Component\Filesystem\Path;
 use Zenstruck\Console\Test\InteractsWithConsole;
 
 class DebugKitCommandTest extends KernelTestCase
@@ -22,7 +21,7 @@ class DebugKitCommandTest extends KernelTestCase
     public function testShouldBeAbleToDebug(): void
     {
         $this->bootKernel();
-        $this->consoleCommand(\sprintf('ux:toolkit:debug-kit %s', Path::join(__DIR__, '/../../kits/shadcn')))
+        $this->consoleCommand(\sprintf('ux:toolkit:debug-kit %s', __DIR__.'/../../kits/shadcn'))
             ->execute()
             ->assertSuccessful()
             // Kit details
@@ -30,26 +29,28 @@ class DebugKitCommandTest extends KernelTestCase
             ->assertOutputContains('Homepage   https://ux.symfony.com/components')
             ->assertOutputContains('License    MIT')
             // Components details
-            ->assertOutputContains(implode(\PHP_EOL, [
-                '+--------------+----------------------- Component: "Avatar" --------------------------------------+',
-                '| File(s)      | templates/components/Avatar.html.twig                                            |',
-                '| Dependencies | tales-from-a-dev/twig-tailwind-extra                                             |',
-                '|              | Avatar:Image                                                                     |',
-                '|              | Avatar:Text                                                                      |',
-                '+--------------+----------------------------------------------------------------------------------+',
-            ]))
-            ->assertOutputContains(implode(\PHP_EOL, [
-                '+--------------+----------------------- Component: "Table" ---------------------------------------+',
-                '| File(s)      | templates/components/Table.html.twig                                             |',
-                '| Dependencies | tales-from-a-dev/twig-tailwind-extra                                             |',
-                '|              | Table:Body                                                                       |',
-                '|              | Table:Caption                                                                    |',
-                '|              | Table:Cell                                                                       |',
-                '|              | Table:Footer                                                                     |',
-                '|              | Table:Head                                                                       |',
-                '|              | Table:Header                                                                     |',
-                '|              | Table:Row                                                                        |',
-                '+--------------+----------------------------------------------------------------------------------+',
-            ]));
+            ->assertOutputContains(<<<'EOF'
++--------------+----------------------- Component: "Avatar" --------------------------------------+
+| File(s)      | templates/components/Avatar.html.twig                                            |
+| Dependencies | tales-from-a-dev/twig-tailwind-extra                                             |
+|              | Avatar:Image                                                                     |
+|              | Avatar:Text                                                                      |
++--------------+----------------------------------------------------------------------------------+
+EOF
+            )
+            ->assertOutputContains(<<<'EOF'
++--------------+----------------------- Component: "Table" ---------------------------------------+
+| File(s)      | templates/components/Table.html.twig                                             |
+| Dependencies | tales-from-a-dev/twig-tailwind-extra                                             |
+|              | Table:Body                                                                       |
+|              | Table:Caption                                                                    |
+|              | Table:Cell                                                                       |
+|              | Table:Footer                                                                     |
+|              | Table:Head                                                                       |
+|              | Table:Header                                                                     |
+|              | Table:Row                                                                        |
++--------------+----------------------------------------------------------------------------------+
+EOF
+            );
     }
 }
diff --git a/src/Toolkit/tests/Command/InstallComponentCommandTest.php b/src/Toolkit/tests/Command/InstallComponentCommandTest.php
index d2c3274e..79e7e811 100644
--- a/src/Toolkit/tests/Command/InstallComponentCommandTest.php
+++ b/src/Toolkit/tests/Command/InstallComponentCommandTest.php
@@ -50,7 +50,7 @@ class InstallComponentCommandTest extends KernelTestCase
             $this->assertFileDoesNotExist($expectedFile);
         }
 
-        $testCommand = $this->consoleCommand(\sprintf('ux:toolkit:install-component Table --destination="%s"', str_replace('\\', '\\\\', $this->tmpDir)))
+        $testCommand = $this->consoleCommand('ux:toolkit:install-component Table --destination='.$this->tmpDir)
             ->execute()
             ->assertSuccessful()
             ->assertOutputContains('Installing component Table from the Shadcn UI kit...')