Fixed text overflow on user dashboard (#25)

* Fixed text sizing in user dashboard * Formatted Project with Prettier
acmutsa · Oct 9, 2024 · ae09168 · ae09168
1 parent 089490c
commit ae09168
Show file tree

Hide file tree

Showing 38 changed files with 139 additions and 123 deletions.
diff --git a/apps/web/src/app/admin/layout.tsx b/apps/web/src/app/admin/layout.tsx
@@ -48,7 +48,7 @@ export default async function AdminLayout({ children }: AdminLayoutProps) {
 					<div className="h-[45%] w-[2px] rotate-[25deg] bg-muted-foreground" />
 					<h2 className="font-bold tracking-tight">Admin</h2>
 				</div>
-				<div className="hidden items-center justify-end gap-x-4 md:flex">
+				<div className="md:flex hidden items-center justify-end gap-x-4">
 					<Link href={"/"}>
 						<Button
 							variant={"outline"}
@@ -75,7 +75,7 @@ export default async function AdminLayout({ children }: AdminLayoutProps) {
 					</Link>
 					<ProfileButton />
 				</div>
-				<div className="flex items-center justify-end gap-x-4 md:hidden"></div>
+				<div className="md:hidden flex items-center justify-end gap-x-4"></div>
 			</div>
 			<div className="fixed z-20 mt-16 flex h-12 w-full border-b border-b-border bg-nav px-5">
 				{Object.entries(c.dashPaths.admin).map(([name, path]) => (

diff --git a/apps/web/src/app/dash/layout.tsx b/apps/web/src/app/dash/layout.tsx
@@ -52,7 +52,7 @@ export default async function DashLayout({ children }: DashLayoutProps) {
 						<div className="h-[45%] w-[2px] rotate-[25deg] bg-muted-foreground" />
 						<h2 className="font-bold tracking-tight">Dashboard</h2>
 					</div>
-					<div className="hidden items-center justify-end gap-x-4 md:flex">
+					<div className="md:flex hidden items-center justify-end gap-x-4">
 						<Link href={"/"}>
 							<Button
 								variant={"outline"}
@@ -79,7 +79,7 @@ export default async function DashLayout({ children }: DashLayoutProps) {
 						</Link>
 						<ProfileButton />
 					</div>
-					<div className="flex items-center justify-end gap-x-4 md:hidden">
+					<div className="md:hidden flex items-center justify-end gap-x-4">
 						<ProfileButton />
 					</div>
 				</div>

diff --git a/apps/web/src/app/dash/page.tsx b/apps/web/src/app/dash/page.tsx
@@ -31,7 +31,7 @@ export default async function Page() {
 					{user.firstName}
 				</h1>
 			</div>
-			<div className="rows-[] grid w-full grid-cols-1 gap-2 px-2 pt-10 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-4">
+			<div className="rows-[] sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-4 grid w-full grid-cols-1 gap-2 px-2 pt-10">
 				<QuickQR qrPayload={qrPayload} />
 				<TitleBubble />
 				<Countdown

diff --git a/apps/web/src/app/dash/team/new/page.tsx b/apps/web/src/app/dash/team/new/page.tsx
@@ -6,7 +6,7 @@ export default async function Page() {
 		<main className="mx-auto mt-16 flex min-h-[70%] w-full max-w-5xl flex-col items-center">
 			<div className="max-w-screen fixed left-1/2 top-[calc(50%+7rem)] h-[40vh] w-[800px] -translate-x-1/2 -translate-y-1/2 scale-150 overflow-x-hidden bg-hackathon opacity-30 blur-[100px] will-change-transform"></div>
 			<h2 className="text-4xl font-extrabold">{c.hackathonName}</h2>
-			<h1 className="mb-10 text-6xl font-extrabold text-hackathon dark:bg-gradient-to-t dark:from-hackathon/80 dark:to-white dark:bg-clip-text dark:text-transparent md:text-8xl">
+			<h1 className="md:text-8xl mb-10 text-6xl font-extrabold text-hackathon dark:bg-gradient-to-t dark:from-hackathon/80 dark:to-white dark:bg-clip-text dark:text-transparent">
 				Team
 			</h1>
 			<div className="flex aspect-video min-h-[max(60vh,625px)] w-full max-w-[500px] flex-col items-center rounded-xl bg-white p-5 backdrop-blur transition dark:bg-white/[0.08]">

diff --git a/apps/web/src/app/dash/team/page.tsx b/apps/web/src/app/dash/team/page.tsx
@@ -47,7 +47,7 @@ export default async function Page() {
 			<main className="mx-auto mt-16 flex min-h-[70%] w-full max-w-5xl flex-col items-center">
 				<div className="max-w-screen fixed left-1/2 top-[calc(50%+7rem)] h-[40vh] w-[800px] -translate-x-1/2 -translate-y-1/2 scale-150 overflow-x-hidden bg-hackathon opacity-30 blur-[100px] will-change-transform"></div>
 				<h2 className="text-4xl font-extrabold">{c.hackathonName}</h2>
-				<h1 className="mb-10 text-6xl font-extrabold text-hackathon dark:bg-gradient-to-t dark:from-hackathon/80 dark:to-white dark:bg-clip-text dark:text-transparent md:text-8xl">
+				<h1 className="md:text-8xl mb-10 text-6xl font-extrabold text-hackathon dark:bg-gradient-to-t dark:from-hackathon/80 dark:to-white dark:bg-clip-text dark:text-transparent">
 					Team
 				</h1>
 				<div className="aspect-video min-h-[60vh] w-full max-w-[500px] rounded-xl bg-white p-5 backdrop-blur transition dark:bg-white/[0.08]">

diff --git a/apps/web/src/app/faq/page.tsx b/apps/web/src/app/faq/page.tsx
@@ -9,21 +9,21 @@ export default function Page() {
 	return (
 		<>
 			<Navbar />
-			<div className="min-h-96 gap-4 bg-[#1A3A9E] px-2 pb-48 pt-12 font-oswald md:px-10 lg:gap-6">
+			<div className="min-h-96 md:px-10 lg:gap-6 gap-4 bg-[#1A3A9E] px-2 pb-48 pt-12 font-oswald">
 				<Accordion
 					type="single"
 					collapsible
-					className="grid grid-cols-1 gap-4 font-bold lg:grid-cols-2 lg:gap-6"
+					className="lg:grid-cols-2 lg:gap-6 grid grid-cols-1 gap-4 font-bold"
 				>
-					<div className="mb-8 flex items-center justify-center gap-3 rounded-lg border-4 border-[#ea580c] bg-white py-4 md:gap-6 lg:col-span-2">
+					<div className="md:gap-6 lg:col-span-2 mb-8 flex items-center justify-center gap-3 rounded-lg border-4 border-[#ea580c] bg-white py-4">
 						<Image
 							src="/img/logo/rhbttf.svg"
 							alt="RowdyHacks Logo"
-							className="w-20 md:w-32"
+							className="md:w-32 w-20"
 							width={100}
 							height={50}
 						/>
-						<h1 className="text-center text-4xl font-extrabold text-[#ea580c] sm:text-5xl md:text-7xl">
+						<h1 className="sm:text-5xl md:text-7xl text-center text-4xl font-extrabold text-[#ea580c]">
 							Hackathon FAQ
 						</h1>
 					</div>

diff --git a/apps/web/src/app/i/approval/page.tsx b/apps/web/src/app/i/approval/page.tsx
@@ -6,7 +6,7 @@ export default function Page() {
 	return (
 		<main className="mx-auto flex min-h-screen w-full max-w-5xl flex-col items-center justify-center">
 			<div className="max-w-screen fixed left-1/2 top-[calc(50%+7rem)] h-[40vh] w-[800px] -translate-x-1/2 -translate-y-1/2 scale-150 overflow-x-hidden bg-hackathon opacity-30 blur-[100px] will-change-transform"></div>
-			<h1 className="mb-10 text-6xl font-extrabold text-hackathon dark:bg-gradient-to-t dark:from-hackathon/80 dark:to-white dark:bg-clip-text dark:text-transparent md:text-8xl">
+			<h1 className="md:text-8xl mb-10 text-6xl font-extrabold text-hackathon dark:bg-gradient-to-t dark:from-hackathon/80 dark:to-white dark:bg-clip-text dark:text-transparent">
 				{c.hackathonName}
 			</h1>
 			<div className="relative flex aspect-video w-full max-w-[500px] flex-col items-center justify-center rounded-xl bg-white p-5 backdrop-blur transition dark:bg-white/[0.08]">

diff --git a/apps/web/src/app/register/page.tsx b/apps/web/src/app/register/page.tsx
@@ -33,7 +33,7 @@ export default async function Page() {
 				<Navbar />
 				<main className="dark:bg-zinc-950">
 					<div className="mx-auto min-h-screen max-w-5xl px-5 pb-10 pt-[20vh] font-sans dark:text-white">
-						<h1 className="text-6xl font-black md:text-8xl">
+						<h1 className="md:text-8xl text-6xl font-black">
 							Register
 						</h1>
 						<p className="mt-5 font-medium">
@@ -64,7 +64,7 @@ export default async function Page() {
 			<div className="max-w-screen fixed left-1/2 top-[calc(50%+7rem)] h-[40vh] w-[800px] -translate-x-1/2 -translate-y-1/2 scale-150 overflow-x-hidden bg-hackathon opacity-30 blur-[100px] will-change-transform" />
 			<h2 className="text-4xl font-extrabold">{c.hackathonName}</h2>
 			{/* Why is this not a component? This same code is in here and insideo of sign-up */}
-			<h1 className="mb-10 pb-5 text-6xl font-extrabold text-hackathon dark:bg-gradient-to-t dark:from-hackathon/80 dark:to-white dark:bg-clip-text dark:text-transparent md:text-8xl">
+			<h1 className="md:text-8xl mb-10 pb-5 text-6xl font-extrabold text-hackathon dark:bg-gradient-to-t dark:from-hackathon/80 dark:to-white dark:bg-clip-text dark:text-transparent">
 				Registration
 			</h1>
 			<div className="relative z-10 flex aspect-video w-full max-w-[500px] flex-col items-center justify-center gap-y-4 rounded-xl bg-white px-5 py-4 backdrop-blur transition dark:bg-white/[0.08]">

diff --git a/apps/web/src/app/rsvp/page.tsx b/apps/web/src/app/rsvp/page.tsx
@@ -58,7 +58,7 @@ export default async function RsvpPage({
 					<h2 className="text-4xl font-extrabold">
 						{c.hackathonName}
 					</h2>
-					<h1 className="mb-10 text-6xl font-extrabold text-hackathon dark:bg-gradient-to-t dark:from-hackathon/80 dark:to-white dark:bg-clip-text dark:text-transparent md:text-8xl">
+					<h1 className="md:text-8xl mb-10 text-6xl font-extrabold text-hackathon dark:bg-gradient-to-t dark:from-hackathon/80 dark:to-white dark:bg-clip-text dark:text-transparent">
 						RSVP
 					</h1>
 					<ConfirmDialogue hasRsvped={user.isRSVPed} />
@@ -70,7 +70,7 @@ export default async function RsvpPage({
 			<main className="mx-auto flex min-h-screen w-full max-w-5xl flex-col items-center justify-center">
 				<div className="max-w-screen fixed left-1/2 top-[calc(50%+7rem)] h-[40vh] w-[800px] -translate-x-1/2 -translate-y-1/2 scale-150 overflow-x-hidden bg-hackathon opacity-30 blur-[100px] will-change-transform"></div>
 				<h2 className="text-4xl font-extrabold">{c.hackathonName}</h2>
-				<h1 className="mb-10 text-6xl font-extrabold text-hackathon dark:bg-gradient-to-t dark:from-hackathon/80 dark:to-white dark:bg-clip-text dark:text-transparent md:text-8xl">
+				<h1 className="md:text-8xl mb-10 text-6xl font-extrabold text-hackathon dark:bg-gradient-to-t dark:from-hackathon/80 dark:to-white dark:bg-clip-text dark:text-transparent">
 					RSVP
 				</h1>
 				<div className="relative flex aspect-video w-full max-w-[500px] flex-col items-center justify-center rounded-xl bg-white p-5 backdrop-blur transition dark:bg-white/[0.08]">

diff --git a/apps/web/src/app/sign-up/[[...sign-up]]/page.tsx b/apps/web/src/app/sign-up/[[...sign-up]]/page.tsx
@@ -29,7 +29,7 @@ export default async function Page() {
 		<main className="flex min-h-screen flex-col items-center justify-center px-2">
 			<div className="max-w-screen fixed left-1/2 top-[calc(50%+7rem)] h-[40vh] w-[800px] -translate-x-1/2 -translate-y-1/2 scale-150 overflow-x-hidden bg-hackathon opacity-30 blur-[100px] will-change-transform" />
 			<h2 className="text-4xl font-extrabold">{c.hackathonName}</h2>
-			<h1 className="mb-10 pb-5 text-6xl font-extrabold text-hackathon dark:bg-gradient-to-t dark:from-hackathon/80 dark:to-white dark:bg-clip-text dark:text-transparent md:text-8xl">
+			<h1 className="md:text-8xl mb-10 pb-5 text-6xl font-extrabold text-hackathon dark:bg-gradient-to-t dark:from-hackathon/80 dark:to-white dark:bg-clip-text dark:text-transparent">
 				Registration
 			</h1>
 			<div className="relative z-10 flex aspect-video w-full max-w-[500px] flex-col items-center justify-center gap-y-4 rounded-xl bg-white px-5 backdrop-blur transition dark:bg-white/[0.08]">

diff --git a/apps/web/src/components/admin/scanner/CheckinScanner.tsx b/apps/web/src/components/admin/scanner/CheckinScanner.tsx
@@ -74,7 +74,7 @@ export default function CheckinScanner({
 
 	return (
 		<>
-			<div className="flex h-dvh flex-col items-center justify-center pt-32">
+			<div className="h-dvh flex flex-col items-center justify-center pt-32">
 				<div className="flex w-screen flex-col items-center justify-center gap-5">
 					<div className="mx-auto aspect-square w-screen max-w-[500px] overflow-hidden">
 						<QrScanner

diff --git a/apps/web/src/components/admin/scanner/PassScanner.tsx b/apps/web/src/components/admin/scanner/PassScanner.tsx
@@ -96,7 +96,7 @@ export default function PassScanner({
 
 	return (
 		<>
-			<div className="flex h-dvh flex-col items-center justify-center pt-32">
+			<div className="h-dvh flex flex-col items-center justify-center pt-32">
 				<div className="flex w-screen flex-col items-center justify-center gap-5">
 					<div className="mx-auto aspect-square w-screen max-w-[500px] overflow-hidden">
 						<QrScanner

diff --git a/apps/web/src/components/admin/users/UpdateRoleDialog.tsx b/apps/web/src/components/admin/users/UpdateRoleDialog.tsx
@@ -110,7 +110,7 @@ export default function UpdateRoleDialog({
 				</div>
 				<DialogFooter>
 					{roleToSet !== currPermision ? (
-						<div className="flex h-full w-full items-center justify-center gap-x-2 self-end sm:justify-start">
+						<div className="sm:justify-start flex h-full w-full items-center justify-center gap-x-2 self-end">
 							<Badge>
 								{titleCase(currPermision.replace("_", " "))}
 							</Badge>

diff --git a/apps/web/src/components/dash/overview/ServerBubbles.tsx b/apps/web/src/components/dash/overview/ServerBubbles.tsx
@@ -29,13 +29,13 @@ export function Questions() {
 
 export function TitleBubble() {
 	return (
-		<div className="relative col-span-1 !col-start-1 !row-start-1 aspect-video h-full w-full overflow-hidden rounded-xl border border-hackathon p-5 sm:col-span-2 sm:row-span-2 lg:!col-start-auto lg:!row-start-auto lg:aspect-auto">
+		<div className="sm:col-span-2 sm:row-span-2 lg:!col-start-auto lg:!row-start-auto lg:aspect-auto relative col-span-1 !col-start-1 !row-start-1 aspect-video h-full w-full overflow-hidden rounded-xl border border-hackathon p-5">
 			<GradientHero />
 			<div className="relative z-20 flex h-full w-full flex-col items-center justify-center gap-y-2 rounded-xl">
-				<h1 className="text-7xl font-black text-white">
+				<h1 className="text-5xl font-black text-white xs:text-7xl">
 					{c.hackathonName}
 				</h1>
-				<h2 className="text-center font-mono text-xs text-white sm:text-sm">
+				<h2 className="sm:text-sm text-center font-mono text-xs text-white">
 					{`${format(c.startDate, "h:mma, MMM d, yyyy")}`} @{" "}
 					{c.prettyLocation}
 				</h2>

diff --git a/apps/web/src/components/events/admin/EventDetails.tsx b/apps/web/src/components/events/admin/EventDetails.tsx
@@ -35,7 +35,7 @@ export default function EventFull({ event }: { event: Event }) {
 					>
 						{event.type}
 					</Badge>
-					<p className="text-xs font-bold md:text-sm">{`${formatInTimeZone(
+					<p className="md:text-sm text-xs font-bold">{`${formatInTimeZone(
 						event.startTime,
 						userTimeZone,
 						"EEEE MMMM do",

diff --git a/apps/web/src/components/faq/FAQItem.tsx b/apps/web/src/components/faq/FAQItem.tsx
@@ -14,10 +14,10 @@ interface Props {
 export default function FAQItem({ title, children }: PropsWithChildren<Props>) {
 	return (
 		<AccordionItem
-			className="w-[100%] items-center self-start justify-self-center rounded-lg border-4 border-orange-500 bg-white px-6 text-orange-500 transition-transform lg:data-[state=closed]:hover:scale-105"
+			className="lg:data-[state=closed]:hover:scale-105 w-[100%] items-center self-start justify-self-center rounded-lg border-4 border-orange-500 bg-white px-6 text-orange-500 transition-transform"
 			value={`item-${title}`}
 		>
-			<AccordionTrigger className="text-left font-oswald text-2xl font-bold sm:text-3xl">
+			<AccordionTrigger className="sm:text-3xl text-left font-oswald text-2xl font-bold">
 				{title}
 			</AccordionTrigger>
 			<AccordionContent>

diff --git a/apps/web/src/components/landing/About.tsx b/apps/web/src/components/landing/About.tsx
@@ -27,13 +27,13 @@ export default function About() {
 			className="relative z-10 min-h-screen w-full bg-cover bg-no-repeat"
 			id="About"
 		>
-			<div className="container mx-auto grid grid-cols-1 gap-x-10 gap-y-16 py-4 md:grid-cols-2">
+			<div className="md:grid-cols-2 container mx-auto grid grid-cols-1 gap-x-10 gap-y-16 py-4">
 				{/* ABOUT US Section */}
-				<div className="flex transform flex-col justify-center gap-y-6 rounded-xl border-4 border-[#ea580c] bg-white p-8 transition-transform duration-300 md:hover:scale-105">
-					<h1 className="text-center font-oswald text-3xl font-bold italic text-[#ea580c] sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl">
+				<div className="md:hover:scale-105 flex transform flex-col justify-center gap-y-6 rounded-xl border-4 border-[#ea580c] bg-white p-8 transition-transform duration-300">
+					<h1 className="sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl text-center font-oswald text-3xl font-bold italic text-[#ea580c]">
 						ABOUT US
 					</h1>
-					<p className="text-center font-mono text-lg font-bold text-[#ea580c] md:text-center">
+					<p className="md:text-center text-center font-mono text-lg font-bold text-[#ea580c]">
 						<Balancer>
 							RowdyHacks is a free, weekend-long, overnight
 							hackathon hosted at UTSA! Students can join us to
@@ -45,11 +45,11 @@ export default function About() {
 				</div>
 
 				{/* WHO CAN ATTEND Section */}
-				<div className="flex transform flex-col justify-center gap-y-6 rounded-xl border-4 border-[#ea580c] bg-white p-8 transition-transform duration-300 md:hover:scale-105">
-					<h1 className="text-center font-oswald text-3xl font-bold italic text-[#ea580c] sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl">
+				<div className="md:hover:scale-105 flex transform flex-col justify-center gap-y-6 rounded-xl border-4 border-[#ea580c] bg-white p-8 transition-transform duration-300">
+					<h1 className="sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl text-center font-oswald text-3xl font-bold italic text-[#ea580c]">
 						WHO CAN ATTEND?
 					</h1>
-					<p className="text-center font-mono text-lg font-bold text-[#ea580c] md:text-center">
+					<p className="md:text-center text-center font-mono text-lg font-bold text-[#ea580c]">
 						<Balancer>
 							We're excited to welcome hackers from all
 							disciplines, backgrounds, & technical levels!
@@ -61,15 +61,15 @@ export default function About() {
 			</div>
 
 			{/* Celebrating 10 Years Section */}
-			<div className="container mx-auto mt-16 grid grid-cols-1 gap-y-16 md:grid-cols-1">
-				<div className="flex transform flex-col justify-center gap-y-10 rounded-xl border-4 border-[#ea580c] bg-white p-8 transition-transform duration-300 md:hover:scale-105">
-					<h1 className="text-center font-oswald text-3xl font-bold italic text-[#ea580c] sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl">
+			<div className="md:grid-cols-1 container mx-auto mt-16 grid grid-cols-1 gap-y-16">
+				<div className="md:hover:scale-105 flex transform flex-col justify-center gap-y-10 rounded-xl border-4 border-[#ea580c] bg-white p-8 transition-transform duration-300">
+					<h1 className="sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl text-center font-oswald text-3xl font-bold italic text-[#ea580c]">
 						CELEBRATING 10 YEARS
 						<br />
 						OF ROWDYHACKS
 					</h1>
 					{/* Mobile: Truncated content with read more */}
-					<div className="block text-center font-mono text-lg font-bold text-[#ea580c] md:hidden">
+					<div className="md:hidden block text-center font-mono text-lg font-bold text-[#ea580c]">
 						{/* Animation for scrolling. Has to have exact heights so it knows where to animate to and from*/}
 						<Balancer>
 							<>
@@ -88,7 +88,7 @@ export default function About() {
 					</div>
 
 					{/* Desktop: Full content displayed */}
-					<div className="hidden text-center font-mono text-lg font-bold text-[#ea580c] md:block">
+					<div className="md:block hidden text-center font-mono text-lg font-bold text-[#ea580c]">
 						<Balancer>
 							This year marks a significant milestone for
 							RowdyHacks, as we celebrate 10 years of fostering