Improvement in table cells of assets index page on small screens

Shelf-nu · Jul 24, 2023 · 6cf89d5 · 6cf89d5
1 parent b7dae09
commit 6cf89d5
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 6 deletions.
diff --git a/app/components/layout/header/index.tsx b/app/components/layout/header/index.tsx
@@ -19,7 +19,7 @@ export default function Header({
 
   return header ? (
     <header>
-      <div className="block sm:flex sm:items-center sm:justify-between">
+      <div className="block sm:flex sm:items-center sm:justify-between sm:gap-3">
         <div className="mb-4 sm:mb-0">
           <Heading
             as="h2"
@@ -30,7 +30,7 @@ export default function Header({
           {header?.subHeading && <SubHeading>{header.subHeading}</SubHeading>}
         </div>
 
-        <div className="flex gap-3">{children}</div>
+        <div className="flex shrink-0 gap-3">{children}</div>
       </div>
     </header>
   ) : null;

diff --git a/app/routes/_layout+/assets._index.tsx b/app/routes/_layout+/assets._index.tsx
@@ -174,6 +174,7 @@ export default function AssetIndexPage() {
         <List
           ItemComponent={ListAssetContent}
           navigate={(itemId) => navigate(itemId)}
+          className=" overflow-x-visible md:overflow-x-auto"
           headerChildren={
             <>
               <Th className="hidden md:table-cell">Category</Th>
@@ -197,10 +198,10 @@ const ListAssetContent = ({
   const { category, tags } = item;
   return (
     <>
-      <Td className="w-full p-0 md:p-0">
+      <Td className="w-full whitespace-normal p-0 md:p-0">
         <div className="flex justify-between gap-3 p-4 md:justify-normal md:px-6">
           <div className="flex items-center gap-3">
-            <div className="flex h-12 w-12 items-center justify-center">
+            <div className="flex h-12 w-12 shrink-0 items-center justify-center">
               <AssetImage
                 asset={{
                   assetId: item.id,
@@ -211,8 +212,10 @@ const ListAssetContent = ({
                 className="h-full w-full rounded-[4px] border object-cover"
               />
             </div>
-            <div className="flex flex-row items-center gap-2 md:flex-col md:items-start md:gap-0">
-              <div className="font-medium">{item.title}</div>
+            <div className="">
+              <span className="word-break mb-1 block font-medium">
+                {item.title}
+              </span>
               <div className="block md:hidden">
                 {category ? (
                   <Badge color={category.color}>{category.name}</Badge>

diff --git a/app/styles/global.css b/app/styles/global.css
@@ -133,3 +133,9 @@ dialog {
 .responsive-filters .form-wrapper {
   @apply flex-col items-start xl:flex-row xl:items-center;
 }
+
+@media (max-width: 767px) {
+  .word-break {
+    word-break: break-word;
+  }
+}