awesome-bookmarks/goose
3
0
Fork 0
mirror of https://github.com/block/goose.git synced 2026-07-17 12:56:20 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix community page mobile responsiveness and horizontal overflow (#6082)

Browse Source
This commit is contained in:
Rizel Scarlett
2025-12-12 10:26:03 -05:00
committed by GitHub
parent cdab2fc3a6
commit 8bf18b1638
2 changed files with 51 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
documentation/src/css/custom.css
+47
View File
@@ -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;
}
documentation/src/pages/community/index.tsx
+4 -4
View File
@@ -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">