fix(nx-dev): launch page mobile experience

(cherry picked from commit de676e2)
nrwl · Feb 7, 2024 · e8d2b47 · e8d2b47
1 parent acdf13b
commit e8d2b47
Showing 1 changed file with 6 additions and 6 deletions.
diff --git a/nx-dev/ui-conference/src/lib/launch-week/announcements.tsx b/nx-dev/ui-conference/src/lib/launch-week/announcements.tsx
@@ -17,7 +17,7 @@ export function LaunchWeekAnnouncements(): JSX.Element {
         {/* MONDAY */}
         <div>
           <article className="relative overflow-hidden pt-4 mx-auto max-w-screen-lg xl:max-w-screen-xl">
-            <div className="px-5 py-12 grid sm:grid-cols-2 sm:gap-8 lg:py-16">
+            <div className="px-5 py-12 grid md:grid-cols-2 sm:gap-8 lg:py-16">
               <div>
                 <header>
                   <SectionHeading as="h2" variant="title" id="monday">
@@ -41,7 +41,7 @@ export function LaunchWeekAnnouncements(): JSX.Element {
                     This is what Nx Project Crystal is all about.
                   </p>
                 </div>
-                <div className="action my-6 flex space-x-2">
+                <div className="pt-4 action flex flex-col space-y-2 sm:flex-row sm:space-y-0 sm:space-x-2">
                   <ButtonLink
                     variant="primary"
                     size="default"
@@ -62,7 +62,7 @@ export function LaunchWeekAnnouncements(): JSX.Element {
               </div>
               <div
                 aria-hidden="true"
-                className="order-first sm:order-last pb-8 relative flex flex-col items-center"
+                className="order-first md:order-last pb-8 relative flex flex-col items-center"
               >
                 <img
                   className="rounded-lg"
@@ -77,7 +77,7 @@ export function LaunchWeekAnnouncements(): JSX.Element {
         {/* TUESDAY */}
         <div>
           <article className="relative overflow-hidden pt-4 mx-auto max-w-screen-lg xl:max-w-screen-xl">
-            <div className="px-5 py-12 grid sm:grid-cols-2 sm:gap-8 lg:py-16">
+            <div className="px-5 py-12 grid md:grid-cols-2 sm:gap-8 lg:py-16">
               <div>
                 <header>
                   <SectionHeading as="h2" variant="title" id="monday">
@@ -102,7 +102,7 @@ export function LaunchWeekAnnouncements(): JSX.Element {
                     powerful monorepo capabilities.
                   </p>
                 </div>
-                <div className="action my-6 flex space-x-2">
+                <div className="pt-4 action flex flex-col space-y-2 sm:flex-row sm:space-y-0 sm:space-x-2">
                   <ButtonLink
                     variant="primary"
                     size="default"
@@ -131,7 +131,7 @@ export function LaunchWeekAnnouncements(): JSX.Element {
               </div>
               <div
                 aria-hidden="true"
-                className="order-first sm:order-last pb-8 relative flex flex-col items-center"
+                className="order-first md:order-last pb-8 relative flex flex-col items-center"
               >
                 <img
                   className="rounded-lg"