Integrated footer into responsiveness layout structure

Author: Fector101

docs/website/src/App.tsx

@@ -19,26 +19,29 @@ import HomePage from "./pages/HomePage.tsx";
 import Footer from "./ui/Footer/Footer.tsx";
 
 function App() {
-    const [version,setVersion]=useState(1.59)
+    const [version, setVersion] = useState(1.59)
     return (
         <>
             <Toaster position="top-right" />
-            <Header version={version} setVersion={setVersion}/>
-            <main className="flex">
+            <Header version={version} setVersion={setVersion} />
+            <main className="flex fd-colum">
                 <SiteOverview version={version} />
-                <Routes>
-                    <Route path="/" element={<HomePage />} />
-                    <Route path="/getting-started" element={<MainPage />} />
-                    <Route path="/components" element={<ComponentsPage version={version} />} />
-                    <Route path="/advanced-methods" element={<AdvancedMethodsPage version={version} />} />
-                    <Route path="/reference" element={<ReferencePage version={version} />} />
-                    <Route path="/extras" element={<ExtrasPage />} />
-                    {/* <Route path="/versions" element={<p className="main-page page">Will contain list of versions from 1.58+</p>} /> */}
-                    <Route path="/versions" element={<VersionsPage setVersion={setVersion} />} />
-                    <Route path="*" element={<p className="page">Page Not Found</p>} />
-                </Routes>
+                <main className="flex fd-column width100per">
+                    <Routes>
+                        <Route path="/" element={<HomePage />} />
+                        <Route path="/getting-started" element={<MainPage />} />
+                        <Route path="/components" element={<ComponentsPage version={version} />} />
+                        <Route path="/advanced-methods" element={<AdvancedMethodsPage version={version} />} />
+                        <Route path="/reference" element={<ReferencePage version={version} />} />
+                        <Route path="/extras" element={<ExtrasPage />} />
+                        {/* <Route path="/versions" element={<p className="main-page page">Will contain list of versions from 1.58+</p>} /> */}
+                        <Route path="/versions" element={<VersionsPage setVersion={setVersion} />} />
+                        <Route path="*" element={<p className="page">Page Not Found</p>} />
+                    </Routes>
+                    <Footer />
+                </main>
+
             </main>
-            <Footer/>
             <Analytics />
         </>
     )

docs/website/src/assets/css/app.css

@@ -59,12 +59,13 @@ body>#root {
 .page {
     padding-block: 20px;
     width: calc(100% - var(--overview-width));
-    margin-left: auto;
-    margin:auto;
-    /* margin-right: 2px; */
-    /* flex: 1; */
+    margin: auto;
 }
 
+/* margin-left: auto; */
+/* margin-right: 2px; */
+/* flex: 1; */
+
 .next-page-btns-box {
     padding: 0 20px;
     margin-top: 20px;
@@ -153,9 +154,9 @@ body>#root {
 
 
 @media screen and (max-width:1000px) {
-    body>#root {
-        /* --overview-width: 0; */
-    }
+    /*body>#root {
+         --overview-width: 0; 
+    }*/
 
     .page {
         width: 100%;
@@ -169,19 +170,22 @@ body>#root {
         width: 100%;
         font-size: 14px;
     }
-    .next-page-btns-box{
+
+    .next-page-btns-box {
         overflow: hidden;
         /* background: #000; */
         padding: 0;
         gap: 5px;
     }
+
     .next-page-btn {
         padding: 8px;
         gap: 5px;
     }
-    .next-page-btn p{
+
+    .next-page-btn p {
         font-size: 13px;
         /* white-space: nowrap; */
     }
-    
+
 }

docs/website/src/ui/Footer/footer.css

@@ -4,6 +4,7 @@ footer{
     font-size: 13px;
     gap: 5px;
     color: white;
+    width: 100%;
 }
 footer .support-links-box{
     align-self: center;