cards as embeds

src/lib/cards/_base/BaseCard/BaseCard.svelte

@@ -18,6 +18,7 @@
 		isEditing?: boolean;
 		showOutline?: boolean;
 		locked?: boolean;
+		fillPage?: boolean;
 	} & WithElementRef<HTMLAttributes<HTMLDivElement>>;
 
 	let {
@@ -28,6 +29,7 @@
 		controls,
 		showOutline,
 		locked = false,
+		fillPage = false,
 		class: className,
 		...rest
 	}: BaseCardProps = $props();
@@ -38,11 +40,14 @@
 <div
 	id={item.id}
 	data-flip-id={item.id}
+	data-fill-page={fillPage ? 'true' : undefined}
 	bind:this={ref}
 	draggable={false}
 	class={[
-		'card group/card selection:bg-accent-600/50 focus-within:outline-accent-500 @container/card absolute isolate z-0 rounded-3xl outline-offset-2 transition-all duration-200 focus-within:outline-2',
-		color ? (colors[color] ?? colors.accent) : colors.base,
+		fillPage
+			? 'card group/card selection:bg-accent-600/50 focus-within:outline-accent-500 @container/card relative isolate z-0 h-full w-full outline-offset-2 transition-all duration-200 focus-within:outline-2'
+			: 'card group/card selection:bg-accent-600/50 focus-within:outline-accent-500 @container/card absolute isolate z-0 rounded-3xl outline-offset-2 transition-all duration-200 focus-within:outline-2',
+		!fillPage ? (color ? (colors[color] ?? colors.accent) : colors.base) : '',
 		color !== 'accent' && item.color !== 'base' && item.color !== 'transparent' ? color : '',
 		showOutline ? 'outline-2' : '',
 		className
@@ -65,7 +70,8 @@
 >
 	<div
 		class={[
-			'text-base-900 dark:text-base-50 relative isolate h-full w-full overflow-hidden rounded-[23px]',
+			'text-base-900 dark:text-base-50 relative isolate h-full w-full overflow-hidden',
+			!fillPage ? 'rounded-[23px]' : '',
 			color !== 'base' && color != 'transparent' ? 'light' : ''
 		]}
 	>
@@ -84,14 +90,22 @@
 
 <style>
 	.card {
+		container-name: card;
+		container-type: size;
 		translate: calc((var(--mx) / var(--columns)) * 100cqw + var(--mm))
 			calc((var(--my) / var(--columns)) * 100cqw + var(--mm));
 		width: calc((var(--mw) / var(--columns)) * 100cqw - (var(--mm) * 2));
 		height: calc((var(--mh) / var(--columns)) * 100cqw - (var(--mm) * 2));
 	}
 
+	.card[data-fill-page='true'] {
+		translate: none;
+		width: 100%;
+		height: 100%;
+	}
+
 	@container grid (width >= 42rem) {
-		.card {
+		.card:not([data-fill-page='true']) {
 			translate: calc((var(--dx) / var(--columns)) * 100cqw + var(--dm))
 				calc((var(--dy) / var(--columns)) * 100cqw + var(--dm));
 			width: calc((var(--dw) / var(--columns)) * 100cqw - (var(--dm) * 2));

src/lib/cards/core/LinkCard/EditingLinkCard.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { browser } from '$app/environment';
 	import { getImage, compressImage } from '$lib/helper';
-	import { getDidContext, getIsMobile } from '$lib/website/context';
+	import { getDidContext } from '$lib/website/context';
 	import type { ContentComponentProps } from '../../types';
 	import PlainTextEditor from '$lib/components/PlainTextEditor.svelte';
 
@@ -50,8 +50,6 @@
 		}
 	}
 
-	let isMobile = getIsMobile();
-
 	let faviconHasError = $state(false);
 	let isFetchingMetadata = $state(false);
 
@@ -291,10 +289,10 @@
 			</div>
 		</div>
 
-		{#if hasFetched && browser && ((isMobile() && item.mobileH >= 8) || (!isMobile() && item.h >= 4))}
+		{#if hasFetched && browser}
 			<button
 				type="button"
-				class="hover:ring-accent-500 relative mb-2 aspect-2/1 w-full cursor-pointer overflow-hidden rounded-xl transition-all duration-200 hover:ring-2"
+				class="link-preview-editor hover:ring-accent-500 relative mb-2 aspect-2/1 w-full cursor-pointer overflow-hidden rounded-xl transition-all duration-200 hover:ring-2"
 				onclick={() => imageInputRef?.click()}
 				onmouseenter={() => (isHoveringImage = true)}
 				onmouseleave={() => (isHoveringImage = false)}
@@ -357,3 +355,15 @@
 		{/if}
 	</div>
 {/if}
+
+<style>
+	.link-preview-editor {
+		display: none;
+	}
+
+	@container card (height >= 18rem) {
+		.link-preview-editor {
+			display: block;
+		}
+	}
+</style>

src/lib/cards/core/LinkCard/LinkCard.svelte

@@ -1,21 +1,18 @@
 <script lang="ts">
-	import { browser } from '$app/environment';
 	import { getImage } from '$lib/helper';
-	import { getDidContext, getIsMobile } from '$lib/website/context';
+	import { getDidContext } from '$lib/website/context';
 	import type { ContentComponentProps } from '../../types';
 	import { qrOverlay } from '$lib/components/qr/qrOverlay.svelte';
 
 	let { item, isEditing }: ContentComponentProps = $props();
 
-	let isMobile = getIsMobile();
-
 	let faviconHasError = $state(false);
 
 	let did = getDidContext();
 </script>
 
 {#if item.cardData.showBackgroundImage && item.cardData.image}
-	<div class="relative flex h-full flex-col justify-end p-4">
+	<div class="link-card relative flex h-full flex-col justify-end p-4">
 		<img
 			class="absolute inset-0 -z-10 size-full object-cover"
 			src={getImage(item.cardData, did)}
@@ -27,12 +24,7 @@
 		<div class="text-accent-600 dark:text-accent-400 text-xs font-semibold">
 			{item.cardData.domain}
 		</div>
-		<div
-			class={[
-				'text-base-900 dark:text-base-50 text-lg font-bold',
-				(isMobile() && item.mobileH < 8) || (!isMobile() && item.h < 4) ? 'line-clamp-2' : ''
-			]}
-		>
+		<div class="link-title text-base-900 dark:text-base-50 text-lg font-bold">
 			{item.cardData.title}
 		</div>
 		{#if item.cardData.href && !isEditing}
@@ -73,8 +65,8 @@
 		{/if}
 	</div>
 {:else}
-	<div class="flex h-full flex-col justify-between p-4">
-		<div>
+	<div class="link-card flex h-full flex-col p-4">
+		<div class="link-content min-h-0">
 			<div
 				class="bg-base-100 border-base-300 accent:bg-accent-100/50 accent:border-accent-200 dark:border-base-800 dark:bg-base-900 mb-2 inline-flex size-8 items-center justify-center rounded-xl border"
 			>
@@ -102,12 +94,7 @@
 					</svg>
 				{/if}
 			</div>
-			<div
-				class={[
-					'text-base-900 dark:text-base-50 text-lg font-bold',
-					(isMobile() && item.mobileH < 8) || (!isMobile() && item.h < 4) ? 'line-clamp-2' : ''
-				]}
-			>
+			<div class="link-title text-base-900 dark:text-base-50 text-lg font-bold">
 				{item.cardData.title}
 			</div>
 			<!-- <div class="text-base-800 dark:text-base-100 mt-2 text-xs">{item.cardData.description}</div> -->
@@ -118,12 +105,14 @@
 			</div>
 		</div>
 
-		{#if browser && ((isMobile() && item.mobileH >= 8) || (!isMobile() && item.h >= 4)) && item.cardData.image}
-			<img
-				class="mb-2 aspect-2/1 w-full rounded-xl object-cover opacity-100 transition-opacity duration-100 starting:opacity-0"
-				src={getImage(item.cardData, did)}
-				alt=""
-			/>
+		{#if item.cardData.image}
+			<div class="link-preview-wrap mt-auto">
+				<img
+					class="link-preview mb-2 aspect-2/1 w-full rounded-xl object-cover opacity-100 transition-opacity duration-100 starting:opacity-0"
+					src={getImage(item.cardData, did)}
+					alt=""
+				/>
+			</div>
 		{/if}
 		{#if item.cardData.href && !isEditing}
 			<a
@@ -163,3 +152,68 @@
 		{/if}
 	</div>
 {/if}
+
+<style>
+	.link-title {
+		display: -webkit-box;
+		line-clamp: 2;
+		overflow: hidden;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 2;
+	}
+
+	.link-preview {
+		display: none;
+		width: 100%;
+		object-fit: cover;
+	}
+
+	.link-preview-wrap {
+		display: none;
+		padding-top: 1rem;
+	}
+
+	@container card (height >= 18rem) {
+		.link-title {
+			display: block;
+			line-clamp: unset;
+			overflow: visible;
+			-webkit-line-clamp: unset;
+		}
+
+		.link-preview-wrap,
+		.link-preview {
+			display: block;
+		}
+	}
+
+	@container card (height >= 18rem) and (height < 22rem) {
+		.link-content {
+			padding-bottom: 1rem;
+		}
+
+		.link-preview-wrap {
+			padding-top: 0;
+		}
+
+		.link-preview {
+			aspect-ratio: 2.6 / 1;
+			max-height: 4.5rem;
+		}
+	}
+
+	@container card (height >= 22rem) {
+		.link-content {
+			padding-bottom: 0.5rem;
+		}
+
+		.link-preview-wrap {
+			padding-top: 0;
+		}
+
+		.link-preview {
+			aspect-ratio: 2 / 1;
+			max-height: none;
+		}
+	}
+</style>

src/lib/cards/core/LinkCard/LinkCardSettings.svelte

@@ -48,7 +48,7 @@
 		<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
 	</svg>
 </Button>
-<div class="flex items-center space-x- mt-4">
+<div class="space-x- mt-4 flex items-center">
 	<Checkbox
 		bind:checked={
 			() => Boolean(item.cardData.showBackgroundImage),
@@ -61,7 +61,7 @@
 	<Label
 		id="show-bg-image-label"
 		for="show-bg-image"
-		class="text-sm leading-none ml-2 font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+		class="ml-2 text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 	>
 		Show background image
 	</Label>

src/lib/cards/media/LivestreamCard/LivestreamCard.svelte

@@ -1,12 +1,7 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import Icon from './Icon.svelte';
-	import {
-		getAdditionalUserData,
-		getDidContext,
-		getHandleContext,
-		getIsMobile
-	} from '$lib/website/context';
+	import { getAdditionalUserData, getDidContext, getHandleContext } from '$lib/website/context';
 	import type { ContentComponentProps } from '../../types';
 	import { RelativeTime } from '@foxui/time';
 	import { Badge } from '@foxui/core';
@@ -15,8 +10,6 @@
 
 	let { item = $bindable() }: ContentComponentProps = $props();
 
-	let isMobile = getIsMobile();
-
 	let isLoaded = $state(false);
 
 	const data = getAdditionalUserData();
@@ -58,7 +51,7 @@
 	});
 </script>
 
-<div class="h-full overflow-y-scroll p-4">
+<div class="livestream-card h-full overflow-y-scroll p-4">
 	{#if latestLivestream}
 		<div class="flex min-h-full flex-col justify-between">
 			<div>
@@ -95,10 +88,10 @@
 				</a>
 			</div>
 
-			{#if browser && ((isMobile() && item.mobileH >= 7) || (!isMobile() && item.h >= 4)) && latestLivestream?.thumb}
+			{#if browser && latestLivestream?.thumb}
 				<a href={latestLivestream?.href} target="_blank" rel="noopener noreferrer">
 					<img
-						class="my-4 max-h-32 w-full rounded-xl object-cover"
+						class="livestream-thumb my-4 max-h-32 w-full rounded-xl object-cover"
 						src={latestLivestream?.thumb}
 						alt=""
 					/>
@@ -112,3 +105,15 @@
 		<div class="flex h-full w-full items-center justify-center">Looking for the latest stream</div>
 	{/if}
 </div>
+
+<style>
+	.livestream-thumb {
+		display: none;
+	}
+
+	@container card (height >= 15rem) {
+		.livestream-thumb {
+			display: block;
+		}
+	}
+</style>

src/lib/cards/media/PhotoGalleryCard/PhotoGalleryCard.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Item } from '$lib/types';
 	import { onMount } from 'svelte';
-	import { getAdditionalUserData, getIsMobile } from '$lib/website/context';
+	import { getAdditionalUserData } from '$lib/website/context';
 	import { getCDNImageBlobUrl, parseUri } from '$lib/atproto';
 	import { loadGrainGalleryData } from './helpers';
 
@@ -61,14 +61,29 @@
 			onclick?: () => void;
 		}[]
 	);
-
-	let isMobile = getIsMobile();
 </script>
 
-<div class="z-10 flex h-full w-full flex-col gap-4 overflow-y-scroll p-4">
-	<ImageMasonry
-		images={images ?? []}
-		showNames={false}
-		maxColumns={!isMobile() && item.w > 4 ? 3 : 2}
-	/>
+<div class="photo-gallery-card z-10 flex h-full w-full flex-col gap-4 overflow-y-scroll p-4">
+	<div class="gallery-compact">
+		<ImageMasonry images={images ?? []} showNames={false} maxColumns={2} />
+	</div>
+	<div class="gallery-wide">
+		<ImageMasonry images={images ?? []} showNames={false} maxColumns={3} />
+	</div>
 </div>
+
+<style>
+	.gallery-wide {
+		display: none;
+	}
+
+	@container card (width >= 28rem) {
+		.gallery-compact {
+			display: none;
+		}
+
+		.gallery-wide {
+			display: block;
+		}
+	}
+</style>