From 3ea26cc1a6cd1422c37cbe09c3941652860f9693 Mon Sep 17 00:00:00 2001
From: iCrawl <buechler.noel@outlook.com>
Date: Sun, 16 Apr 2023 00:17:12 +0200
Subject: [PATCH] refactor(website): only show search box on md and up

---
 apps/website/src/app/page.tsx          | 2 +-
 apps/website/src/components/Header.tsx | 9 ++++++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/apps/website/src/app/page.tsx b/apps/website/src/app/page.tsx
index dd5c1b7e6..03ffc639e 100644
--- a/apps/website/src/app/page.tsx
+++ b/apps/website/src/app/page.tsx
@@ -10,7 +10,7 @@ export default function Page() {
 	return (
 		<div className="min-h-screen">
 			<Banner />
-			<div className="mx-auto max-w-6xl flex flex-col place-items-center gap-12 px-8 py-16 lg:min-h-[calc(100vh_-_40px)] lg:place-content-center lg:py-0">
+			<div className="mx-auto max-w-6xl flex flex-col place-items-center gap-12 px-8 py-16 lg:min-h-[calc(100vh_-_40px)] lg:place-content-center lg:py-10">
 				<div className="flex flex-col place-items-center gap-10 lg:flex-row lg:gap-6">
 					<div className="max-w-lg flex flex-col gap-3 lg:mr-8">
 						<h1 className="text-3xl font-black leading-tight sm:text-5xl sm:leading-tight">
diff --git a/apps/website/src/components/Header.tsx b/apps/website/src/components/Header.tsx
index ef3b54654..fa313284e 100644
--- a/apps/website/src/components/Header.tsx
+++ b/apps/website/src/components/Header.tsx
@@ -77,7 +77,7 @@ export default function Header() {
 					<div className="hidden lg:flex lg:grow lg:flex-row lg:overflow-hidden">{breadcrumbs}</div>
 					<Button
 						as="div"
-						className="w-56 grow rounded bg-white px-4 py-2.5 outline-0 sm:grow-0 dark:bg-dark-800 focus:ring focus:ring-width-2 focus:ring-blurple"
+						className="hidden w-56 grow rounded bg-white px-4 py-2.5 outline-0 md:block sm:grow-0 dark:bg-dark-800 focus:ring focus:ring-width-2 focus:ring-blurple"
 						onClick={() => dialog?.toggle()}
 					>
 						<div className="flex flex-row place-items-center gap-4 md:justify-between">
@@ -89,6 +89,13 @@ export default function Header() {
 						</div>
 					</Button>
 					<div className="flex flex-row place-items-center gap-4">
+						<Button
+							as="div"
+							className="h-6 w-6 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 lg:hidden active:translate-y-px focus:ring focus:ring-width-2 focus:ring-blurple"
+							onClick={() => dialog?.toggle()}
+						>
+							<VscSearch size={24} />
+						</Button>
 						<Button
 							aria-label="GitHub"
 							as="a"