update

src/components/FileManager/index.js

@@ -10,34 +10,38 @@ import Playlist from "../Playlist";
 
 const FileManager = () => {
   return (
-    <div
+    <div style={{ backgroundColor: "#FBFBFB" }} className="flex flex-row">
-      style={{ backgroundColor: "#FBFBFB" }}
-      className="flex flex-row px-7 py-5"
-    >
       {/* ? right Section */}
       <div className="flex-1 ">
-        {/* ? breadCrumb */}
+        <div className="px-7 py-5">
-        <div className="mb-5">
+          {/* ? breadCrumb */}
-          <BreadCrumb />
+          <div className="mb-5">
+            <BreadCrumb />
+          </div>
+          {/* ? pageTitle & searchbox */}
+          <div className="flex flex-row justify-between">
+            {/* ? pageTitle */}
+            <TitleSubtitle />
+            {/* ? searchbox */}
+            <div className="self-end">
+              <SearchBox
+                borderClr={"#EEEEEE"}
+                backgroundColor={"#fff"}
+                inputWidth={"100%"}
+                placeHolderColor={"placeholder-gray-300"}
+                searchIcon={graySearchIcon}
+              />
+            </div>
+          </div>
+          {/* cardHolder */}
+          <Playlist />
         </div>
-        {/* ? pageTitle & searchbox */}
+        <div className="bg-white">
-        <div className="flex flex-row justify-between">
           {/* ? pageTitle */}
           <TitleSubtitle />
-          {/* ? searchbox */}
-          <div className="self-end">
-            <SearchBox
-              borderClr={"#EEEEEE"}
-              backgroundColor={"#fff"}
-              inputWidth={"100%"}
-              placeHolderColor={"placeholder-gray-300"}
-              searchIcon={graySearchIcon}
-            />
-          </div>
         </div>
-        {/* cardHolder */}
-        <Playlist />
       </div>
+
       {/* left Section */}
       <CardHolder />
     </div>