fix(ff): resolve mobile right-shift and responsive layout issues

biome.json

@@ -1,10 +1,45 @@
 {
-	"$schema": "https://biomejs.dev/schemas/2.3.11/schema.json",
+	"$schema": "https://biomejs.dev/schemas/2.4.11/schema.json",
 	"files": {
 		"includes": [
-			"frontend/**",
-			"!!**/node_modules",
-			"!!**/dist"
+			"frontend/**"
 		]
+	},
+	"vcs": {
+		"enabled": true,
+		"clientKind": "git",
+		"useIgnoreFile": true
+	},
+	"formatter": {
+		"enabled": true,
+		"indentStyle": "tab"
+	},
+	"linter": {
+		"enabled": true,
+		"rules": {
+			"recommended": true,
+			"suspicious": {
+				"noArrayIndexKey": "off",
+				"noExplicitAny": "off",
+				"noImplicitAnyLet": "off",
+				"noUnknownAtRules": "off"
+			},
+			"a11y": {
+				"noSvgWithoutTitle": "off",
+				"noLabelWithoutControl": "off",
+				"useSemanticElements": "off"
+			},
+			"style": {
+				"noNonNullAssertion": "off"
+			},
+			"correctness": {
+				"useExhaustiveDependencies": "off"
+			}
+		}
+	},
+	"javascript": {
+		"formatter": {
+			"quoteStyle": "double"
+		}
 	}
 }

frontend/form/index.html

@@ -11,7 +11,7 @@
     <!-- Critical CSS inlined for faster FCP -->
     <style>
       html, body { background-color: #ffffff; margin: 0; padding: 0; }
-            #root { min-height: 100vh; }
+                  #root { min-height: 100vh; }
     </style>
     <!-- Preconnect to external origins -->
     <link rel="preconnect" href="https://fonts.googleapis.com" />

frontend/gdg-website/src/components/common/Card.tsx

@@ -55,15 +55,15 @@ export const Card: React.FC<CardProps> = ({
 	};
 
 	return (
-		// biome-ignore lint/a11y/noStaticElementInteractions: conditional role is not recognized by Biome
-		<div
+		<button
+			type={clickable ? "button" : undefined}
 			className={classNames}
-			onClick={handleClick}
-			onKeyDown={handleKeyDown}
-			role={clickable ? "button" : undefined}
-			tabIndex={clickable ? 0 : undefined}
+			onClick={clickable ? handleClick : undefined}
+			onKeyDown={clickable ? handleKeyDown : undefined}
+			disabled={!clickable}
+			aria-disabled={!clickable}
 		>
 			{children}
-		</div>
+		</button>
 	);
 };

frontend/gdg-website/src/components/common/Feedback.tsx

@@ -9,7 +9,7 @@ export const Feedback: React.FC<FeedbackProps> = ({
 }) => {
 	return (
 		<div
-			className={`flex flex-col items-center py-12 px-6 min-h-[420px] relative ${className}`}
+			className={`flex w-full max-w-full overflow-x-clip flex-col items-center py-12 px-4 sm:px-6 min-h-[420px] relative ${className}`}
 		>
 			<div className="flex gap-2 mb-8">
 				<div className="w-3 h-3 rounded-full bg-[#4285F4]" />
@@ -18,7 +18,7 @@ export const Feedback: React.FC<FeedbackProps> = ({
 				<div className="w-3 h-3 rounded-full bg-[#34A853]" />
 			</div>
 
-			<div className="bg-white border border-[#dadce0] rounded-[24px] pt-10 pb-8 px-5 sm:px-10 max-w-[540px] w-full text-center relative overflow-hidden shadow-sm">
+			<div className="bg-white border border-[#dadce0] rounded-[24px] pt-10 pb-8 px-4 sm:px-10 max-w-[540px] w-full text-center relative overflow-hidden shadow-sm">
 				<div
 					className="absolute top-0 left-0 right-0 h-1"
 					style={{
@@ -48,7 +48,7 @@ export const Feedback: React.FC<FeedbackProps> = ({
 
 				<a
 					href="mailto:gdgoncampus.yu@gmail.com"
-					className="inline-flex items-center gap-2.5 bg-[#4285F4] text-white border-none rounded-full px-7 py-[13px] text-[14px] font-medium cursor-pointer tracking-[0.1px] transition-all hover:bg-[#3367D6] hover:-translate-y-[1px] active:scale-95 mb-6"
+					className="inline-flex w-full max-w-[320px] items-center justify-center gap-2 bg-[#4285F4] text-white border-none rounded-full px-4 sm:px-7 py-[13px] text-[13px] sm:text-[14px] font-medium cursor-pointer tracking-[0.1px] transition-all hover:bg-[#3367D6] hover:-translate-y-[1px] active:scale-95 mb-6 break-all"
 				>
 					<svg viewBox="0 0 24 24" fill="none" className="w-4 h-4 shrink-0">
 						<path

frontend/gdg-website/src/components/features/FlowingMenu.tsx

@@ -66,7 +66,7 @@ interface MenuItemProps {
 }
 
 function MenuItem({
-	link: _link,
+	link,
 	text,
 	image,
 	speed,
@@ -76,7 +76,7 @@ function MenuItem({
 	borderColor,
 	fontClass,
 }: MenuItemProps) {
-	const itemRef = useRef<HTMLDivElement>(null);
+	const itemRef = useRef<HTMLAnchorElement>(null);
 	const marqueeRef = useRef<HTMLDivElement>(null);
 	const marqueeInnerRef = useRef<HTMLDivElement>(null);
 	const animationRef = useRef<gsap.core.Tween | null>(null);
@@ -212,10 +212,10 @@ function MenuItem({
 		(fontClass && !FLOWING_MENU_FONT_TW[fontClass] ? fontClass : "");
 
 	return (
-		// biome-ignore lint/a11y/noStaticElementInteractions: this wrapper handles mouse interactions for visual effects
-		<div
+		<a
+			href={link}
 			ref={itemRef}
-			className="flex-1 relative overflow-hidden text-center border-t border-solid bg-transparent first:border-t-0 pointer-events-auto"
+			className="flex-1 relative overflow-hidden text-center border-t border-solid bg-transparent first:border-t-0 pointer-events-auto block no-underline"
 			style={{ borderColor }}
 			onMouseEnter={handleMouseEnter}
 			onMouseLeave={handleMouseLeave}
@@ -247,7 +247,7 @@ function MenuItem({
 					</div>
 				</div>
 			</div>
-		</div>
+		</a>
 	);
 }
 

frontend/gdg-website/src/components/features/OrganizerCard.tsx

@@ -34,10 +34,10 @@ export const OrganizerCard: React.FC<OrganizerCardProps> = ({
 			}}
 			className="flex flex-col items-center group w-full"
 		>
-			<div className="relative mb-8">
+			<div className="relative mb-5 sm:mb-8">
 				{/* Image Container with Glow */}
 				<div className="absolute -inset-4 bg-gradient-to-tr from-purple-500/20 to-blue-500/20 rounded-full blur-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
-				<div className="w-48 h-48 md:w-64 md:h-64 rounded-full overflow-hidden border-2 border-white/10 relative z-10 group-hover:border-white/30 transition-colors duration-300">
+				<div className="w-36 h-36 sm:w-48 sm:h-48 md:w-64 md:h-64 rounded-full overflow-hidden border-2 border-white/10 relative z-10 group-hover:border-white/30 transition-colors duration-300">
 					<img
 						src={member.photoUrl}
 						alt={member.name}
@@ -47,12 +47,12 @@ export const OrganizerCard: React.FC<OrganizerCardProps> = ({
 				</div>
 			</div>
 
-			<div className="text-center space-y-1">
-				<h3 className="text-xl md:text-2xl font-bold tracking-tight text-gray-200 group-hover:text-white transition-colors">
+			<div className="text-center space-y-1 px-2">
+				<h3 className="text-lg sm:text-xl md:text-2xl font-bold tracking-tight text-gray-200 group-hover:text-white transition-colors break-words">
 					{member.name}
 				</h3>
 				{member.title && (
-					<p className="text-sm md:text-base text-gray-500 font-medium tracking-wide">
+					<p className="text-xs sm:text-sm md:text-base text-gray-500 font-medium tracking-wide">
 						{member.title}
 					</p>
 				)}
@@ -64,7 +64,7 @@ export const OrganizerCard: React.FC<OrganizerCardProps> = ({
 				rel="noopener noreferrer"
 				whileHover={{ scale: 1.1 }}
 				whileTap={{ scale: 0.9 }}
-				className="mt-6 p-2 rounded-lg bg-white/5 hover:bg-white/10 border border-white/5 hover:border-white/20 transition-all text-gray-400 hover:text-[#0077b5]"
+				className="mt-4 sm:mt-6 p-2 rounded-lg bg-white/5 hover:bg-white/10 border border-white/5 hover:border-white/20 transition-all text-gray-400 hover:text-[#0077b5]"
 				aria-label={`${member.name}'s LinkedIn`}
 			>
 				<LinkedinIcon />

frontend/gdg-website/src/components/features/TeamMemberCard.tsx

@@ -51,13 +51,13 @@ export const TeamMemberCard: React.FC<TeamMemberCardProps> = ({
 				type: "spring",
 				bounce: 0.35,
 			}}
-			className={`flex min-w-0 w-full flex-col items-center bg-transparent rounded-[var(--border-radius-md)] px-2 py-4 sm:px-4 sm:py-6 shadow-none transition-none hover:shadow-none hover:translate-y-0 hover:bg-transparent text-white ${className}`}
+			className={`flex min-w-0 w-full flex-col items-center bg-transparent rounded-[var(--border-radius-md)] px-1 py-3 sm:px-4 sm:py-6 shadow-none transition-none hover:shadow-none hover:translate-y-0 hover:bg-transparent text-white ${className}`}
 			data-role={member.role}
 		>
-			<div className="relative mb-4 group">
+			<div className="relative mb-3 sm:mb-4 group">
 				<div className="absolute -inset-2 bg-gradient-to-tr from-current to-transparent rounded-full blur-xl opacity-0 group-hover:opacity-20 transition-opacity duration-500" />
 				<div
-					className={`relative z-10 rounded-full overflow-hidden bg-black/5 border-2 border-transparent group-hover:border-current transition-colors duration-300 ${isTeamLeader ? "w-28 h-28 sm:w-32 sm:h-32 md:w-36 md:h-36" : "w-24 h-24 sm:w-28 sm:h-28 md:w-32 md:h-32"}`}
+					className={`relative z-10 rounded-full overflow-hidden bg-black/5 border-2 border-transparent group-hover:border-current transition-colors duration-300 ${isTeamLeader ? "w-24 h-24 sm:w-32 sm:h-32 md:w-36 md:h-36" : "w-20 h-20 sm:w-28 sm:h-28 md:w-32 md:h-32"}`}
 				>
 					<img
 						src={member.photoUrl}
@@ -69,25 +69,25 @@ export const TeamMemberCard: React.FC<TeamMemberCardProps> = ({
 				</div>
 			</div>
 			<h3
-				className={`font-bold text-gray-200 group-hover:text-white transition-colors mb-1 m-0 text-center mt-4 ${nameClass}`}
+				className={`font-bold text-gray-200 group-hover:text-white transition-colors mb-1 m-0 text-center mt-2 sm:mt-4 leading-tight break-words ${nameClass}`}
 			>
 				{member.name}
 			</h3>
 			<p
-				className={`${memberTitleClass} text-gray-400 group-hover:text-gray-300 transition-colors mb-2 m-0 text-center tracking-wide`}
+				className={`${memberTitleClass} text-gray-400 group-hover:text-gray-300 transition-colors mb-2 m-0 text-center tracking-wide leading-tight`}
 			>
 				{displayTitle}
 			</p>
 
 			{member.socialLinks.length > 0 && (
-				<div className="flex gap-2 mt-2">
+				<div className="flex gap-2 mt-1 sm:mt-2">
 					{member.socialLinks.map((link) => (
 						<a
 							key={link.platform}
 							href={link.url}
 							target="_blank"
 							rel="noopener noreferrer"
-							className="mt-2 p-2 rounded-lg bg-white/5 hover:bg-white/10 border border-white/5 hover:border-white/20 transition-all text-gray-400 hover:text-[#0077b5]"
+							className="mt-1 sm:mt-2 p-1.5 sm:p-2 rounded-lg bg-white/5 hover:bg-white/10 border border-white/5 hover:border-white/20 transition-all text-gray-400 hover:text-[#0077b5]"
 							aria-label={`${member.name}'s ${link.platform}`}
 						>
 							{getSocialIcon(link.platform)}

frontend/gdg-website/src/components/layout/Footer.tsx

@@ -56,9 +56,9 @@ const socialLinks = [
 export const Footer: React.FC<FooterProps> = ({ className = "" }) => {
 	return (
 		<footer
-			className={`bg-[#f8f9fa] border-t border-[#dadce0] px-4 py-2 mt-8 ${className}`}
+			className={`bg-[#f8f9fa] border-t border-[#dadce0] px-4 py-2 mt-8 w-full max-w-full overflow-x-clip ${className}`}
 		>
-			<div className="max-w-[1200px] mx-auto flex flex-col md:flex-row items-center justify-between gap-2">
+			<div className="max-w-[1200px] mx-auto flex flex-col md:flex-row items-center justify-between gap-2 w-full">
 				<div className="flex items-center gap-2 mb-2 md:mb-0">
 					<img
 						src="https://raw.githubusercontent.com/GDG-Yasar-Software-Team/core/refs/heads/main/frontend/form/public/gdg-logo.png"
@@ -70,7 +70,7 @@ export const Footer: React.FC<FooterProps> = ({ className = "" }) => {
 					</h3>
 				</div>
 
-				<div className="flex items-center scale-75 origin-center md:origin-right">
+				<div className="flex items-center scale-75 origin-center md:origin-right max-w-full overflow-x-auto md:overflow-visible">
 					<AnimatedSocialDock items={socialLinks} />
 				</div>
 			</div>