fix(nx-dev): adjust powerpack mobile view

nrwl · Sep 26, 2024 · fc39bea · fc39bea
1 parent 529ab94
commit fc39bea
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 11 deletions.
diff --git 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,21 +104,22 @@ 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>
                 <p className="mt-2">
                   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
@@ -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>