height issue fix

adrianhajdin · Sep 16, 2022 · 98f5162 · 98f5162
1 parent 6f2d75e
commit 98f5162
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 6 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -13,8 +13,8 @@ const App = () => {
       <div className="flex-1 flex flex-col bg-gradient-to-br from-black to-[#121286]">
         <Searchbar />
 
-        <div className="px-6 flex xl:flex-row flex-col-reverse">
-          <div className="flex-1 pb-10 h-[90vh] overflow-y-scroll hide-scrollbar">
+        <div className="px-6 md:h-[calc(100vh-72px)] h-screen overflow-y-scroll hide-scrollbar flex xl:flex-row flex-col-reverse">
+          <div className="flex-1 h-fit pb-20">
             <Routes>
               <Route path="/" element={<Home />} />
               <Route path="/artists" element={<Artists />} />
@@ -25,7 +25,9 @@ const App = () => {
               <Route path="/search/:searchTerm" element={<Search />} />
             </Routes>
           </div>
-          <TopPlay />
+          <div className="xl:sticky relative top-0 h-fit">
+            <TopPlay />
+          </div>
         </div>
 
       </div>

diff --git a/src/components/Searchbar.jsx b/src/components/Searchbar.jsx
@@ -14,7 +14,7 @@ const Searchbar = () => {
   };
 
   return (
-    <form onSubmit={handleSubmit} className="p-6 text-gray-400 focus-within:text-gray-600">
+    <form onSubmit={handleSubmit} className="p-2 text-gray-400 focus-within:text-gray-600">
       <label htmlFor="search-field" className="sr-only">
         Search all files
       </label>
@@ -23,7 +23,7 @@ const Searchbar = () => {
         <input
           name="search-field"
           id="search-field"
-          className="flex-1 bg-transparent border-none placeholder-gray-500 outline-none text-base text-white ml-3"
+          className="flex-1 bg-transparent border-none placeholder-gray-500 outline-none text-base text-white p-4"
           placeholder="Search"
           type="search"
           value={searchTerm}

diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
@@ -14,7 +14,7 @@ const Sidebar = () => {
 
   return (
     <>
-      <div className="h-screen md:flex hidden flex-col w-[240px] py-10 px-4 bg-[#191624]">
+      <div className="md:flex hidden flex-col w-[240px] py-10 px-4 bg-[#191624]">
         <div className="mt-4 flex flex-col">
           {links.map((item) => (
             <NavLink