From 397d7f41e8e1618a46f366604611dd15d3398e14 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Sun, 26 Oct 2025 10:08:02 +0200
Subject: [PATCH 1/2] Update scrollview-fade syntax

---
 src/pages/community/events.mdx |  6 +++---
 tailwind.config.ts             | 27 ++++++++++++++++++++++-----
 2 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/src/pages/community/events.mdx b/src/pages/community/events.mdx
index b067f311db..73c26075b1 100644
--- a/src/pages/community/events.mdx
+++ b/src/pages/community/events.mdx
@@ -32,7 +32,7 @@ export const { pastEvents, upcomingEvents } = events.reduce(
 
 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-1 -mx-1 relative flex gap-2 lg:gap-4 overflow-scroll py-6 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>
   )
 }
 
diff --git a/tailwind.config.ts b/tailwind.config.ts
index b4b75c5392..0fa60628ec 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -316,15 +316,32 @@ 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)), 
@@ -332,7 +349,7 @@ function scrollviewFadePlugin() {
           )
         `,
         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)), 

From 1ffb0328d3e6f003f2d80de99842878c6bb59a0a Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Sun, 26 Oct 2025 10:56:18 +0200
Subject: [PATCH 2/2] Tweak event cards for small phone screens

---
 src/components/events/event-card.tsx | 29 +++++++++++++---------------
 src/pages/community/events.mdx       |  4 ++--
 2 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/src/components/events/event-card.tsx b/src/components/events/event-card.tsx
index f39d85e807..944f746ba1 100644
--- a/src/components/events/event-card.tsx
+++ b/src/components/events/event-card.tsx
@@ -72,7 +72,7 @@ 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"
@@ -80,10 +80,10 @@ export function EventCard({
       <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 ? (
@@ -91,17 +91,19 @@ export function EventCard({
           ) : (
             <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>
           )}
diff --git a/src/pages/community/events.mdx b/src/pages/community/events.mdx
index 73c26075b1..6cb4de8908 100644
--- a/src/pages/community/events.mdx
+++ b/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-fade scrollview-fade-x-16 px-1 -mx-1 relative flex gap-2 lg:gap-4 overflow-scroll 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>
   )