fix(nx-dev): adjust powerpack mobile view

juristr · juristr · commit fc39beae7a87 · 2024-09-26T10:18:16.000+02:00
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>

Original file line number	Diff line number	Diff line change
`@@ -38,7 +38,7 @@ export function PowerpackFeatures(): ReactElement {`
`38`	`38`	`variant="secondary"`
`39`	`39`	`size="default"`
`40`	`40`	`>`
`41`		`- Learn more about self-hosted cache storage`
	`41`	`+ Learn self-hosted cache storage`
`42`	`42`	`</ButtonLink>`
`43`	`43`	`</div>`
`44`	`44`	`</div>`