mobile event cards (#2207)

## Description

as @jemgillam raised in
#2180 (comment),
the new event cards are too big for normal sized phones. I tested it on
a wider model, and we didn't consider smaller variants in Figma.

I've made the cards smaller on screens narrower than 394px and I added
negative margin and some padding to use the whole screen width for the
events lists.

(We're still using those cards, but colored, in newly updated designs,
so this work is also gonna help me in the future.)

<img width="514" height="659" alt="image"
src="https://github.com/user-attachments/assets/5fa2619b-d3d7-4dba-bd1e-ef5665759a32"
/>
<img width="462" height="211" alt="image"
src="https://github.com/user-attachments/assets/713444bb-033b-4946-bab4-23dd004388ea"
/>

Author: hasparus

src/components/events/event-card.tsx

@@ -72,36 +72,38 @@ export function EventCard({
     <a
       href={href}
       className={clsx(
-        "gql-focus-visible group flex min-w-[352px] flex-col overflow-hidden border border-neu-200 bg-neu-0 text-left text-current no-underline ring-neu-400 hover:bg-sec-base/[.035] hover:ring-1 hover:ring-offset-1 hover:ring-offset-neu-0 dark:border-neu-100 dark:ring-neu-100",
+        "gql-focus-visible group flex min-w-[260px] flex-col overflow-hidden border border-neu-200 bg-neu-0 text-left text-current no-underline ring-neu-400 hover:bg-sec-base/[.035] hover:ring-1 hover:ring-offset-1 hover:ring-offset-neu-0 dark:border-neu-100 dark:ring-neu-100 xs:min-w-[352px]",
       )}
       target="_blank"
       rel="noreferrer"
     >
       <div className="flex flex-1 flex-col">
         <div
           className={clsx(
-            "flex items-center justify-between gap-2 px-4 text-neu-700 dark:text-neu-600",
+            "flex items-center justify-between gap-2 px-2 text-neu-700 dark:text-neu-600 xs:px-4",
             meta
               ? "border-b border-neu-200 py-2.5 dark:border-neu-100"
-              : "-mb-4 pt-3",
+              : "-mb-2 pt-2 xs:-mb-4 xs:pt-3",
           )}
         >
           {meta ? (
             <span className="typography-body-md font-medium">{meta}</span>
           ) : (
             <span className="sr-only">Official GraphQL Local</span>
           )}
-          {official && (
+          {official ? (
             <Tag color="hsl(var(--color-pri-base))" className="*:gap-1">
               <span className="font-sans" aria-hidden>
                 ★
               </span>
               Official
             </Tag>
+          ) : meta ? null : (
+            <div className="h-[22px]" />
           )}
         </div>
 
-        <div className="typography-h3 flex min-h-[124px] flex-1 flex-col justify-center px-4 py-6 text-neu-900">
+        <div className="typography-h3 flex min-h-[100px] flex-1 flex-col justify-center px-2 py-3 text-neu-900 xs:min-h-[124px] xs:px-4 xs:py-6">
           {name}
         </div>
 
@@ -114,23 +116,18 @@ export function EventCard({
           )}
         >
           {dateLabel && (
-            <div className="flex items-center gap-1.5 px-4 py-2.5 text-neu-700 dark:text-neu-600">
-              <CalendarIcon className="size-5 shrink-0 translate-y-[-.5px] text-neu-600 dark:text-neu-500" />
+            <div className="typography-body-sm flex items-center gap-1 px-2 py-1.5 text-neu-700 dark:text-neu-600 xs:gap-1.5 xs:px-4 xs:py-2.5">
+              <CalendarIcon className="size-4 shrink-0 translate-y-[-.5px] text-neu-600 dark:text-neu-500 xs:size-5" />
               {parsedDate ? (
-                <time
-                  dateTime={parsedDate.toISOString()}
-                  className="typography-body-sm"
-                >
-                  {dateLabel}
-                </time>
+                <time dateTime={parsedDate.toISOString()}>{dateLabel}</time>
               ) : (
-                <span className="typography-body-md">{dateLabel}</span>
+                <span>{dateLabel}</span>
               )}
             </div>
           )}
           {city && (
-            <div className="typography-body-sm flex items-center gap-1.5 whitespace-pre px-4 py-2.5 text-neu-700 dark:text-neu-600">
-              <PinIcon className="size-5 shrink-0 translate-y-[-.5px] text-neu-600 dark:text-neu-500" />
+            <div className="typography-body-sm flex items-center gap-1.5 whitespace-pre px-2 py-1.5 text-neu-700 dark:text-neu-600 xs:px-4 xs:py-2.5">
+              <PinIcon className="size-4 shrink-0 translate-y-[-.5px] text-neu-600 dark:text-neu-500 xs:size-5" />
               {city}
             </div>
           )}

src/pages/community/events.mdx

@@ -28,11 +28,11 @@ export const { pastEvents, upcomingEvents } = events.reduce(
     return acc
   },
   { pastEvents: [], upcomingEvents: [] },
-)
+) 
 
 export function EventsScrollview({ children }) {
   return (
-    <div className="scrollview-x-fade px-1 -mx-1 [--fade-size:4rem] relative flex gap-2 lg:gap-4 overflow-auto py-6 nextra-scrollbar">
+    <div className="scrollview-fade scrollview-fade-x-16 px-6 -mx-6 sm:px-1 sm:-mx-1 relative flex gap-2 lg:gap-4 overflow-auto py-6 xs:nextra-scrollbar">
       {children}
     </div>
   )
@@ -42,7 +42,7 @@ export function Events({ events }) {
   if (events.length === 0) return null;
 
   return (
-    <div className="scrollview-x-fade px-1 -mx-1 [--fade-size:4rem] relative flex gap-2 lg:gap-4 overflow-auto py-6 nextra-scrollbar">
+    <EventsScrollview>
       {events.map(event => (
         <EventCard
           key={event.slug}
@@ -53,7 +53,7 @@ export function Events({ events }) {
           city={event.location}
         />
       ))}
-    </div>
+    </EventsScrollview>
   )
 }
 

tailwind.config.ts

@@ -316,23 +316,40 @@ function scrollStartPlugin() {
 }
 
 function scrollviewFadePlugin() {
-  return plugin(({ addComponents, addBase }) => {
-    addComponents({
-      ".scrollview-x-fade": {
+  return plugin(({ addUtilities, matchUtilities, theme }) => {
+    matchUtilities(
+      {
+        "scrollview-fade-x": value => ({
+          "--fade-angle": "90deg",
+          "--fade-size": value,
+        }),
+        "scrollview-fade-y": value => ({
+          "--fade-angle": "180deg",
+          "--fade-size": value,
+        }),
+      },
+      {
+        supportsNegativeValues: false,
+        values: theme("spacing"),
+        type: ["length", "percentage"],
+      },
+    )
+    addUtilities({
+      ".scrollview-fade": {
         position: "relative",
         scrollTimeline: "--scroll-timeline-x inline",
         "--fade-start-opacity": "1",
         "--fade-end-opacity": "1",
         maskImage: `
-          linear-gradient(to right, 
+          linear-gradient(var(--fade-angle), 
             hsl(0 0% 0% / var(--fade-start-opacity)), 
             black var(--fade-size), 
             black calc(100% - var(--fade-size)), 
             hsl(0 0% 0% / var(--fade-end-opacity))
           )
         `,
         WebkitMaskImage: `
-          linear-gradient(to right, 
+          linear-gradient(var(--fade-angle), 
             hsl(0 0% 0% / var(--fade-start-opacity)), 
             black var(--fade-size), 
             black calc(100% - var(--fade-size)),