🎨 Styling fixes in wake of tailwindv4

src/client/components/ComicDetail/ComicDetail.tsx

@@ -404,7 +404,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
   // 2. from the CV-scraped version
 
   return (
-    <section className="container mx-auto">
+    <section className="container mx-auto px-4 sm:px-6 lg:px-8">
       <div className="section">
         {!isNil(data) && !isEmpty(data) && (
           <>

src/client/components/Dashboard/Dashboard.tsx

@@ -67,7 +67,7 @@ export const Dashboard = (): ReactElement => {
   });
 
   return (
-    <div className="container mx-auto max-w-full">
+    <div className="container mx-auto px-4 sm:px-6 lg:px-8">
       <PullList />
       {recentComics && <RecentlyImported comics={recentComics?.data.docs} />}
       {/* Wanted comics */}

src/client/components/Dashboard/PullList.tsx

@@ -99,7 +99,6 @@ export const PullList = (): ReactElement => {
 
   return (
     <>
-      <div className="content">
       <Header
           headerContent="Discover"
           subHeaderContent={
@@ -143,9 +142,8 @@ export const PullList = (): ReactElement => {
             />
           </div>
         </div>
-      </div>
+      <div className="overflow-hidden mt-3 -mx-4 sm:-mx-8 lg:-mx-16 xl:-mx-20 2xl:-mx-24 pl-4 sm:pl-8 lg:pl-16 xl:pl-20 2xl:pl-24">
         {isSuccess && !isLoading && (
-        <div className="overflow-hidden -mr-4 sm:-mr-8 lg:-mr-16 xl:-mr-20 2xl:-mr-24">
           <div className="overflow-hidden" ref={emblaRef}>
             <div className="flex">
               {map(pullList?.data.result, (issue, idx) => {
@@ -180,12 +178,10 @@ export const PullList = (): ReactElement => {
               })}
             </div>
           </div>
-        </div>
         )}
-      {isLoading ? <div>Loading...</div> : null}
-      {isError ? (
-        <div>An error occurred while retrieving the pull list.</div>
-      ) : null}
+        {isLoading && <div>Loading...</div>}
+        {isError && <div>An error occurred while retrieving the pull list.</div>}
+      </div>
     </>
   );
 };

src/client/components/Downloads/Downloads.tsx

@@ -57,7 +57,7 @@ export const Downloads = (props: IDownloadsProps): ReactElement => {
   }, [issueBundles]);
 
   return !isNil(bundles) ? (
-    <div className="container">
+    <div className="container mx-auto px-4 sm:px-6 lg:px-8">
       <section className="section">
         <h1 className="title">Downloads</h1>
         <div className="columns">

src/client/components/Import/Import.tsx

@@ -150,7 +150,7 @@ export const Import = (props: IProps): ReactElement => {
     <div>
       <section>
         <header className="bg-slate-200 dark:bg-slate-500">
-          <div className="mx-auto max-w-screen-xl px-2 py-2 sm:px-6 sm:py-8 lg:px-8 lg:py-4">
+          <div className="mx-auto max-w-screen-xl px-4 py-2 sm:px-6 sm:py-8 lg:px-8 lg:py-4">
             <div className="sm:flex sm:items-center sm:justify-between">
               <div className="text-center sm:text-left">
                 <h1 className="text-2xl font-bold text-gray-900 dark:text-white sm:text-3xl">

src/client/components/Library/Library.tsx

@@ -83,30 +83,30 @@ export const Library = (): ReactElement => {
 
   const ComicInfoXML = (value) => {
     return value.data ? (
-      <dl className="flex flex-col text-md p-3 ml-4 my-3 rounded-lg dark:bg-yellow-500 bg-yellow-300 w-max">
+      <dl className="flex flex-col text-xs sm:text-md p-2 sm:p-3 ml-0 sm:ml-4 my-3 rounded-lg dark:bg-yellow-500 bg-yellow-300 w-full sm:w-max max-w-full">
         {/* Series Name */}
-        <span className="inline-flex items-center w-fit bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
-          <span className="pr-1 pt-1">
-            <i className="icon-[solar--bookmark-square-minimalistic-bold-duotone] w-5 h-5"></i>
+        <span className="inline-flex items-center w-fit bg-slate-50 text-slate-800 text-xs font-medium px-1.5 sm:px-2 rounded-md dark:text-slate-900 dark:bg-slate-400 max-w-full overflow-hidden">
+          <span className="pr-0.5 sm:pr-1 pt-1">
+            <i className="icon-[solar--bookmark-square-minimalistic-bold-duotone] w-4 h-4 sm:w-5 sm:h-5"></i>
           </span>
-          <span className="text-md text-slate-900 dark:text-slate-900">
-            {ellipsize(value.data.series[0], 45)}
+          <span className="text-xs sm:text-md text-slate-900 dark:text-slate-900 truncate">
+            {ellipsize(value.data.series[0], 25)}
           </span>
         </span>
-        <div className="flex flex-row mt-2 gap-2">
+        <div className="flex flex-row flex-wrap mt-1 sm:mt-2 gap-1 sm:gap-2">
           {/* Pages */}
-          <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
-            <span className="pr-1 pt-1">
-              <i className="icon-[solar--notebook-minimalistic-bold-duotone] w-5 h-5"></i>
+          <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs px-1 sm:px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
+            <span className="pr-0.5 sm:pr-1 pt-1">
+              <i className="icon-[solar--notebook-minimalistic-bold-duotone] w-3.5 h-3.5 sm:w-5 sm:h-5"></i>
             </span>
-            <span className="text-md text-slate-900 dark:text-slate-900">
+            <span className="text-xs sm:text-md text-slate-900 dark:text-slate-900">
               Pages: {value.data.pagecount[0]}
             </span>
           </span>
           {/* Issue number */}
-          <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
-            <span className="pr-1 pt-1">
-              <i className="icon-[solar--hashtag-outline] w-3.5 h-3.5"></i>
+          <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs px-1 sm:px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
+            <span className="pr-0.5 sm:pr-1 pt-1">
+              <i className="icon-[solar--hashtag-outline] w-3 h-3 sm:w-3.5 sm:h-3.5"></i>
             </span>
             <span className="text-slate-900 dark:text-slate-900">
               {!isNil(value.data.number) && (
@@ -128,7 +128,7 @@ export const Library = (): ReactElement => {
           {
             header: "File Details",
             id: "fileDetails",
-            minWidth: 400,
+            minWidth: 250,
             accessorKey: "_source",
             cell: (info) => {
               return <MetadataPanel data={info.getValue()} />;
@@ -248,7 +248,7 @@ export const Library = (): ReactElement => {
     <div>
       <section>
         <header className="bg-slate-200 dark:bg-slate-500">
-          <div className="mx-auto max-w-screen-xl px-2 py-2 sm:px-6 sm:py-8 lg:px-8 lg:py-4">
+          <div className="mx-auto max-w-screen-xl px-4 py-2 sm:px-6 sm:py-8 lg:px-8 lg:py-4">
             <div className="sm:flex sm:items-center sm:justify-between">
               <div className="text-center sm:text-left">
                 <h1 className="text-2xl font-bold text-gray-900 dark:text-white sm:text-3xl">
@@ -263,7 +263,7 @@ export const Library = (): ReactElement => {
           </div>
         </header>
         {!isUndefined(searchResults?.hits) ? (
-          <div>
+          <div className="mx-auto max-w-screen-xl px-4 py-4 sm:px-6 sm:py-8 lg:px-8">
             <div>
               <T2Table
                 totalPages={searchResults.hits.total.value}

src/client/components/PullList/PullList.tsx

@@ -99,7 +99,7 @@ export const PullList = (): ReactElement => {
     [],
   );
   return (
-    <section className="container">
+    <section className="container mx-auto px-4 sm:px-6 lg:px-8">
       <div className="section">
         <div className="header-area">
           <h1 className="title">Weekly Pull List</h1>

src/client/components/Search/Search.tsx

@@ -165,7 +165,7 @@ export const Search = ({}: ISearchProps): ReactElement => {
     <div>
       <section>
         <header className="bg-slate-200 dark:bg-slate-500">
-          <div className="px-2 py-2 sm:px-6 sm:py-8 lg:px-8 lg:py-4">
+          <div className="mx-auto max-w-screen-xl px-4 py-2 sm:px-6 sm:py-8 lg:px-8 lg:py-4">
             <div className="sm:flex sm:items-center sm:justify-between">
               <div className="text-center sm:text-left">
                 <h1 className="text-2xl font-bold text-gray-900 dark:text-white sm:text-3xl">

src/client/components/VolumeDetail/VolumeDetail.tsx

@@ -266,7 +266,7 @@ const VolumeDetails = (props): ReactElement => {
     return (
       <>
         <header className="bg-slate-200 dark:bg-slate-500">
-          <div className="mx-auto max-w-screen-xl px-2 py-2 sm:px-6 sm:py-8 lg:px-8 lg:py-4">
+          <div className="mx-auto max-w-screen-xl px-4 py-2 sm:px-6 sm:py-8 lg:px-8 lg:py-4">
             <div className="sm:flex sm:items-center sm:justify-between">
               <div className="text-center sm:text-left">
                 <h1 className="text-2xl font-bold text-gray-900 dark:text-white sm:text-3xl">
@@ -280,7 +280,7 @@ const VolumeDetails = (props): ReactElement => {
             </div>
           </div>
         </header>
-        <div className="container mx-auto mt-4">
+        <div className="container mx-auto px-4 sm:px-6 lg:px-8 mt-4">
           <div>
             <div className="flex flex-row gap-4">
               {/* Volume cover */}

src/client/components/Volumes/Volumes.tsx

@@ -143,7 +143,7 @@ export const Volumes = (props): ReactElement => {
     <div>
       <section className="">
         <header className="bg-slate-200 dark:bg-slate-500">
-          <div className="mx-auto max-w-screen-xl px-2 py-2 sm:px-6 sm:py-8 lg:px-8 lg:py-4">
+          <div className="mx-auto max-w-screen-xl px-4 py-2 sm:px-6 sm:py-8 lg:px-8 lg:py-4">
             <div className="sm:flex sm:items-center sm:justify-between">
               <div className="text-center sm:text-left">
                 <h1 className="text-2xl font-bold text-gray-900 dark:text-white sm:text-3xl">
@@ -158,7 +158,7 @@ export const Volumes = (props): ReactElement => {
           </div>
         </header>
         {isSuccess ? (
-          <div>
+          <div className="mx-auto max-w-screen-xl px-4 py-4 sm:px-6 sm:py-8 lg:px-8">
             <div className="library">
               <T2Table
                 sourceData={volumes?.data.hits.hits}

src/client/components/WantedComics/WantedComics.tsx

@@ -160,7 +160,7 @@ export const WantedComics = (props): ReactElement => {
     <div className="">
       <section className="">
         <header className="bg-slate-200 dark:bg-slate-500">
-          <div className="mx-auto max-w-screen-xl px-2 py-2 sm:px-6 sm:py-8 lg:px-8 lg:py-4">
+          <div className="mx-auto max-w-screen-xl px-4 py-2 sm:px-6 sm:py-8 lg:px-8 lg:py-4">
             <div className="sm:flex sm:items-center sm:justify-between">
               <div className="text-center sm:text-left">
                 <h1 className="text-2xl font-bold text-gray-900 dark:text-white sm:text-3xl">
@@ -175,7 +175,7 @@ export const WantedComics = (props): ReactElement => {
           </div>
         </header>
         {isSuccess && wantedComics?.data.hits?.hits ? (
-          <div>
+          <div className="mx-auto max-w-screen-xl px-4 py-4 sm:px-6 sm:py-8 lg:px-8">
             <div className="library">
               <T2Table
                 sourceData={wantedComics?.data.hits.hits}

src/client/components/shared/MetadataPanel.tsx

@@ -31,11 +31,11 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
     {
       name: "rawFileDetails",
       content: () => (
-        <dl className="dark:bg-card-imported bg-card-imported dark:text-slate-800 p-3 rounded-lg">
+        <dl className="dark:bg-card-imported bg-card-imported dark:text-slate-800 p-2 sm:p-3 rounded-lg">
           <dt>
-            <p className="text-lg">{issueName}</p>
+            <p className="text-sm sm:text-lg">{issueName}</p>
           </dt>
-          <dd className="text-sm">
+          <dd className="text-xs sm:text-sm">
             is a part of{" "}
             <span className="underline">
               {inferredMetadata.issue.name}
@@ -50,31 +50,31 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
                 <span className="pr-1 pt-1">
                   <i className="icon-[solar--hashtag-outline] w-3.5 h-3.5"></i>
                 </span>
-                <span className="text-md text-slate-900 dark:text-slate-900">
+                <span className="text-xs sm:text-md text-slate-900 dark:text-slate-900">
                   {inferredMetadata.issue.number}
                 </span>
               </span>
             </dd>
           )}
-          <dd className="flex flex-row gap-2 w-max">
+          <dd className="flex flex-row flex-wrap gap-1 sm:gap-2 w-full sm:w-max">
             {/* File extension */}
-            <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
+            <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-1.5 sm:px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
               <span className="pr-1 pt-1">
-                <i className="icon-[solar--zip-file-bold-duotone] w-5 h-5"></i>
+                <i className="icon-[solar--zip-file-bold-duotone] w-4 h-4 sm:w-5 sm:h-5"></i>
               </span>
 
-              <span className="text-md text-slate-500 dark:text-slate-900">
+              <span className="text-xs sm:text-md text-slate-500 dark:text-slate-900">
                 {rawFileDetails.mimeType}
               </span>
             </span>
 
             {/* size */}
-            <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
+            <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-1.5 sm:px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
               <span className="pr-1 pt-1">
-                <i className="icon-[solar--mirror-right-bold-duotone] w-5 h-5"></i>
+                <i className="icon-[solar--mirror-right-bold-duotone] w-4 h-4 sm:w-5 sm:h-5"></i>
               </span>
 
-              <span className="text-md text-slate-500 dark:text-slate-900">
+              <span className="text-xs sm:text-md text-slate-500 dark:text-slate-900">
                 {prettyBytes(rawFileDetails.fileSize)}
               </span>
             </span>
@@ -179,14 +179,16 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
   });
 
   return (
-    <div className="flex gap-5 my-3">
+    <div className="flex flex-col sm:flex-row gap-3 sm:gap-5 my-3">
+      <div className="w-32 sm:w-56 lg:w-52 shrink-0">
         <Card
           imageUrl={url}
           orientation={"cover-only"}
           hasDetails={false}
           imageStyle={props.imageStyle}
         />
-      <div>{metadataPanel.content()}</div>
+      </div>
+      <div className="flex-1">{metadataPanel.content()}</div>
     </div>
   );
 };

src/client/components/shared/T2Table.tsx

@@ -79,7 +79,7 @@ export const T2Table = (tableOptions: T2TableProps): ReactElement => {
   });
 
   return (
-    <div className="container max-w-fit mx-14">
+    <div className="container max-w-fit">
       <div>
         <div className="flex flex-row gap-2 justify-between mt-6 mb-4">
           {/* Search bar */}

tailwind.config.ts

@@ -29,6 +29,13 @@ module.exports = {
         xl: "5rem",
         "2xl": "6rem",
       },
+      screens: {
+        sm: "640px",
+        md: "768px",
+        lg: "1024px",
+        xl: "1280px",
+        "2xl": "1280px",
+      },
     },
   },