feat: enhance responsiveness and styling across components

Author: FgrReloaded

apps/web/src/app/(home)/_components/CommandDisplay.tsx

@@ -30,7 +30,7 @@ export function CommandDisplay({ command }: CommandDisplayProps) {
 						<Copy className="w-4 h-4 text-gray-400" />
 					)}
 				</button>
-				<pre className="pr-12">{command}</pre>
+				<pre className="pr-12 max-sm:text-xs">{command}</pre>
 			</div>
 		</div>
 	);

apps/web/src/app/(home)/_components/CustomizableStack.tsx

@@ -7,7 +7,7 @@ import {
 	useEdgesState,
 	useNodesState,
 } from "@xyflow/react";
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { TechSelector } from "./TechSelector";
 import "@xyflow/react/dist/style.css";
 import { initialNodes } from "@/lib/constant";
@@ -47,6 +47,23 @@ const CustomizableStack = () => {
 		orm: "drizzle",
 		auth: "better-auth",
 	});
+	const [windowSize, setWindowSize] = useState("lg");
+
+	useEffect(() => {
+		const handleResize = () => {
+			if (window.innerWidth < 1024 && window.innerWidth > 768) {
+				setWindowSize("md");
+			} else if (window.innerWidth < 768) {
+				setWindowSize("sm");
+			} else {
+				setWindowSize("lg");
+			}
+		};
+
+		handleResize();
+		window.addEventListener("resize", handleResize);
+		return () => window.removeEventListener("resize", handleResize);
+	}, []);
 
 	// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
 	const cleanupConnectionsByCategory = useCallback((category: string) => {
@@ -262,17 +279,17 @@ const CustomizableStack = () => {
 	return (
 		<div className="relative w-full max-w-5xl mx-auto z-50 mt-24">
 			<TechSelector onSelect={handleTechSelect} activeNodes={activeNodes} />
-			<div className="absolute -top-16 left-1/2 -translate-x-1/2 z-50 w-96">
+			<div className="absolute -top-16 left-1/2 max-sm:left-[60%] -translate-x-1/2 z-50 w-96">
 				<CommandDisplay command={generateCommand()} />
 			</div>
-			<div className="bg-gray-950/10 lg:p-4 p-1 absolute lg:top-4 top-2 lg:right-4 right-2 z-50 w-80 rounded-xl border border-gray-800 backdrop-blur-3xl">
+			<div className="max-sm:hidden bg-gray-950/10 lg:p-4 p-1 absolute lg:top-4 top-2 lg:right-4 right-2 z-50 w-80 rounded-xl border border-gray-800 backdrop-blur-3xl">
 				<div className="lg:text-sm text-xs text-gray-300 text-center">
 					Select technologies from the left panel to customize your stack. The
 					graph will automatically update connections.
 				</div>
 			</div>
 			<div className="absolute inset-0 backdrop-blur-3xl bg-gradient-to-r from-blue-500/10 via-purple-500/10 to-pink-500/10 rounded-xl" />
-			<div className="h-[600px] lg:pl-28 relative backdrop-blur-sm bg-gray-950/50 rounded-xl overflow-hidden border border-gray-800">
+			<div className="h-[600px] lg:pl-28 max-sm:pt-36  relative backdrop-blur-sm bg-gray-950/50 rounded-xl overflow-hidden border border-gray-800">
 				<ReactFlow
 					nodes={nodes}
 					edges={edges}
@@ -281,8 +298,8 @@ const CustomizableStack = () => {
 					onConnect={onConnect}
 					nodeTypes={nodeTypes}
 					fitView
-					minZoom={1}
-					maxZoom={1}
+					// minZoom={1}
+					maxZoom={windowSize === "sm" ? 0.6 : windowSize === "md" ? 0.6 : 1}
 					zoomOnScroll={false}
 					zoomOnPinch={false}
 					preventScrolling={false}

apps/web/src/app/(home)/_components/TechConstellation.tsx

@@ -153,7 +153,7 @@ const TechConstellation = () => {
 	return (
 		<div
 			ref={containerRef}
-			className="relative z-50 w-full h-[90vh] bg-gradient-to-b from-transparent mt-8 via-gray-950 to-transparent overflow-hidden flex items-center justify-center"
+			className="relative z-50 w-full h-[90vh] bg-gradient-to-b from-transparent mt-8 via-gray-950 to-transparent overflow-auto flex items-center justify-center "
 		>
 			<div
 				ref={centerRef}

apps/web/src/app/(home)/_components/TechSelector.tsx

@@ -26,7 +26,7 @@ interface TechSelectorProps {
 
 export function TechSelector({ onSelect, activeNodes }: TechSelectorProps) {
 	return (
-		<div className="absolute top-4 left-4 z-50 space-y-4 bg-gray-950/10 p-4 rounded-xl border border-gray-800 backdrop-blur-3xl">
+		<div className="absolute max-sm:w-11/12 top-4 left-4 z-50 sm:space-y-4 space-y-2 bg-gray-950/10 sm:p-4 px-4 py-2 rounded-xl border border-gray-800 backdrop-blur-3xl">
 			<div className="text-sm font-medium text-gray-200">Customize Stack</div>
 			{Object.entries(techOptions).map(([category, options]) => (
 				<div key={category} className="space-y-2">

apps/web/src/app/(home)/_components/Terminal.tsx

@@ -22,27 +22,27 @@ const TerminalDisplay = () => {
   `;
 
 	return (
-		<div className="max-w-6xl mx-auto p-6 mt-12 relative z-50">
+		<div className="w-[95%] max-w-6xl mx-auto p-2 sm:p-6 mt-6 sm:mt-12 relative z-50">
 			<div className="bg-gray-900/30 backdrop-blur-3xl rounded-lg shadow-xl overflow-hidden">
-				<div className="bg-gray-800/30 backdrop-blur-3xl px-4 py-2 flex items-center">
-					<div className="flex space-x-2">
-						<div className="w-3 h-3 rounded-full bg-red-500" />
-						<div className="w-3 h-3 rounded-full bg-yellow-500" />
-						<div className="w-3 h-3 rounded-full bg-green-500" />
+				<div className="bg-gray-800/30 backdrop-blur-3xl px-2 sm:px-4 py-1 sm:py-2 flex items-center">
+					<div className="flex space-x-1 sm:space-x-2">
+						<div className="w-2 h-2 sm:w-3 sm:h-3 rounded-full bg-red-500" />
+						<div className="w-2 h-2 sm:w-3 sm:h-3 rounded-full bg-yellow-500" />
+						<div className="w-2 h-2 sm:w-3 sm:h-3 rounded-full bg-green-500" />
 					</div>
 				</div>
 
-				<div className="p-4 font-mono text-sm flex flex-col">
-					<div className="flex items-center text-gray-300 mb-4">
+				<div className="p-2 sm:p-4 font-mono text-xs sm:text-sm flex flex-col">
+					<div className="flex items-center text-gray-300 mb-2 sm:mb-4 overflow-x-auto">
 						<span className="text-green-400">➜</span>
-						<span className="text-blue-400 ml-2">~</span>
-						<span className="ml-2">$</span>
-						<span className="ml-2 text-white">
+						<span className="text-blue-400 ml-1 sm:ml-2">~</span>
+						<span className="ml-1 sm:ml-2">$</span>
+						<span className="ml-1 sm:ml-2 max-sm:text-xs text-white">
 							npx create-better-t-stack@latest
 						</span>
 					</div>
 
-					<pre className="text-blue-400 whitespace-pre overflow-x-auto px-8">
+					<pre className="text-blue-400 whitespace-pre sm:overflow-x-auto px-8 max-sm:scale-50 max-sm:origin-left">
 						{TITLE_TEXT}
 					</pre>
 				</div>

apps/web/src/app/(home)/page.tsx

@@ -20,7 +20,7 @@ const poppins = Poppins({
 export default function HomePage() {
 	return (
 		<main
-			className="min-h-screen flex flex-col items-center justify-start p-8 pt-20"
+			className="min-h-screen flex flex-col items-center justify-start sm:p-8 p-4 pt-20"
 			style={poppins.style}
 		>
 			<BackgroundGradients />
@@ -66,19 +66,19 @@ export default function HomePage() {
 
 			<div className="w-full max-w-6xl mx-auto space-y-12 mt-12 relative z-50">
 				<div className="text-center space-y-6 relative z-10">
-					<h2 className="text-4xl md:text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-slate-700 via-gray-100 to-stone-600 pb-2">
+					<h2 className="sm:text-4xl text-3xl md:text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-slate-700 via-gray-100 to-stone-600 pb-2">
 						A Symphony of Modern Tech
 					</h2>
 					<div className="space-y-4 max-w-3xl mx-auto">
-						<p className="text-xl text-gray-300 leading-relaxed">
+						<p className="sm:text-xl text-gray-300 leading-relaxed">
 							Carefully orchestrated stack of{" "}
 							<span className="text-blue-400 font-semibold">
 								cutting-edge technologies
 							</span>
 							, working in perfect harmony to deliver an exceptional development
 							experience.
 						</p>
-						<div className="flex flex-wrap justify-center gap-4 text-sm text-gray-400">
+						<div className="flex flex-wrap justify-center sm:gap-4 gap-2 sm:text-sm text-xs text-gray-400">
 							<span className="px-3 py-1 bg-gray-800/50 rounded-full hover:bg-gray-800 transition-colors">
 								End-to-end Type Safety
 							</span>

apps/web/src/app/global.css

@@ -65,3 +65,24 @@
 		background-position: 200% 50%;
 	}
 }
+
+/* custom scrollbar */
+::-webkit-scrollbar {
+	width: 8px;
+}
+
+::-webkit-scrollbar-track {
+	background: rgba(16, 0, 16, 0.493);
+	border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+	background: linear-gradient(45deg, #666, #888);
+	border-radius: 4px;
+	border: 2px solid #1a1a1a;
+	transition: background 0.3s ease;
+}
+
+::-webkit-scrollbar-thumb:hover {
+	background: linear-gradient(45deg, #888, #aaa);
+}