From 3fdbaa06b5428170a08ae6c5be8a1b7ae11cb55f Mon Sep 17 00:00:00 2001
From: Aman Varshney <amanvarshney.work@gmail.com>
Date: Sun, 20 Apr 2025 11:53:58 +0530
Subject: [PATCH] hide scrollbar in command

---
 .../src/app/(home)/_components/StackArchitech.tsx  | 14 ++++++++++----
 apps/web/src/app/global.css                        |  8 ++++++++
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/app/(home)/_components/StackArchitech.tsx b/apps/web/src/app/(home)/_components/StackArchitech.tsx
index 6e98608..519de9c 100644
--- a/apps/web/src/app/(home)/_components/StackArchitech.tsx
+++ b/apps/web/src/app/(home)/_components/StackArchitech.tsx
@@ -92,7 +92,9 @@ const TechIcon = ({
 	}
 
 	return (
-		<span className={`inline-flex items-center text-lg ${className || ""}`}>{icon}</span>
+		<span className={`inline-flex items-center text-lg ${className || ""}`}>
+			{icon}
+		</span>
 	);
 };
 
@@ -921,14 +923,14 @@ const StackArchitect = () => {
 						<span className="mr-2 select-none text-green-600 dark:text-green-400">
 							$
 						</span>
-						<code className="inline-flex items-center whitespace-pre break-words text-gray-700 text-xs sm:text-sm dark:text-gray-300">
+						<code className="no-scrollbar inline-flex items-center overflow-x-auto whitespace-pre break-words text-gray-700 text-xs sm:text-sm dark:text-gray-300">
 							{command}
 						</code>
 					</div>
 					<button
 						type="button"
 						onClick={copyToClipboard}
-						className="absolute right-1 top-1/2 -translate-y-1/2 rounded p-1 text-gray-500 transition-colors hover:bg-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200"
+						className="-translate-y-1/2 absolute top-1/2 right-1 rounded p-1 text-gray-500 transition-colors hover:bg-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200"
 						title={copied ? "Copied!" : "Copy command"}
 					>
 						{copied ? (
@@ -966,7 +968,11 @@ const StackArchitect = () => {
 											<TechIcon
 												icon={tech.icon}
 												name={tech.name}
-												className={tech.icon.startsWith("/icon/") ? "h-3 w-3" : "h-3 w-3 text-xs"}
+												className={
+													tech.icon.startsWith("/icon/")
+														? "h-3 w-3"
+														: "h-3 w-3 text-xs"
+												}
 											/>
 											{tech.name}
 										</span>
diff --git a/apps/web/src/app/global.css b/apps/web/src/app/global.css
index 32b0389..6acb503 100644
--- a/apps/web/src/app/global.css
+++ b/apps/web/src/app/global.css
@@ -70,3 +70,11 @@
 		background-position: 200% 50%;
 	}
 }
+
+.no-scrollbar::-webkit-scrollbar {
+	display: none;
+}
+.no-scrollbar {
+	-ms-overflow-style: none;
+	scrollbar-width: none;
+}