From 280ed0ce08cb952117201855962b52e6cc01a4a4 Mon Sep 17 00:00:00 2001
From: synicalsyntax <15116870+synicalsyntax@users.noreply.github.com>
Date: Mon, 8 May 2023 02:59:25 -0400
Subject: [PATCH] fix(website): various UI improvements (#9538)

* fix(website): raise category z-index to prevent clipping

* refactor(website): wrap footer badges when necessary to prevent overflow
---
 apps/website/src/components/Footer.tsx  | 144 ++++++++++++------------
 apps/website/src/components/Sidebar.tsx |   2 +-
 2 files changed, 71 insertions(+), 75 deletions(-)

diff --git a/apps/website/src/components/Footer.tsx b/apps/website/src/components/Footer.tsx
index 314ef9eef..a868ef935 100644
--- a/apps/website/src/components/Footer.tsx
+++ b/apps/website/src/components/Footer.tsx
@@ -5,93 +5,89 @@ import workersLogo from '~/assets/powered-by-workers.png';
 export default function Footer() {
 	return (
 		<footer className="md:pl-12 md:pr-12">
-			<div className="mx-auto max-w-6xl flex flex-col place-items-center gap-12 pt-12 lg:place-content-center">
-				<div className="w-full flex flex-col place-content-between place-items-center gap-12 md:flex-row md:gap-0">
-					<div className="flex flex-col gap-4 lg:flex-row">
+			<div className="flex flex-wrap place-content-center gap-6 md:flex-nowrap md:gap-12">
+				<div className="flex basis-full flex-wrap place-content-center place-items-center gap-4 md:basis-auto">
+					<a
+						className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
+						href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"
+						rel="external noopener noreferrer"
+						target="_blank"
+						title="Vercel"
+					>
+						<Image
+							alt="Vercel"
+							blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAABLCAQAAAA1k5H2AAAAi0lEQVR42u3SMQEAAAgDoC251a3gL2SgmfBYBRAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARCAgwWEOSWBnYbKggAAAABJRU5ErkJggg=="
+							height={44}
+							placeholder="blur"
+							src={vercelLogo}
+							width={212}
+						/>
+					</a>
+					<a
+						className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
+						href="https://www.cloudflare.com"
+						rel="external noopener noreferrer"
+						target="_blank"
+						title="Cloudflare Workers"
+					>
+						<Image
+							alt="Cloudflare"
+							blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAABLCAQAAAA1k5H2AAAAi0lEQVR42u3SMQEAAAgDoC251a3gL2SgmfBYBRAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARCAgwWEOSWBnYbKggAAAABJRU5ErkJggg=="
+							height={44}
+							placeholder="blur"
+							priority
+							src={workersLogo}
+						/>
+					</a>
+				</div>
+				<div className="max-w-max flex grow basis-0 flex-col gap-2 md:basis-auto">
+					<div className="text-lg font-semibold">Community</div>
+					<div className="flex flex-col gap-1">
 						<a
 							className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
-							href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"
+							href="https://discord.gg/djs"
 							rel="external noopener noreferrer"
 							target="_blank"
-							title="Vercel"
 						>
-							<Image
-								alt="Vercel"
-								blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAABLCAQAAAA1k5H2AAAAi0lEQVR42u3SMQEAAAgDoC251a3gL2SgmfBYBRAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARCAgwWEOSWBnYbKggAAAABJRU5ErkJggg=="
-								height={44}
-								placeholder="blur"
-								src={vercelLogo}
-								width={212}
-							/>
+							Discord
 						</a>
 						<a
 							className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
-							href="https://www.cloudflare.com"
+							href="https://github.com/discordjs/discord.js/discussions"
 							rel="external noopener noreferrer"
 							target="_blank"
-							title="Cloudflare Workers"
 						>
-							<Image
-								alt="Cloudflare"
-								blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAABLCAQAAAA1k5H2AAAAi0lEQVR42u3SMQEAAAgDoC251a3gL2SgmfBYBRAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARCAgwWEOSWBnYbKggAAAABJRU5ErkJggg=="
-								height={44}
-								placeholder="blur"
-								priority
-								src={workersLogo}
-							/>
+							GitHub discussions
 						</a>
 					</div>
-					<div className="flex flex-row gap-6 md:gap-12">
-						<div className="flex flex-col gap-2">
-							<div className="text-lg font-semibold">Community</div>
-							<div className="flex flex-col gap-1">
-								<a
-									className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
-									href="https://discord.gg/djs"
-									rel="external noopener noreferrer"
-									target="_blank"
-								>
-									Discord
-								</a>
-								<a
-									className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
-									href="https://github.com/discordjs/discord.js/discussions"
-									rel="external noopener noreferrer"
-									target="_blank"
-								>
-									GitHub discussions
-								</a>
-							</div>
-						</div>
-						<div className="flex flex-col gap-2">
-							<div className="text-lg font-semibold">Project</div>
-							<div className="flex flex-col gap-1">
-								<a
-									className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
-									href="https://github.com/discordjs/discord.js"
-									rel="external noopener noreferrer"
-									target="_blank"
-								>
-									discord.js
-								</a>
-								<a
-									className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
-									href="https://discordjs.guide"
-									rel="noopener noreferrer"
-									target="_blank"
-								>
-									discord.js guide
-								</a>
-								<a
-									className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
-									href="https://discord-api-types.dev"
-									rel="external noopener noreferrer"
-									target="_blank"
-								>
-									discord-api-types
-								</a>
-							</div>
-						</div>
+				</div>
+				<div className="max-w-max flex grow basis-0 flex-col gap-2 md:basis-auto">
+					<div className="text-lg font-semibold">Project</div>
+					<div className="flex flex-col gap-1">
+						<a
+							className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
+							href="https://github.com/discordjs/discord.js"
+							rel="external noopener noreferrer"
+							target="_blank"
+						>
+							discord.js
+						</a>
+						<a
+							className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
+							href="https://discord.js.org/docs"
+							rel="noopener noreferrer"
+							target="_blank"
+						>
+							discord.js documentation
+						</a>
+						<a
+							className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
+							href="https://discord-api-types.dev"
+							rel="external noopener noreferrer"
+							target="_blank"
+						>
+							discord-api-types
+						</a>
 					</div>
 				</div>
 			</div>
diff --git a/apps/website/src/components/Sidebar.tsx b/apps/website/src/components/Sidebar.tsx
index 25a519af4..d4832b6a3 100644
--- a/apps/website/src/components/Sidebar.tsx
+++ b/apps/website/src/components/Sidebar.tsx
@@ -94,7 +94,7 @@ export function Sidebar({ members }: { members: SidebarSectionItemData[] }) {
 				.filter((group) => groupItems[group].length)
 				.map((group, idx) => (
 					<Section
-						buttonClassName="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-400 dark:hover:bg-dark-300 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple rounded p-3 outline-none focus:ring"
+						buttonClassName="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-400 dark:hover:bg-dark-300 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple rounded p-3 outline-none focus:ring z-10"
 						icon={resolveIcon(group)}
 						key={`${group}-${idx}`}
 						title={group}