From fc39beae7a877b5ad38a1dcaf8cc4d5a4528455f Mon Sep 17 00:00:00 2001
From: Juri <juri.strumpflohner@gmail.com>
Date: Thu, 26 Sep 2024 09:33:04 +0200
Subject: [PATCH] fix(nx-dev): adjust powerpack mobile view

---
 nx-dev/ui-powerpack/src/lib/get-started.tsx   | 22 ++++++++++---------
 .../src/lib/powerpack-features.tsx            |  2 +-
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/nx-dev/ui-powerpack/src/lib/get-started.tsx b/nx-dev/ui-powerpack/src/lib/get-started.tsx
index f4379e21bbe56..491e25797ec80 100644
--- a/nx-dev/ui-powerpack/src/lib/get-started.tsx
+++ b/nx-dev/ui-powerpack/src/lib/get-started.tsx
@@ -85,13 +85,13 @@ export function GetStarted(): ReactElement {
             />
           </svg>
           <div className="space-y-6 lg:space-y-12">
-            <div className="flex items-start gap-6">
-              <div className="relative flex size-10 place-items-center rounded-full p-4 shadow-sm ring-1 ring-slate-200 dark:ring-slate-800/60">
+            <div className="flex flex-col items-center lg:flex-row lg:items-start lg:gap-6">
+              <div className="mb-4 flex size-10 place-items-center rounded-full p-4 shadow-sm ring-1 ring-slate-200 lg:mb-0 dark:ring-slate-800/60">
                 <span className="text-lg text-slate-900 dark:text-slate-100">
                   1
                 </span>
               </div>
-              <div>
+              <div className="text-center lg:text-left">
                 <h4 className="relative text-base font-medium leading-6 text-slate-900 dark:text-slate-100">
                   Buy an Nx Powerpack license
                 </h4>
@@ -104,13 +104,14 @@ export function GetStarted(): ReactElement {
                 </div>
               </div>
             </div>
-            <div className="flex items-start gap-6">
-              <div className="relative flex size-10 place-items-center rounded-full p-4 shadow-sm ring-1 ring-slate-200 dark:ring-slate-800/60">
+
+            <div className="flex flex-col items-center lg:flex-row lg:items-start lg:gap-6">
+              <div className="mb-4 flex size-10 place-items-center rounded-full p-4 shadow-sm ring-1 ring-slate-200 lg:mb-0 dark:ring-slate-800/60">
                 <span className="text-lg text-slate-900 dark:text-slate-100">
                   2
                 </span>
               </div>
-              <div>
+              <div className="text-center lg:text-left">
                 <h4 className="relative text-base font-medium leading-6 text-slate-900 dark:text-slate-100">
                   Activate Nx Powerpack right from your terminal
                 </h4>
@@ -118,7 +119,7 @@ export function GetStarted(): ReactElement {
                   In your Nx workspace, run the following command to activate
                   your new license.
                 </p>
-                <div className="mt-4">
+                <div className="mt-4 text-left">
                   <TerminalOutput
                     command="nx activate-powerpack {YOUR_LICENSE_KEY}"
                     path="~/my-workspace"
@@ -128,13 +129,14 @@ export function GetStarted(): ReactElement {
                 </div>
               </div>
             </div>
-            <div className="flex items-start gap-6">
-              <div className="relative flex size-10 place-items-center rounded-full p-4 shadow-sm ring-1 ring-slate-200 dark:ring-slate-800/60">
+
+            <div className="flex flex-col items-center lg:flex-row lg:items-start lg:gap-6">
+              <div className="mb-4 flex size-10 place-items-center rounded-full p-4 shadow-sm ring-1 ring-slate-200 lg:mb-0 dark:ring-slate-800/60">
                 <span className="text-lg text-slate-900 dark:text-slate-100">
                   3
                 </span>
               </div>
-              <div>
+              <div className="text-center lg:text-left">
                 <h4 className="relative text-base font-medium leading-6 text-slate-900 dark:text-slate-100">
                   Install Powerpack plugins
                 </h4>
diff --git a/nx-dev/ui-powerpack/src/lib/powerpack-features.tsx b/nx-dev/ui-powerpack/src/lib/powerpack-features.tsx
index ef0ed11ec4409..f354327a4920a 100644
--- a/nx-dev/ui-powerpack/src/lib/powerpack-features.tsx
+++ b/nx-dev/ui-powerpack/src/lib/powerpack-features.tsx
@@ -38,7 +38,7 @@ export function PowerpackFeatures(): ReactElement {
                   variant="secondary"
                   size="default"
                 >
-                  Learn more about self-hosted cache storage
+                  Learn self-hosted cache storage
                 </ButtonLink>
               </div>
             </div>