From e3eadcb11ad9007f662a8eacf3b3ba2001204bb9 Mon Sep 17 00:00:00 2001
From: Tony He <tony.hlp@hotmail.com>
Date: Mon, 7 Oct 2024 03:15:25 -0400
Subject: [PATCH] fix: minor styling issues

---
 apps/main/src/components/Card/Employment/index.tsx |  4 ++--
 apps/main/src/pages/index.tsx                      | 12 ++++++++----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/apps/main/src/components/Card/Employment/index.tsx b/apps/main/src/components/Card/Employment/index.tsx
index 4c43b647..c5d58656 100644
--- a/apps/main/src/components/Card/Employment/index.tsx
+++ b/apps/main/src/components/Card/Employment/index.tsx
@@ -21,7 +21,7 @@ const EmploymentCard = (props: EmploymentCardProps) => {
 
 	return (
 		<div className="flex w-full flex-col gap-y-2 rounded-md border bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800">
-			<div className="text-normal flex w-full items-center justify-between whitespace-nowrap border-b border-gray-200 px-4.5 py-2.5 font-medium tracking-wide text-gray-700 dark:border-gray-700 dark:text-white">
+			<div className="text-normal flex w-full items-center justify-between gap-x-2.5 overflow-hidden overflow-x-auto whitespace-nowrap border-b border-gray-200 px-4.5 py-2.5 font-medium tracking-wide text-gray-700 dark:border-gray-700 dark:text-white">
 				<div className="flex items-center gap-x-2">
 					{orgLogoSrc && (
 						<Image
@@ -38,7 +38,7 @@ const EmploymentCard = (props: EmploymentCardProps) => {
 					{jobType}
 				</label>
 			</div>
-			<div className="flex items-center justify-between gap-y-2.5 whitespace-nowrap px-4.5 pb-2.5 pt-1">
+			<div className="flex items-center justify-between gap-x-2.5 overflow-hidden overflow-x-auto whitespace-nowrap px-4.5 pb-2.5 pt-1">
 				<div className="text-sm tracking-wide text-gray-600 dark:text-gray-300">
 					<p>{jobTitle}</p>
 				</div>
diff --git a/apps/main/src/pages/index.tsx b/apps/main/src/pages/index.tsx
index 89e4dfd5..5386dd5e 100644
--- a/apps/main/src/pages/index.tsx
+++ b/apps/main/src/pages/index.tsx
@@ -76,15 +76,18 @@ const Home: NextPageWithLayout = () =>
 						</h1>
 						<div className="flex flex-col gap-y-1.5 break-words pb-1.5 pl-1 pt-1 text-3 font-light leading-relaxed tracking-wide text-gray-500 dark:text-gray-300 lg:text-2">
 							<p>
-								My name is Lipeng He{" "}
-								<Emphasis name="Preferred First Name">
+								My name is Lipeng He
+								<span className="hidden lg:inline"> </span>
+								<Emphasis
+									name="Preferred First Name"
+									className="hidden lg:inline-flex">
 									<b>Tony</b>
 								</Emphasis>
 								, and I am currently an 👨‍🎓 undergraduate student and researcher
 								with the{" "}
 								<Emphasis
 									name="University of Waterloo"
-									className="border-l-4 !border-l-yellow-300">
+									className="hidden border-l-4 !border-l-yellow-300 lg:inline-flex">
 									<Link
 										href="https://uwaterloo.ca"
 										target="_blank"
@@ -93,7 +96,8 @@ const Home: NextPageWithLayout = () =>
 											<Icon name="externalLink" />
 										</span>
 									</Link>
-								</Emphasis>{" "}
+								</Emphasis>
+								<span className="inline lg:hidden">University of Waterloo</span>{" "}
 								.
 							</p>
 							<p>