📏 Fixes for responsiveness

src/client/components/ComicDetail/ComicDetail.tsx

@@ -34,6 +34,11 @@ import { styled } from "styled-components";
 import { COMICVINE_SERVICE_URI } from "../../constants/endpoints";
 import { refineQuery } from "filename-parser";
 
+// overridden <SlidingPanel> with some styles - moved outside component to prevent recreation
+const StyledSlidingPanel = styled(SlidingPane)`
+  background: #ccc;
+`;
+
 interface ComicDetailProps {
   data: {
     _id: string;
@@ -98,11 +103,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
     // );
   }, []);
 
-  // overridden <SlidingPanel> with some styles
-  const StyledSlidingPanel = styled(SlidingPane)`
-    background: #ccc;
-  `;
-  const afterOpenModal = useCallback((things) => {
+  const afterOpenModal = useCallback((things: any) => {
     // references are now sync'd and can be accessed.
     // subtitle.style.color = "#f00";
     console.log("kolaveri", things);

src/client/components/ComicDetail/Tabs/ArchiveOperations.tsx

@@ -14,34 +14,41 @@ import { useStore } from "../../../store";
 import { useShallow } from "zustand/react/shallow";
 import { escapePoundSymbol } from "../../../shared/utils/formatting.utils";
 
-export const ArchiveOperations = (props): ReactElement => {
+export const ArchiveOperations = (props: { data: any }): ReactElement => {
   const { data } = props;
 
-  const { socketIOInstance } = useStore(
-    useShallow((state) => ({
-      socketIOInstance: state.socketIOInstance,
-    })),
-  );
+  const getSocket = useStore((state) => state.getSocket);
   const queryClient = useQueryClient();
   // sliding panel config
   const [visible, setVisible] = useState(false);
   const [slidingPanelContentId, setSlidingPanelContentId] = useState("");
   // current image
-  const [currentImage, setCurrentImage] = useState([]);
-  const [uncompressedArchive, setUncompressedArchive] = useState([]);
-  const [imageAnalysisResult, setImageAnalysisResult] = useState({});
+  const [currentImage, setCurrentImage] = useState<string>("");
+  const [uncompressedArchive, setUncompressedArchive] = useState<string[]>([]);
+  const [imageAnalysisResult, setImageAnalysisResult] = useState<any>({});
   const [shouldRefetchComicBookData, setShouldRefetchComicBookData] =
     useState(false);
-  const constructImagePaths = (data): Array<string> => {
+  const constructImagePaths = (data: string[]): Array<string> => {
     return data?.map((path: string) =>
       escapePoundSymbol(encodeURI(`${LIBRARY_SERVICE_HOST}/${path}`)),
     );
   };
 
   // Listen to the uncompression complete event and orchestrate the final payload
-  socketIOInstance.on("LS_UNCOMPRESSION_JOB_COMPLETE", (data) => {
+  useEffect(() => {
+    const socket = getSocket("/");
+    if (!socket) return;
+
+    const handleUncompressionComplete = (data: any) => {
       setUncompressedArchive(constructImagePaths(data?.uncompressedArchive));
-  });
+    };
+
+    socket.on("LS_UNCOMPRESSION_JOB_COMPLETE", handleUncompressionComplete);
+
+    return () => {
+      socket.off("LS_UNCOMPRESSION_JOB_COMPLETE", handleUncompressionComplete);
+    };
+  }, [getSocket]);
 
   useEffect(() => {
     let isMounted = true;
@@ -58,7 +65,7 @@ export const ArchiveOperations = (props): ReactElement => {
             },
             transformResponse: async (responseData) => {
               const parsedData = JSON.parse(responseData);
-              const paths = parsedData.map((pathObject) => {
+              const paths = parsedData.map((pathObject: any) => {
                 return `${pathObject.containedIn}/${pathObject.name}${pathObject.extension}`;
               });
               const uncompressedArchive = constructImagePaths(paths);
@@ -131,7 +138,7 @@ export const ArchiveOperations = (props): ReactElement => {
   }
 
   // sliding panel init
-  const contentForSlidingPanel = {
+  const contentForSlidingPanel: Record<string, { content: () => JSX.Element }> = {
     imageAnalysis: {
       content: () => {
         return (
@@ -143,7 +150,7 @@ export const ArchiveOperations = (props): ReactElement => {
               </pre>
             ) : null}
             <pre className="font-hasklig mt-3 text-sm">
-              {JSON.stringify(imageAnalysisResult.analyzedData, null, 2)}
+              {JSON.stringify(imageAnalysisResult?.analyzedData, null, 2)}
             </pre>
           </div>
         );
@@ -152,7 +159,7 @@ export const ArchiveOperations = (props): ReactElement => {
   };
 
   // sliding panel handlers
-  const openImageAnalysisPanel = useCallback((imageFilePath) => {
+  const openImageAnalysisPanel = useCallback((imageFilePath: string) => {
     setSlidingPanelContentId("imageAnalysis");
     analyzeImage(imageFilePath);
     setCurrentImage(imageFilePath);

src/client/components/ComicDetail/Tabs/ComicInfoXML.tsx

@@ -1,18 +1,18 @@
 import { isUndefined } from "lodash";
 import React, { ReactElement } from "react";
 
-export const ComicInfoXML = (data): ReactElement => {
+export const ComicInfoXML = (data: { json: any }): ReactElement => {
   const { json } = data;
   return (
     <div className="flex md:w-4/5 lg:w-78">
       <dl className="dark:bg-yellow-600 bg-yellow-200 p-3 rounded-lg">
         <dt>
-          <p className="text-lg">{json.series[0]}</p>
+          <p className="text-lg">{json.series?.[0]}</p>
         </dt>
         <dd className="text-sm">
           published by{" "}
           <span className="underline">
-            {json.publisher[0]}
+            {json.publisher?.[0]}
             <i className="icon-[solar--arrow-right-up-outline] w-4 h-4" />
           </span>
         </dd>
@@ -30,8 +30,9 @@ export const ComicInfoXML = (data): ReactElement => {
               </span>
             </dd>
           )}
-          <dd className="my-2">
           {/* Genre */}
+          {!isUndefined(json.genre) && (
+            <dd className="my-2">
               <span className="inline-flex items-center bg-slate-50 text-slate-800 text-sm font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
                 <span className="pr-1 pt-1">
                   <i className="icon-[solar--sticker-smile-circle-bold-duotone] w-5 h-5"></i>
@@ -42,6 +43,7 @@ export const ComicInfoXML = (data): ReactElement => {
                 </span>
               </span>
             </dd>
+          )}
         </span>
 
         <dd className="my-1">
@@ -52,12 +54,14 @@ export const ComicInfoXML = (data): ReactElement => {
             </span>
           )}
         </dd>
+        {!isUndefined(json.notes) && (
           <dd>
             {/* Notes */}
             <span className="text-sm text-slate-500 dark:text-slate-900">
               {json.notes[0]}
             </span>
           </dd>
+        )}
       </dl>
     </div>
   );

src/client/components/Dashboard/RecentlyImported.tsx

@@ -10,6 +10,7 @@ import {
 } from "../../shared/utils/metadata.utils";
 import { LIBRARY_SERVICE_HOST } from "../../constants/endpoints";
 import Header from "../shared/Header";
+import useEmblaCarousel from "embla-carousel-react";
 
 type RecentlyImportedProps = {
   comics: any;
@@ -19,6 +20,15 @@ export const RecentlyImported = (
   comics: RecentlyImportedProps,
 ): ReactElement => {
   console.log(comics);
+  
+  // embla carousel
+  const [emblaRef, emblaApi] = useEmblaCarousel({
+    loop: false,
+    align: "start",
+    containScroll: "trimSnaps",
+    slidesToScroll: 1,
+  });
+
   return (
     <div>
       <Header
@@ -26,7 +36,9 @@ export const RecentlyImported = (
         subHeaderContent="Recent Library activity such as imports, tagging, etc."
         iconClassNames="fa-solid fa-binoculars mr-2"
       />
-      <div className="grid grid-cols-5 gap-6 mt-3">
+      <div className="overflow-hidden -mr-4 sm:-mr-8 lg:-mr-16 xl:-mr-20 2xl:-mr-24 mt-3">
+        <div className="overflow-hidden" ref={emblaRef}>
+          <div className="flex">
             {comics?.comics.map(
           (
             {
@@ -56,9 +68,12 @@ export const RecentlyImported = (
               !isUndefined(comicvine) &&
               !isUndefined(comicvine.volumeInformation);
             return (
+              <div
+                key={idx}
+                className="flex-[0_0_200px] min-w-0 sm:flex-[0_0_220px] md:flex-[0_0_240px] lg:flex-[0_0_260px] xl:flex-[0_0_280px] pr-[15px]"
+              >
                 <Card
                   orientation="vertical-2"
-                key={idx}
                   imageUrl={url}
                   title={inferredMetadata.issue.name}
                   hasDetails
@@ -99,16 +114,17 @@ export const RecentlyImported = (
                   <div className="sm:inline-flex sm:shrink-0 sm:items-center sm:gap-2">
                     {/* ComicInfo.xml presence */}
                     {!isNil(comicInfo) && !isEmpty(comicInfo) && (
-                      <div mt-1>
+                      <div className="mt-1">
                         <i className="h-7 w-7 icon-[solar--code-file-bold-duotone] text-yellow-500 dark:text-yellow-300"></i>
                       </div>
                     )}
                     {/* ComicVine metadata presence */}
                     {isComicVineMetadataAvailable && (
-                      <span className="w-7 h-7">
+                      <span className="inline-block w-6 h-6 md:w-7 md:h-7 flex-shrink-0">
                         <img
                           src="/src/client/assets/img/cvlogo.svg"
                           alt={"ComicVine metadata detected."}
+                          className="w-full h-full object-contain"
                         />
                       </span>
                     )}
@@ -121,10 +137,13 @@ export const RecentlyImported = (
                   )}
                 </div>
               </Card>
+              </div>
             );
           },
         )}
           </div>
         </div>
+      </div>
+    </div>
   );
 };

src/client/components/Dashboard/WantedComicsList.tsx

@@ -102,7 +102,7 @@ export const WantedComicsList = ({
                     <img
                       src="/src/client/assets/img/cvlogo.svg"
                       alt={"ComicVine metadata detected."}
-                      className="w-7 h-7"
+                      className="inline-block w-6 h-6 md:w-7 md:h-7 flex-shrink-0 object-contain"
                     />
                   )}
                   {!isEmpty(locg) && (

src/client/components/Library/LibraryGrid.tsx

@@ -72,8 +72,11 @@ export const LibraryGrid = (libraryGridProps: ILibraryGridProps) => {
               >
                 <div className="content is-flex is-flex-direction-row">
                   {!isEmpty(sourcedMetadata.comicvine) && (
-                    <span className="icon cv-icon is-small">
-                      <img src="/src/client/assets/img/cvlogo.svg" />
+                    <span className="icon cv-icon is-small inline-block w-6 h-6 md:w-7 md:h-7 flex-shrink-0">
+                      <img
+                        src="/src/client/assets/img/cvlogo.svg"
+                        className="w-full h-full object-contain"
+                      />
                     </span>
                   )}
                   {isNil(rawFileDetails) && (