Improved compatibility on smaller devices

src/pages/library/items/[slug].tsx

@@ -109,13 +109,15 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
   const contentPanel = (
     <ContentPanel width={ContentPanelWidthSizes.large}>
       <div className="grid place-items-center gap-12">
-        <div className="drop-shadow-dark-xl w-96 max-w-full mb-16">
+        <div className="drop-shadow-dark-xl w-full h-[50vh] mobile:h-[80vh] mb-16 ">
           {item.thumbnail.data ? (
             <Image
               src={getAssetURL(item.thumbnail.data.attributes.url)}
               alt={item.thumbnail.data.attributes.alternativeText}
               width={item.thumbnail.data.attributes.width}
               height={item.thumbnail.data.attributes.height}
+              layout="fill"
+              objectFit="contain"
             />
           ) : (
             <div className="w-full aspect-[21/29.7] bg-light rounded-xl"></div>
@@ -131,7 +133,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
               <div className="grid place-items-center">
                 <p>{langui.global_subitem_of}</p>
                 <Button
-                  href={`/library/${item.subitem_of.data[0].attributes.slug}`}
+                  href={`/library/items/${item.subitem_of.data[0].attributes.slug}`}
                 >
                   {prettyinlineTitle(
                     "",
@@ -217,7 +219,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
                 ""
               )}
 
-              {item.release_date ? (
+              {item.price ? (
                 <div className="grid place-items-center">
                   <h3 className="text-xl">{langui.global_price}</h3>
                   <p>{prettyPrice(item.price)}</p>
@@ -230,14 +232,14 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
               <>
                 <h3 className="text-xl">{langui.library_item_physical_size}</h3>
                 <div className="grid grid-flow-col w-full place-content-between">
-                  <div className="grid place-items-start grid-flow-col gap-4">
+                  <div className="flex flex-row flex-wrap place-items-start gap-4">
                     <p className="font-bold">{langui.global_width}:</p>
                     <div>
                       <p>{item.size.width} mm</p>
                       <p>{convertMmToInch(item.size.width)} in</p>
                     </div>
                   </div>
-                  <div className="grid place-items-start grid-flow-col gap-4">
+                  <div className="flex flex-row flex-wrap place-items-start gap-4">
                     <p className="font-bold">{langui.global_height}:</p>
                     <div>
                       <p>{item.size.height} mm</p>
@@ -245,7 +247,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
                     </div>
                   </div>
                   {item.size.thickness ? (
-                    <div className="grid place-items-start grid-flow-col gap-4">
+                    <div className="flex flex-row flex-wrap place-items-start gap-4">
                       <p className="font-bold">{langui.global_thickness}:</p>
                       <div>
                         <p>{item.size.thickness} mm</p>
@@ -387,11 +389,11 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
                 <div
                   id={content.attributes.slug}
                   key={content.id}
-                  className=" grid gap-2 h-6 overflow-hidden px-4 rounded-lg target:bg-mid target:h-auto target:py-3 target:my-2"
+                  className="grid gap-2 px-4 rounded-lg target:bg-mid target:h-auto target:py-3 target:my-2"
                 >
-                  <div className="grid gap-4 place-items-center grid-cols-[auto_auto_1fr_auto_9em] ">
+                  <div className="grid gap-4 place-items-center grid-cols-[auto_auto_1fr_auto_12ch] thin:grid-cols-[auto_auto_1fr_auto]">
                     <a href={`#${content.attributes.slug}`}>
-                      <h3>
+                      <h3 className="text-left">
                         {content.attributes.content.data &&
                         content.attributes.content.data.attributes.titles
                           .length > 0
@@ -406,7 +408,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
                           : prettySlug(content.attributes.slug, item.slug)}
                       </h3>
                     </a>
-                    <div className="grid grid-flow-col gap-1">
+                    <div className="flex flex-row flex-wrap gap-1">
                       {content.attributes.content.data?.attributes.categories.data.map(
                         (category) => (
                           <Chip key={category.id}>
@@ -423,7 +425,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
                         : ""}
                     </p>
                     {content.attributes.content.data ? (
-                      <Chip className="place-self-end">
+                      <Chip className="justify-self-end thin:hidden">
                         {content.attributes.content.data.attributes.type.data
                           .attributes.titles.length > 0
                           ? content.attributes.content.data.attributes.type.data
@@ -437,36 +439,6 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
                       ""
                     )}
                   </div>
-                  <div className="grid grid-flow-col place-content-start place-items-center gap-2">
-                    <span className="material-icons text-dark">
-                      subdirectory_arrow_right
-                    </span>
-
-                    {content.attributes.scan_set.length > 0 ? (
-                      <Button
-                        href={`/library/content/${content.attributes.content.data.attributes.slug}/scans/`}
-                      >
-                        {langui.library_item_view_scans}
-                      </Button>
-                    ) : (
-                      ""
-                    )}
-
-                    {content.attributes.content.data ? (
-                      <Button
-                        href={`/library/content/${content.attributes.content.data.attributes.slug}`}
-                      >
-                        {langui.library_item_open_content}
-                      </Button>
-                    ) : (
-                      ""
-                    )}
-
-                    {content.attributes.scan_set.length === 0 &&
-                    !content.attributes.content.data
-                      ? "The content is not available"
-                      : ""}
-                  </div>
                 </div>
               ))}
             </div>

tailwind.config.js

@@ -15,8 +15,9 @@ module.exports = {
       monospace: ["monospace"],
     },
     screens: {
-      desktop: { min: "70rem" },
+      desktop: { min: "150ch" },
-      mobile: { max: "70rem" },
+      mobile: { max: "150ch" },
+      thin: { max: "50ch" },
       coarse: { raw: "(pointer: coarse)" },
       fine: { raw: "(pointer: fine)" },
     },