Grid optimizations

This commit is contained in:
Elio Struyf
2023-10-23 11:13:03 +02:00
parent d1eb252380
commit 0ea972e4f3
6 changed files with 8 additions and 6 deletions
@@ -37,7 +37,7 @@ export const Contents: React.FunctionComponent<IContentsProps> = ({
return (
<PageLayout folders={pageFolders} totalPages={pageItems.length}>
<div className="w-full flex-grow max-w-7xl mx-auto pb-6 px-4">
<div className="w-full flex-grow max-w-full mx-auto pb-6 px-4">
{loading ? <Spinner /> : <Overview pages={pageItems} settings={settings} />}
</div>
@@ -91,7 +91,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
<img
src={`${pageData[PREVIEW_IMAGE_FIELD]}`}
alt={escapedTitle || ""}
className="absolute inset-0 h-full w-full object-cover group-hover:brightness-75"
className="absolute inset-0 h-full w-full object-cover object-left-top group-hover:brightness-75"
loading="lazy"
/>
) : (
@@ -16,7 +16,7 @@ export const List: React.FunctionComponent<IListProps> = ({
let className = '';
if (view === DashboardViewType.Grid) {
className = `grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8`;
className = `grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4`;
} else if (view === DashboardViewType.List) {
className = `-mx-4`;
}