fix: build issue

Author: rufilboss

netlify.toml

@@ -0,0 +1,8 @@
+[build]
+  command = "npm run build"
+  publish = "dist"
+
+[build.environment]
+  NODE_VERSION = "22"
+  NPM_FLAGS = "--legacy-peer-deps"
+

package.json

@@ -26,6 +26,5 @@
     "postcss": "^8.5.6",
     "tailwindcss": "^4.1.11",
     "vite": "^6.0.7"
-  },
-  "packageManager": "yarn@4.6.0+sha512.5383cc12567a95f1d668fbe762dfe0075c595b4bfff433be478dbbe24e05251a8e8c3eb992a986667c1d53b6c3a9c85b8398c35a960587fbd9fa3a0915406728"
+  }
 }

src/App.css

@@ -8,11 +8,24 @@
   box-sizing: border-box;
 }
 
+html,
 body {
   margin: 0;
+  padding: 0;
   min-height: 100vh;
+}
+
+body {
   background: radial-gradient(circle at top, #eef2ff, #f4f7fb 45%, #ffffff 80%);
   color: #0f172a;
+  display: flex;
+  flex-direction: column;
+}
+
+#root {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
 }
 
 .header {
@@ -26,11 +39,50 @@ body {
 .header nav ul {
   display: flex;
   gap: 1rem;
+  align-items: center;
   list-style: none;
   padding: 0;
   margin: 0;
 }
 
+.header nav ul li {
+  display: flex;
+  align-items: center;
+}
+
+.theme-toggle-item {
+  margin-left: 0.5rem;
+}
+
+.theme-toggle-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: 1px solid rgba(15, 23, 42, 0.15);
+  border-radius: 50%;
+  width: 2.5rem;
+  height: 2.5rem;
+  cursor: pointer;
+  color: inherit;
+  font-size: 1.25rem;
+  transition: all 0.2s ease;
+  padding: 0;
+}
+
+.App.dark .theme-toggle-button {
+  border-color: rgba(226, 232, 240, 0.25);
+}
+
+.theme-toggle-button:hover {
+  background: rgba(15, 23, 42, 0.05);
+  transform: scale(1.05);
+}
+
+.App.dark .theme-toggle-button:hover {
+  background: rgba(226, 232, 240, 0.1);
+}
+
 .logo {
   font-size: 1.8rem;
   margin: 0;
@@ -45,32 +97,16 @@ body {
   display: flex;
   flex-direction: column;
   gap: 2rem;
-  padding: 1.5rem clamp(1rem, 4vw, 3rem) 3rem;
+  padding: 1.5rem clamp(1rem, 4vw, 3rem) 0;
   transition: background-color 0.3s ease, color 0.3s ease;
+  padding-bottom: 0;
 }
 
 .App.dark {
   background: radial-gradient(circle at top, #0f172a, #020617 60%, #000);
   color: #e2e8f0;
 }
 
-.toggle-theme {
-  position: fixed;
-  top: 1.5rem;
-  right: 1.5rem;
-  font-size: 1.5rem;
-  color: inherit;
-  border: 1px solid rgba(15, 23, 42, 0.15);
-  border-radius: 999px;
-  padding: 0.35rem 0.85rem;
-  cursor: pointer;
-  backdrop-filter: blur(8px);
-  z-index: 10;
-}
-
-.App.dark .toggle-theme {
-  border-color: rgba(226, 232, 240, 0.25);
-}
 
 .analyzer-panel,
 .results-panel,
@@ -200,8 +236,9 @@ body {
 
 .status-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  grid-template-columns: repeat(2, 1fr);
   gap: 1.5rem;
+  max-width: 100%;
 }
 
 .status-card {
@@ -362,7 +399,9 @@ body {
   background: #0f172a;
   color: #f8fafc;
   border-radius: 1.25rem 1.25rem 0 0;
-  padding: 1.5rem;
+  padding: 1.5rem clamp(1rem, 4vw, 3rem);
+  width: 100%;
+  flex-shrink: 0;
 }
 
 .App.dark .footer {
@@ -398,6 +437,37 @@ body {
 }
 
 @media (max-width: 768px) {
+  .header {
+    flex-wrap: wrap;
+    gap: 0.75rem;
+  }
+
+  .header nav ul {
+    gap: 0.75rem;
+    flex-wrap: wrap;
+  }
+
+  .header nav ul li {
+    font-size: 0.9rem;
+  }
+
+  .theme-toggle-button {
+    width: 2.25rem;
+    height: 2.25rem;
+    font-size: 1.1rem;
+  }
+
+  .App {
+    padding: 1rem 1rem 0;
+    gap: 1.5rem;
+  }
+
+  .analyzer-panel,
+  .results-panel,
+  .preview-grid {
+    padding: 1.5rem;
+  }
+
   .input-row {
     flex-direction: column;
   }
@@ -409,4 +479,12 @@ body {
   .preview-grid__frames {
     grid-template-columns: 1fr;
   }
+
+  .status-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .footer {
+    padding: 1.25rem 1rem;
+  }
 }

src/App.jsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from "react";
 import axios from "axios";
-import { FiSun, FiMoon } from "react-icons/fi";
 import "./App.css";
 import Header from "./Components/Header";
 import Footer from "./Components/Footer";
@@ -110,10 +109,7 @@ const App = () => {
 
   return (
     <div className={`App ${theme}`}>
-      <div className="toggle-theme" onClick={handleToggleTheme}>
-        {theme === "light" ? <FiMoon /> : <FiSun />}
-      </div>
-      <Header theme={theme} />
+      <Header theme={theme} onToggleTheme={handleToggleTheme} />
       <section className="analyzer-panel">
         <form onSubmit={handleSubmit} className="url-form">
           <label htmlFor="url">Test a public URL</label>

src/Components/Header.jsx

@@ -1,8 +1,9 @@
 import { useState, useEffect } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCodeFork, faStar } from "@fortawesome/free-solid-svg-icons";
+import { FiSun, FiMoon } from "react-icons/fi";
 
-function Header({ theme }) {
+function Header({ theme, onToggleTheme }) {
   const [repoData, setRepoData] = useState({ stars: 0, forks: 0 });
 
   useEffect(() => {
@@ -44,6 +45,15 @@ function Header({ theme }) {
             />
             {repoData.forks}
           </li>
+          <li className="theme-toggle-item">
+            <button
+              className="theme-toggle-button"
+              onClick={onToggleTheme}
+              aria-label="Toggle dark/light mode"
+            >
+              {theme === "light" ? <FiMoon /> : <FiSun />}
+            </button>
+          </li>
         </ul>
       </nav>
     </header>