Fixed text sizing in user dashboard

acmutsa · Oct 7, 2024 · b3c1e24 · b3c1e24
1 parent 089490c
commit b3c1e24
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
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/tailwind.config.js b/apps/web/tailwind.config.js
@@ -10,6 +10,9 @@ module.exports = {
 		"./src/**/*.{ts,tsx}",
 	],
 	theme: {
+		screens: {
+			xs: "465px",
+		},
 		container: {
 			center: true,
 			padding: "2rem",