feat: define a height limit for tables

gabrielborgesdm · May 24, 2024 · ea8cd21 · ea8cd21
1 parent 5a1a7c0
commit ea8cd21
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 68 deletions.
diff --git a/frontend/src/pages/Authors/Authors.tsx b/frontend/src/pages/Authors/Authors.tsx
@@ -38,45 +38,49 @@ const Authors: React.FC = () => {
                 </button>
             </div>
             <hr />
-            <table className="w-full text-sm text-left rtl:text-right text-gray-500">
-                <thead className="text-xs uppercase ">
-                    <tr>
+            <div className='block max-h-[78dvh] overflow-y-auto'>
+                <table className="w-full text-sm text-left rtl:text-right text-gray-500">
+                    <thead className="text-xs uppercase ">
+                        <tr>
 
-                        <th scope="col" className="px-1 py-3">
-                            Author
-                        </th>
-                        <th scope="col" className="px-1 py-3">
-                            Nationality
-                        </th>
-                        <th scope="col" className="px-1 py-3">
-                            Birth date
-                        </th>
-                        <th scope="col" className="px-1 py-3">
-                            E-mail
-                        </th>
-                    </tr>
-                </thead>
-                <tbody>{authors?.length > 0 && authors.map(({ name, nationality, birthDate, email, id }: Author) => (
-                    shouldFilterInWith(name, nationality, birthDate, email, id)
-                    && (
-                        <tr key={id} className="border-b hover:bg-gray-50">
-                            <th scope="row" className="px-1 py-4 font-medium text-gray-900 whitespace-nowrap">
-                                {name}
+                            <th scope="col" className="px-1 py-3">
+                                Author
+                            </th>
+                            <th scope="col" className="px-1 py-3">
+                                Nationality
+                            </th>
+                            <th scope="col" className="px-1 py-3">
+                                Birth date
+                            </th>
+                            <th scope="col" className="px-1 py-3">
+                                E-mail
                             </th>
-                            <td className="px-1 py-4">
-                                {nationality}
-                            </td>
-                            <td className="px-1 py-4">
-                                {birthDate}
-                            </td>
-                            <td className="px-1 py-4">
-                                {email}
-                            </td>
                         </tr>
-                    )
-                ))}</tbody>
-            </table>
-        </div>
+                    </thead>
+                    <tbody>
+                        {authors?.length > 0 && authors.map(({ name, nationality, birthDate, email, id }: Author) => (
+                            shouldFilterInWith(name, nationality, birthDate, email, id)
+                            && (
+                                <tr key={id} className="border-b hover:bg-gray-50">
+                                    <th scope="row" className="px-1 py-4 font-medium text-gray-900 whitespace-nowrap">
+                                        {name}
+                                    </th>
+                                    <td className="px-1 py-4">
+                                        {nationality}
+                                    </td>
+                                    <td className="px-1 py-4">
+                                        {birthDate}
+                                    </td>
+                                    <td className="px-1 py-4">
+                                        {email}
+                                    </td>
+                                </tr>
+                            )
+                        ))}
+                    </tbody>
+                </table>
+            </div>
+        </div >
     );
 };
 

diff --git a/frontend/src/pages/Books/Books.tsx b/frontend/src/pages/Books/Books.tsx
@@ -41,41 +41,44 @@ const Books: React.FC = () => {
                 </button>
             </div>
             <hr />
-            <table className="w-full text-sm text-left rtl:text-right text-gray-500">
-                <thead className="text-xs uppercase ">
-                    <tr>
+            <div className='block max-h-[78dvh] overflow-y-auto'>
+                <table className="w-full text-sm text-left rtl:text-right text-gray-500">
+                    <thead className="text-xs uppercase ">
+                        <tr>
 
-                        <th scope="col" className="px-1 py-3">
-                            Book title
-                        </th>
-                        <th scope="col" className="px-1 py-3">
-                            Pages
-                        </th>
-                        <th scope="col" className="px-1 py-3">
-                            Authors
-                        </th>
-                    </tr>
-                </thead>
-                <tbody>{books?.length > 0 && books.map(({ id, title, pages, authorsNames }: Book) => (
-                    shouldFilterInWith(title, pages, id, authorsNames)
-                    && (
-                        <tr key={id} className="border-b hover:bg-gray-50">
-                            <th scope="row" className="px-1 py-4 font-medium text-gray-900 whitespace-nowrap">
-                                {title}
+                            <th scope="col" className="px-1 py-3">
+                                Book title
+                            </th>
+                            <th scope="col" className="px-1 py-3">
+                                Pages
+                            </th>
+                            <th scope="col" className="px-1 py-3">
+                                Authors
                             </th>
-                            <td className="px-1 py-4">
-                                {Number.isInteger(pages) ? `${pages} pages` : "Not informed"}
-                            </td>
-                            <td className="px-1 py-4">
-                                {
-                                    <span className='block max-w-52 truncate'>{authorsNames}</span>
-                                }
-                            </td>
                         </tr>
-                    )
-                ))}</tbody>
-            </table>
-        </div>
+                    </thead>
+                    <tbody>
+                        {books?.length > 0 && books.map(({ id, title, pages, authorsNames }: Book) => (
+                            shouldFilterInWith(title, pages, id, authorsNames) && (
+                                <tr key={id} className="border-b hover:bg-gray-50">
+                                    <th scope="row" className="px-1 py-4 font-medium text-gray-900 whitespace-nowrap">
+                                        {title}
+                                    </th>
+                                    <td className="px-1 py-4">
+                                        {Number.isInteger(pages) ? `${pages} pages` : "Not informed"}
+                                    </td>
+                                    <td className="px-1 py-4">
+                                        {
+                                            <span className='block max-w-52 truncate'>{authorsNames}</span>
+                                        }
+                                    </td>
+                                </tr>
+                            )
+                        ))}
+                    </tbody>
+                </table >
+            </div>
+        </div >
     );
 };