From ec5bdf3e597f08796ba7a96aed140b77f4e16500 Mon Sep 17 00:00:00 2001
From: Francesco Sansalvadore <f.sansalvadore@gmail.com>
Date: Sun, 6 Aug 2023 12:53:27 +0200
Subject: [PATCH] lw8: improve mobile responsiveness

---
 apps/www/components/LaunchWeek/8/LaunchWeekLogoHeader.tsx  | 2 +-
 .../components/LaunchWeek/8/Releases/LWAnnouncement.tsx    | 6 +++++-
 .../components/LaunchWeek/8/Releases/components/index.tsx  | 7 ++++++-
 packages/ui/src/layout/banners/LWAnnouncement.tsx          | 6 +++++-
 4 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/apps/www/components/LaunchWeek/8/LaunchWeekLogoHeader.tsx b/apps/www/components/LaunchWeek/8/LaunchWeekLogoHeader.tsx
index 8f39eabde98..cc154dbe2c5 100644
--- a/apps/www/components/LaunchWeek/8/LaunchWeekLogoHeader.tsx
+++ b/apps/www/components/LaunchWeek/8/LaunchWeekLogoHeader.tsx
@@ -9,7 +9,7 @@ export function LaunchWeekLogoHeader() {
           <span className="block">August 7th–11th, 2023</span>
           <span>9:00 AM PT</span>
         </p>
-        <div className="text-[#9296AA]">
+        <div className="text-[#9296AA] px-4">
           Join us in a week of announcing new features. <br className="hidden md:block" />
           Connect with GitHub to generate your unique ticket and contribute to the constellation.
           <span className="inline sm:block">
diff --git a/apps/www/components/LaunchWeek/8/Releases/LWAnnouncement.tsx b/apps/www/components/LaunchWeek/8/Releases/LWAnnouncement.tsx
index e7dce88e704..69f03967e51 100644
--- a/apps/www/components/LaunchWeek/8/Releases/LWAnnouncement.tsx
+++ b/apps/www/components/LaunchWeek/8/Releases/LWAnnouncement.tsx
@@ -18,7 +18,11 @@ const LWAnnouncement = ({ title }: { title?: string }) => {
             <div className="relative flex-shrink flex items-center p-2 w-2/3 md:w-auto">
               <div className="flex flex-col gap-1 sm:pl-2">
                 <div className="flex items-center gap-2">
-                  <div className={['flex min-w-[20px] opacity-50', 'opacity-pulse'].join(' ')}>
+                  <div
+                    className={['hidden sm:flex min-w-[20px] opacity-50', 'opacity-pulse'].join(
+                      ' '
+                    )}
+                  >
                     <svg
                       width="21"
                       height="21"
diff --git a/apps/www/components/LaunchWeek/8/Releases/components/index.tsx b/apps/www/components/LaunchWeek/8/Releases/components/index.tsx
index 55bea7faaf8..dc070d1bb84 100644
--- a/apps/www/components/LaunchWeek/8/Releases/components/index.tsx
+++ b/apps/www/components/LaunchWeek/8/Releases/components/index.tsx
@@ -165,7 +165,12 @@ export const AccordionHeader = ({
   <div
     className={['flex flex-1 justify-between items-stretch scroll-mt-20 text-scale-900'].join(' ')}
   >
-    <div className={['flex', shippable && shipped ? 'items-stretch' : 'flex-row'].join(' ')}>
+    <div
+      className={[
+        'flex flex-1',
+        shippable && shipped ? 'items-stretch' : 'flex-row items-center',
+      ].join(' ')}
+    >
       <div className="flex gap-4 w-full sm:w-auto sm:min-w-[240px] md:min-w-[380px] items-center">
         <span className="text-sm">
           <span className="inline sm:hidden md:inline">{weekDay} </span>
diff --git a/packages/ui/src/layout/banners/LWAnnouncement.tsx b/packages/ui/src/layout/banners/LWAnnouncement.tsx
index 84194d7ece6..54847f7579c 100644
--- a/packages/ui/src/layout/banners/LWAnnouncement.tsx
+++ b/packages/ui/src/layout/banners/LWAnnouncement.tsx
@@ -58,7 +58,11 @@ const LWAnnouncement = ({
             <div className="relative flex-shrink flex items-center p-2 w-2/3 md:w-auto">
               <div className="flex flex-col gap-1 sm:pl-2">
                 <div className="flex items-center gap-2">
-                  <div className={['flex min-w-[20px] opacity-50', 'opacity-pulse'].join(' ')}>
+                  <div
+                    className={['hidden sm:flex min-w-[20px] opacity-50', 'opacity-pulse'].join(
+                      ' '
+                    )}
+                  >
                     <svg
                       width="21"
                       height="21"