fix: redesing and add features

src/App.vue

@@ -1,36 +1,64 @@
 <script setup>
-
-import { ref } from 'vue'
-
-import Pokedex from './components/Pokedex.vue'
-import About from './components/About.vue'
-import Page404 from './components/404.vue'
-
-const pokemonId = ref(null)
-
-const isPokemon = ref(false)
-const isAbout = ref(false)
-const is404 = ref(false)
-
-
-function getPage() {
-    const url = window.location.href;
-    const page = url.split("/").slice(-1)[0];
-
-    if (page > 0 && page < 1006) {
-        isPokemon.value = true
-        pokemonId.value = parseInt(page)
-    } else if (page === 'about') {
-        isAbout.value = true;
-    } else {
-        is404.value = true
-    }
-}
-
-getPage()
-
+import PokedexChassis from './components/layout/PokedexChassis.vue'
 </script>
 
 <template>
-    <router-view />
+  <PokedexChassis />
 </template>
+
+<style>
+body {
+    margin: 0;
+    overflow: hidden;
+    background-color: #18181b; 
+}
+
+/* 
+   CRITICAL: Override child components that rely on screen dimensions 
+   to fit within the Pokedex screen container.
+*/
+.pokedex-screen .h-screen, 
+.pokedex-screen .min-h-screen {
+    height: 100% !important;
+    min-height: 100% !important;
+    width: 100% !important;
+}
+
+.pokedex-screen .w-screen {
+    width: 100% !important;
+    padding: 0 !important; /* Reset padding to context */
+}
+
+.pokedex-screen .lg\:p-12 {
+    padding: 1.5rem !important; /* Scale down padding */
+}
+
+.pokedex-screen .fixed {
+    position: absolute !important; /* Contain fixed elements like headers */
+}
+
+/* Custom Scrollbar for inside the screen */
+.pokedex-screen ::-webkit-scrollbar {
+    width: 4px;
+    background: transparent;
+}
+.pokedex-screen ::-webkit-scrollbar-thumb {
+    background: #dc0a2d;
+    border-radius: 2px;
+}
+
+/* Reusable custom scrollbar class for content areas */
+.custom-scrollbar::-webkit-scrollbar {
+    width: 4px;
+}
+.custom-scrollbar::-webkit-scrollbar-track {
+    background: transparent;
+}
+.custom-scrollbar::-webkit-scrollbar-thumb {
+    background: #3f3f46;
+    border-radius: 4px;
+}
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+    background: #52525b;
+}
+</style>