Fix starter links on mobile (#5710)

adobe · Jan 17, 2024 · ee51290 · ee51290 · rspbot · Jan 17, 2024
1 parent 3d47110
commit ee51290
Showing 1 changed file with 3 additions and 3 deletions.
diff --git a/packages/dev/docs/src/StarterKits.js b/packages/dev/docs/src/StarterKits.js
@@ -10,19 +10,19 @@ export function StarterKits({component, tailwindComponent = component}) {
   let query = component ? `?path=/docs/${component}--docs` : '';
   let tailwindQuery = tailwindComponent ? `?path=/docs/${tailwindComponent}--docs` : '';
   return (
-    <section style={{display: 'flex', gap: 16}}>
+    <section style={{display: 'flex', columnGap: 16, flexWrap: 'wrap'}}>
       <div style={{display: 'flex', flexDirection: 'column', gap: 4}}>
         <ResourceCard
           type="Storybook"
           url={`../react-aria-starter.${gitHash}.zip`}
-          style={{marginTop: 36}} />
+          style={{marginTop: 36, marginBottom: 0}} />
         <Link variant="secondary" href={`../react-aria-starter/index.html${query}`} target="_blank" UNSAFE_style={{width: 'fit-content'}}>Preview<LinkOut size="XXS" marginStart="size-75" UNSAFE_style={{verticalAlign: 'middle'}} /></Link>
       </div>
       <div style={{display: 'flex', flexDirection: 'column', gap: 4}}>
         <ResourceCard
           type="Tailwind"
           url={`../react-aria-tailwind-starter.${gitHash}.zip`}
-          style={{marginTop: 36}} />
+          style={{marginTop: 36, marginBottom: 0}} />
         <Link variant="secondary" href={`../react-aria-tailwind-starter/index.html${tailwindQuery}`} target="_blank" UNSAFE_style={{width: 'fit-content'}}>Preview<LinkOut size="XXS" marginStart="size-75" UNSAFE_style={{verticalAlign: 'middle'}} /></Link>
       </div>
     </section>