From 2e612bef5ebccbb65b687640dc93c0b98d40964f Mon Sep 17 00:00:00 2001
From: Siddhesh <siddheshgawade981@gmail.com>
Date: Sun, 27 Sep 2026 22:51:01 +0530
Subject: [PATCH] fix: resolve typing test layout overlaps

---
 src/components/layout/Footer.jsx            | 16 +++++++++++++++-
 src/components/typing/TopSettingsBar.jsx    |  2 +-
 src/components/ui/KeyboardThemeSwitcher.jsx |  2 +-
 src/pages/MainPage.jsx                      | 15 +--------------
 4 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/src/components/layout/Footer.jsx b/src/components/layout/Footer.jsx
index 0bc1b6e..75ac38e 100644
--- a/src/components/layout/Footer.jsx
+++ b/src/components/layout/Footer.jsx
@@ -3,7 +3,7 @@ import React from "react";
 export default function Footer({ isLight }) {
   return (
     <footer
-      className={`w-full text-center text-xs tracking-wide transition-colors duration-200 relative bottom-5 ${
+      className={`w-full text-center text-xs tracking-wide transition-colors duration-200 mt-4 ${
         isLight ? "text-zinc-400" : "text-[#5e5e5e]"
       }`}
     >
@@ -34,6 +34,20 @@ export default function Footer({ isLight }) {
         GitHub
       </a>
       .
+      <div className="mt-2">
+        <a
+          href="https://keebkit.vercel.app/"
+          target="_blank"
+          rel="noopener noreferrer"
+          className={`text-[11px] transition-colors ${
+            isLight
+              ? "text-zinc-400 hover:text-[#9b72ff]"
+              : "text-zinc-600 hover:text-[#9b72ff]"
+          }`}
+        >
+          Like this keyboard? Get the component on keebkit ↗
+        </a>
+      </div>
     </footer>
   );
 }
diff --git a/src/components/typing/TopSettingsBar.jsx b/src/components/typing/TopSettingsBar.jsx
index 73bdb67..b9d7de1 100644
--- a/src/components/typing/TopSettingsBar.jsx
+++ b/src/components/typing/TopSettingsBar.jsx
@@ -32,7 +32,7 @@ export default function TopSettingsBar({
 
   return (
     <div
-      className={`flex flex-wrap items-center justify-center gap-3 relative bottom-6 transition-opacity duration-300 ${
+      className={`flex flex-wrap items-center justify-center gap-3 mt-4 transition-opacity duration-300 ${
         appState === "typing" && isTypingActive
           ? "opacity-0 pointer-events-none"
           : "opacity-100"
diff --git a/src/components/ui/KeyboardThemeSwitcher.jsx b/src/components/ui/KeyboardThemeSwitcher.jsx
index fc8b2fa..7866d85 100644
--- a/src/components/ui/KeyboardThemeSwitcher.jsx
+++ b/src/components/ui/KeyboardThemeSwitcher.jsx
@@ -12,7 +12,7 @@ const THEME_LABELS = {
 
 export default function KeyboardThemeSwitcher({ value, onChange, isLight }) {
   return (
-    <div className="flex items-center justify-center mt-8">
+    <div className="flex items-center justify-center mt-8 mb-4">
       <div
         className={`flex items-center gap-1 p-1 rounded-full border ${
           isLight ? "bg-zinc-100 border-zinc-200" : "bg-white/5 border-white/10"
diff --git a/src/pages/MainPage.jsx b/src/pages/MainPage.jsx
index 1b19703..1facb62 100644
--- a/src/pages/MainPage.jsx
+++ b/src/pages/MainPage.jsx
@@ -426,20 +426,7 @@ export default function MainPage({ isLight, theme, setTheme }) {
                   onChange={(theme) => updateSetting("keyboardTheme", theme)}
                   isLight={isLight}
                 />
-                <div className="flex justify-center relative top-5">
-                  <a
-                    href="https://keebkit.vercel.app/"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className={`text-[11px] transition-colors ${
-                      isLight
-                        ? "text-zinc-400 hover:text-[#9b72ff]"
-                        : "text-zinc-600 hover:text-[#9b72ff]"
-                    }`}
-                  >
-                    Like this keyboard? Get the component on keebkit ↗
-                  </a>
-                </div>
+
               </div>
             )}
           </div>