Fix thumbnail aspect ratio

Author: stormwarning

www/src/lib/components/gallery-thumbnail.svelte

@@ -23,7 +23,6 @@ let thumb
 	class="flex w-full rounded-[1px] transition {FOCUS_OUTLINE}"
 	type="button"
 	class:opacity-50={isHidden}
-	style:aspect-ratio={aspectRatio}
 	on:click={onClick}
 >
 	<ObserveIntersection once element={thumb} threshold={0.45} let:intersecting>
@@ -32,6 +31,7 @@ let thumb
 			class:opacity-0={!intersecting}
 			class:translate-y-6={!intersecting}
 			class:delay-75={isDelayed}
+			style:aspect-ratio={aspectRatio}
 			bind:this={thumb}
 		>
 			<img

www/src/lib/components/masonry-grid.svelte

@@ -22,6 +22,7 @@ let masonryElement
 
 export const refreshLayout = async () => {
 	/* Get the post relayout number of columns */
+	console.log('COLS', getComputedStyle(grid._el).gridTemplateColumns)
 	let ncol = getComputedStyle(grid._el).gridTemplateColumns.split(' ').length
 	let gap = Number.parseFloat(getComputedStyle(grid._el).gap)
 
@@ -69,7 +70,7 @@ const calcGrid = async (element) => {
 			_el: element,
 			gap: Number.parseFloat(getComputedStyle(element).gap),
 			// @ts-ignore
-			items: [...element.children].filter(
+			items: [...element.childNodes].filter(
 				(c) =>
 					c.nodeType === 1 &&
 					Number(getComputedStyle(c).gridColumnEnd) !== -1,
@@ -105,19 +106,14 @@ $: if (items) {
 }
 </script>
 
-<div
-	bind:this={masonryElement}
-	class="masonry-grid grid place-items-center {gapClass}"
->
+<div bind:this={masonryElement} class="masonry-grid grid {gapClass}">
 	<slot />
 </div>
 
 <style>
 .masonry-grid {
 	grid: 1fr auto / repeat(2, 1fr);
 	grid: masonry / repeat(2, 1fr);
-}
-.masonry-grid > :global(*) {
-	align-self: start;
+	align-items: start;
 }
 </style>