Fix content column breakpoints

materialious/src/lib/ContentColumn.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	let largeCol = '2';
+
+	function checkWidth() {
+		if (innerWidth <= 1750) {
+			largeCol = '4';
+		} else {
+			largeCol = '2';
+		}
+	}
+
+	onMount(() => {
+		checkWidth();
+
+		addEventListener('resize', () => checkWidth());
+	});
+</script>
+
+<div class="s12 m6 l{largeCol}">
+	<slot />
+</div>

materialious/src/lib/VideoList.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
 	import { _ } from 'svelte-i18n';
 	import { get } from 'svelte/store';
 	import { removePlaylistVideo } from './Api';
 	import type { Notification, PlaylistPageVideo, Video, VideoBase } from './Api/model';
+	import ContentColumn from './ContentColumn.svelte';
 	import Thumbnail from './Thumbnail.svelte';
 	import { authStore } from './store';
 
@@ -20,20 +20,6 @@
 		await removePlaylistVideo(playlistId, indexId);
 		hiddenVideos = [...hiddenVideos, videoId];
 	}
-
-	function checkWidth() {
-		if (innerWidth <= 1750) {
-			largeCol = '4';
-		} else {
-			largeCol = '2';
-		}
-	}
-
-	onMount(() => {
-		checkWidth();
-
-		addEventListener('resize', () => checkWidth());
-	});
 </script>
 
 <div class="page right active">
@@ -41,7 +27,7 @@
 	<div class="grid">
 		{#each videos as video}
 			{#if !hiddenVideos.includes(video.videoId)}
-				<div class="s12 m6 l{largeCol}">
+				<ContentColumn>
 					<article class="no-padding" style="height: 100%;">
 						<Thumbnail
 							on:videoHidden={() => (hiddenVideos = [...hiddenVideos, video.videoId])}
@@ -60,7 +46,7 @@
 							</div>
 						{/if}
 					</article>
-				</div>
+				</ContentColumn>
 			{/if}
 		{/each}
 	</div>

materialious/src/routes/(app)/channel/[slug]/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { amSubscribed, deleteUnsubscribe, getChannelContent, postSubscribe } from '$lib/Api';
 	import type { ChannelContentPlaylists, ChannelContentVideos } from '$lib/Api/model';
+	import ContentColumn from '$lib/ContentColumn.svelte';
 	import PageLoading from '$lib/PageLoading.svelte';
 	import PlaylistThumbnail from '$lib/PlaylistThumbnail.svelte';
 	import VideoList from '$lib/VideoList.svelte';
@@ -184,22 +185,22 @@
 </div>
 
 {#if displayContent}
-	<div class="page right active">
-		<div class="space"></div>
-		<div class="grid">
-			{#if 'videos' in displayContent}
-				<VideoList videos={displayContent.videos} />
-			{:else}
+	{#if 'videos' in displayContent}
+		<VideoList videos={displayContent.videos} />
+	{:else}
+		<div class="page right active">
+			<div class="space"></div>
+			<div class="grid">
 				{#each displayContent.playlists as playlist}
-					<div class="s12 m6 l2">
+					<ContentColumn>
 						<article class="no-padding" style="height: 100%;">
 							<PlaylistThumbnail {playlist} />
 						</article>
-					</div>
+					</ContentColumn>
 				{/each}
-			{/if}
+			</div>
 		</div>
-	</div>
+	{/if}
 
 	<InfiniteLoading on:infinite={loadMore} />
 {:else}

materialious/src/routes/(app)/search/[slug]/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { getSearch } from '$lib/Api';
 	import ChannelThumbnail from '$lib/ChannelThumbnail.svelte';
+	import ContentColumn from '$lib/ContentColumn.svelte';
 	import PageLoading from '$lib/PageLoading.svelte';
 	import PlaylistThumbnail from '$lib/PlaylistThumbnail.svelte';
 	import Thumbnail from '$lib/Thumbnail.svelte';
@@ -79,7 +80,7 @@
 		<div class="space"></div>
 		<div class="grid">
 			{#each data.search as item}
-				<div class="s12 m6 l2">
+				<ContentColumn>
 					{#key item}
 						<article class="no-padding" style="height: 100%;">
 							{#if item.type === 'video'}
@@ -91,7 +92,7 @@
 							{/if}
 						</article>
 					{/key}
-				</div>
+				</ContentColumn>
 			{/each}
 		</div>
 	</div>