🔧 Replaced the sliding panel component

package.json

@@ -50,6 +50,7 @@
     "react-dom": "^17.0.1",
     "react-fast-compare": "^3.2.0",
     "react-final-form": "^6.5.3",
+    "react-sliding-pane": "^7.0.0",
     "react-spinners": "^0.11.0",
     "react-table": "^7.7.0",
     "react-window-dynamic-list": "^2.3.5",
@@ -59,7 +60,7 @@
     "voca": "^1.4.0",
     "websocket": "^1.0.34",
     "ws": "^7.5.3",
-    "ws-calibre": "bluelovers/ws-calibre",
+    "ws-calibre": "https://github.com/bluelovers/ws-calibre",
     "xregexp": "^5.0.2"
   },
   "devDependencies": {

src/client/components/ComicDetail.tsx

@@ -5,8 +5,10 @@ import MatchResult from "./MatchResult";
 import ComicVineSearchForm from "./ComicVineSearchForm";
 import AcquisitionPanel from "./AcquisitionPanel";
 import DownloadsPanel from "./DownloadsPanel";
+import SlidingPane from "react-sliding-pane";
 
 import { css } from "@emotion/react";
+import "react-sliding-pane/dist/react-sliding-pane.css";
 import PuffLoader from "react-spinners/PuffLoader";
 import { isEmpty, isUndefined, isNil } from "lodash";
 import { RootState } from "threetwo-ui-typings";
@@ -338,7 +340,11 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
 
             {isComicBookMetadataAvailable ? <MetadataTabGroup /> : null}
 
-            <>
+            <SlidingPane
+              isOpen={visible}
+              onRequestClose={() => setVisible(false)}
+              width={"600px"}
+            >
               {!isEmpty(comicVineSearchQueryObject) &&
               !isUndefined(comicVineSearchQueryObject) ? (
                 <div className="card search-criteria-card">
@@ -387,7 +393,7 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
                   />
                 )}
               </div>
-            </>
+            </SlidingPane>
           </>
         )}
       </div>