Leahnaya/hackdex-website
1
0
Fork 0
mirror of https://github.com/Hackdex-App/hackdex-website.git synced 2026-08-22 00:24:34 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix up homepage layout issues on mobile

Browse Source
This commit is contained in:
Jared Schoeny
2026-07-11 12:20:16 -06:00
parent 4d07738144
commit 34129f99dc
2 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/page.tsx
View File

@@ -149,7 +149,7 @@ export default async function Home() {
<div>
<section className="relative overflow-hidden">
<div className="absolute inset-0 bg-grid opacity-30 pointer-events-none" />
<div className="mx-auto max-w-screen-2xl px-6 py-12 sm:py-20">
<div className="mx-auto max-w-screen-2xl px-6 pt-12 pb-8 sm:py-20">
<div className="grid items-center gap-10 lg:grid-cols-[minmax(0,1fr)_minmax(0,34rem)] xl:grid-cols-[minmax(0,1fr)_minmax(0,42rem)]">
<div>
<MilestoneCelebration />
@@ -222,7 +222,7 @@ export default async function Home() {
</p>
</div>
</div>
<div className="my-6 mx-auto flex flex-col items-center max-w-[320px] sm:mt-10">
<div className="mt-12 mb-4 mx-auto flex flex-col items-center max-w-[320px] sm:mt-16">
<Link href="/faq" className="inline-flex items-center rounded-full elevate border border-black/10 bg-black/5 dark:border-white/10 dark:bg-white/5 px-4 py-1.5 text-sm text-foreground hover:bg-black/10 dark:hover:bg-white/10">
<span className="font-medium">New to Hackdex?</span>
<span className="ml-1 underline underline-offset-2">Read the FAQ</span>

12
src/components/Home/HeroPatchDiagram.tsx
View File

@@ -33,8 +33,8 @@ export default function HeroPatchDiagram() {
const slots: (Pick | null)[] = picks.length === 3 ? picks : [null, null, null];
return (
<div className="relative mx-auto w-full max-w-full" aria-hidden="true">
<div className="flex w-full flex-col items-center gap-0">
<div className="relative mx-auto w-full min-w-0 max-w-full mt-6 sm:mt-0" aria-hidden="true">
<div className="flex w-full min-w-0 flex-col items-center gap-0">
{/* Base ROM card */}
<div className="card relative z-10 w-full max-w-64 p-3">
<div className="flex items-center gap-3">
@@ -52,7 +52,7 @@ export default function HeroPatchDiagram() {
</div>
{/* Connectors + cards share one shrink-wrapped width so they stay centered together */}
<div className="flex w-full max-w-md flex-col items-center md:w-fit md:max-w-none">
<div className="flex w-full min-w-0 max-w-md flex-col items-center md:w-fit md:max-w-none">
<div className="relative h-14 w-full sm:h-[4.75rem]">
<svg
className="absolute inset-0 h-full w-full overflow-visible"
@@ -85,12 +85,12 @@ export default function HeroPatchDiagram() {
</svg>
</div>
<div className="relative z-10 flex w-full items-start gap-2 sm:gap-3 xl:gap-4">
<div className="relative z-10 flex w-full min-w-0 items-start gap-1.5 sm:gap-3 xl:gap-4">
{slots.map((hack, index) => (
<div
key={index}
data-ready={hack ? "true" : "false"}
className={`hero-hack-card card anim-float min-w-0 flex-1 p-2 sm:p-2.5 md:w-32 md:flex-none lg:w-36 xl:w-40 ${index === 1 ? "mt-3 sm:mt-5" : ""}`}
className={`hero-hack-card card anim-float min-w-0 flex-1 basis-0 p-1.5 sm:p-2.5 md:w-32 md:flex-none md:basis-auto lg:w-36 xl:w-40 ${index === 1 ? "mt-3 sm:mt-5" : ""}`}
style={{ animationDelay: hack?.delay ?? `${index * 0.6}s` }}
>
<div className="relative aspect-[3/2] w-full overflow-hidden rounded-md bg-[var(--surface-2)]">
@@ -105,7 +105,7 @@ export default function HeroPatchDiagram() {
/>
)}
</div>
<div data-ready={hack ? "true" : "false"} className="mt-1.5 truncate text-[11px] font-medium tracking-tight text-foreground/85 sm:mt-2 sm:text-xs opacity-0 data-[ready=true]:opacity-100 transition-opacity duration-500">
<div data-ready={hack ? "true" : "false"} className="mt-1.5 min-w-0 truncate text-[11px] font-medium tracking-tight text-foreground/85 sm:mt-2 sm:text-xs opacity-0 data-[ready=true]:opacity-100 transition-opacity duration-500">
{hack?.title ?? "\u00A0" /* non-breaking space */}
</div>
</div>