From a3e15502bb49a774a2a5da922cee6b64056d0585 Mon Sep 17 00:00:00 2001
From: Rizel Scarlett <rizel@squareup.com>
Date: Thu, 11 Dec 2025 17:53:51 -0500
Subject: [PATCH] Fix community page mobile responsiveness and horizontal
 overflow

- Fix horizontal overflow caused by skip-to-content link positioning
- Add overflow-x: hidden to html, body, and main containers
- Improve StarsCard responsive layout with proper breakpoints
- Replace Docusaurus col classes with Tailwind responsive widths
- Add flex-wrap and proper gap spacing for community stars grid
- Ensure all content respects viewport width on mobile, tablet, and desktop
- Maintain accessibility for skip-to-content link when focused
---
 documentation/src/css/custom.css            | 47 +++++++++++++++++++++
 documentation/src/pages/community/index.tsx |  8 ++--
 2 files changed, 51 insertions(+), 4 deletions(-)

diff --git a/documentation/src/css/custom.css b/documentation/src/css/custom.css
index 3e637240abec..edba1e5659d5 100644
--- a/documentation/src/css/custom.css
+++ b/documentation/src/css/custom.css
@@ -417,3 +417,50 @@ html[data-theme="light"] .hide-in-light {
 .button-grant h2 {
   margin-top: 15px;
 }
+
+/* Prevent horizontal overflow */
+html, body {
+  overflow-x: hidden;
+  max-width: 100%;
+}
+
+/* Ensure skip to content link doesn't cause horizontal scroll */
+.skipToContent_fXgn {
+  position: absolute !important;
+  left: -9999px !important;
+  width: 1px !important;
+  height: 1px !important;
+  overflow: hidden !important;
+}
+
+.skipToContent_fXgn:focus {
+  position: fixed !important;
+  left: 10px !important;
+  top: 10px !important;
+  width: auto !important;
+  height: auto !important;
+  overflow: visible !important;
+  z-index: 9999 !important;
+  padding: 10px 20px !important;
+  background: var(--background-prominent) !important;
+  color: var(--text-prominent) !important;
+  border-radius: 4px !important;
+}
+
+/* Ensure all containers respect viewport width */
+.container {
+  max-width: 100%;
+  overflow-x: hidden;
+}
+
+/* Prevent navbar from causing horizontal overflow */
+.navbar {
+  max-width: 100%;
+  overflow-x: hidden;
+}
+
+/* Ensure main content doesn't overflow */
+main {
+  max-width: 100%;
+  overflow-x: hidden;
+}
diff --git a/documentation/src/pages/community/index.tsx b/documentation/src/pages/community/index.tsx
index c24bd3ec5609..f19f7de1f833 100644
--- a/documentation/src/pages/community/index.tsx
+++ b/documentation/src/pages/community/index.tsx
@@ -96,7 +96,7 @@ function CommunityAllStarsSection() {
         </p>
       </div>
       
-      <div className="flex justify-center">
+      <div className="flex flex-wrap justify-center gap-4 w-full px-4">
         {currentData.communityStars.map((contributor, index) => (
           <StarsCard key={index} contributor={contributor} />
         ))}
@@ -112,7 +112,7 @@ function CommunityAllStarsSection() {
             </p>
           </div>
           
-          <div className="flex justify-center">
+          <div className="flex flex-wrap justify-center gap-4 w-full px-4">
             {currentData.teamStars.map((contributor, index) => (
               <StarsCard key={index} contributor={{...contributor, totalCount: currentData.teamStars.length}} />
             ))}
@@ -413,9 +413,9 @@ function ContentCard({ content }): ReactNode {
 
 export function StarsCard({contributor}): ReactNode {
   return (
-    <div className={`col ${contributor.totalCount <= 3 ? 'col--4' : 'col--2'} mb-8`}>
+    <div className="w-full sm:w-[calc(50%-0.5rem)] md:w-[calc(33.333%-0.67rem)] lg:w-[calc(20%-0.8rem)] max-w-[280px]">
       <div 
-        className="h-full border-2 border-borderSubtle rounded-2xl cursor-pointer hover:shadow-xl hover:border-[var(--ifm-color-primary-dark)]"
+        className="h-full border-2 border-borderSubtle rounded-2xl cursor-pointer hover:shadow-xl hover:border-[var(--ifm-color-primary-dark)] transition-all"
       >
         <div className="card__header text-center">
           <div className="avatar avatar--vertical">