style: add widths and heights to various components

src/App.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from "kaioken"
 import { useStorage } from "./hooks/storageStores"
 import { useStationsStore } from "./hooks/stationStores"
-import { MusicPlayer, Popular, LocalRadio, RecommendedRadio, Navigation } from "./components"
+import { Popular, Navigation } from "./components"
 
 export function App() {
   const { getStationsFile } = useStorage()
@@ -32,14 +32,15 @@ export function App() {
 
 
       {/* Right Section __________*/}
-      <div className="flex-1 min-h-[98vh] max-h-[98vh] flex h-0 p-2">
+      <div className="flex-1 min-h-[98vh] max-h-[98vh] flex h-0 p-2 min-w-0">
         <div className="bg-gray-200 w-full border rounded-xl p-4 flex-col flex gap-4">
-          <MusicPlayer />
+          {/*<MusicPlayer />*/}
           <Popular />
           {/* Bottom Section __________*/}
-          <div id="bottom" className="flex-1 rounded-xl flex flex-row gap-4">
+
-            <LocalRadio />
+          <div id="bottom" className="flex-1 rounded-xl flex flex-row gap-4 bg-white">
-            <RecommendedRadio />
+            {/*<LocalRadio />*/}
+            {/*<RecommendedRadio />*/}
           </div>
         </div>
       </div>

src/styles.css

@@ -13,12 +13,12 @@
 }
 
 html,
-body {
+body,
+#root {
   margin: 0 !important;
-}
+  overlay: hidden;
-
+  max-width: 100vw;
-body {
+  max-height: 100vh;
-  @apply flex flex-col;
 }
 
 .paper {