small fixes

src/lib/EditableWebsite.svelte

···
 				}
 
 				// Auto-scroll when dragging near top or bottom of viewport
-				const scrollZone = 150;
-				const scrollSpeed = 15;
+				const scrollZone = 100;
+				const scrollSpeed = 10;
 				const viewportHeight = window.innerHeight;
 
 				if (e.clientY < scrollZone) {
···
 				</BaseEditingCard>
 				<!-- {/if} -->
 			{/each}
-
-			{#if activeDragElement.element && activeDragElement.x >= 0 && activeDragElement.item}
-				{@const finalPos = simulateFinalPosition(
-					items,
-					activeDragElement.item,
-					activeDragElement.x,
-					activeDragElement.y,
-					isMobile
-				)}
-				<div
-					class={[
-						'bg-base-500/10 absolute aspect-square rounded-2xl transition-transform duration-100'
-					]}
-					style={`translate: calc(${(finalPos.x / COLUMNS) * 100}cqw + ${margin}px) calc(${(finalPos.y / COLUMNS) * 100}cqw + ${margin}px);
-
-                width: calc(${(getW(activeDragElement.item) / COLUMNS) * 100}cqw - ${margin * 2}px);
-                height: calc(${(getH(activeDragElement.item) / COLUMNS) * 100}cqw - ${margin * 2}px);`}
-				></div>
-			{/if}
 
 			<div style="height: {((maxHeight + 2) / 8) * 100}cqw;"></div>
 		</div>

src/lib/cards/BaseCard/BaseCard.svelte

···
 	import { getColor } from '..';
 
 	const colors = {
-		base: 'border-base-300 shadow-lg dark:shadow-none inset-shadow-sm inset-shadow-base-500/10 shadow-base-900/5 bg-base-50 dark:border-base-700 dark:bg-base-900 border',
+		base: 'border-base-300 shadow-lg dark:shadow-none inset-shadow-sm inset-shadow-base-500/10 shadow-base-900/5 bg-base-50 dark:border-base-700 dark:bg-base-900/30 border',
 		accent:
-			'border-accent-300 shadow-lg inset-shadow-sm inset-shadow-accent-500/10 shadow-accent-900/10 bg-accent-50 dark:border-accent-900 dark:bg-accent-950/20 border',
+			'border-accent-300 shadow-lg inset-shadow-sm inset-shadow-accent-500/10 shadow-accent-900/10 bg-accent-50 dark:border-accent-900 dark:bg-accent-900/10 border dark:inset-shadow-accent-500/20',
 		transparent: ''
 	} as Record<string, string>;
 
···
 	bind:this={ref}
 	draggable={isEditing}
 	class={[
-		'card group focus-within:outline-accent-500 @container/card absolute z-0 rounded-2xl outline-offset-2 transition-all duration-200 focus-within:outline-2',
+		'card group focus-within:outline-accent-500 @container/card absolute z-0 rounded-3xl outline-offset-2 transition-all duration-200 focus-within:outline-2 isolate',
 		color ? (colors[color] ?? colors.accent) : colors.base,
 		color !== 'accent' && item.color !== 'base' && item.color !== 'transparent' ? color : '',
 		showOutline ? 'outline-2' : ''
···
 	--columns: ${COLUMNS}`}
 	{...rest}
 >
-	<div class="relative h-full w-full overflow-hidden rounded-[15px] isolate">
+	<div class="relative h-full w-full overflow-hidden rounded-[23px] isolate">
 		{@render children?.()}
 	</div>
 	{@render controls?.()}

src/lib/cards/BaseCard/BaseEditingCard.svelte

···
 	const minH = $derived(cardDef.minH ?? (isMobile() ? 2 : 2));
 
 	const maxW = $derived(cardDef.maxW ?? COLUMNS);
-	const maxH = $derived(cardDef.maxH ?? 6);
+	const maxH = $derived(cardDef.maxH ?? (isMobile() ? 12 : 6));
 
 	// Resize handle state
 	let isResizing = $state(false);
···
 		const deltaX = e.clientX - resizeStartX;
 		const deltaY = e.clientY - resizeStartY;
 
-		const refRect = ref.getBoundingClientRect();
-
-		console.log(Math.round(deltaX / cellSize));
 		// Convert pixel delta to grid units (2 grid units = 1 visual cell)
 		const gridDeltaW = Math.round(deltaX / cellSize);
 		const gridDeltaH = Math.round(deltaY / cellSize);
···
 		document.removeEventListener('pointermove', handleResizeMove);
 		document.removeEventListener('pointerup', handleResizeEnd);
 	}
+
+
+	function canSetSize(w: number, h: number) {
+		if (!cardDef) return false;
+
+		if(isMobile()) {
+			w *= 2;
+			h *= 2;
+		}
+
+		return w >= minW && w <= maxW && h >= minH && h <= maxH;
+	}
+
+	function setSize(w: number, h: number) {
+
+		if(isMobile()) {
+			w *= 2;
+			h *= 2;
+		}
+		onsetsize?.(w, h);
+	}
 </script>
 
 <BaseCard {item} {...rest} isEditing={true} bind:ref showOutline={isResizing}>
···
 
 			<div
 				class={[
-					'absolute -bottom-7 z-50 w-full items-center justify-center text-xs group-focus-within:inline-flex group-hover:inline-flex',
+					'absolute -bottom-7 w-full items-center justify-center text-xs group-focus-within:inline-flex group-hover:inline-flex',
 					colorPopoverOpen ? 'inline-flex' : 'hidden'
 				]}
 			>
 				<div
-					class="bg-base-100 border-base-200 dark:bg-base-800 dark:border-base-700 inline-flex items-center gap-0.5 rounded-2xl border p-1 px-2 shadow-lg"
+					class="bg-base-100 z-[100] border-base-200 dark:bg-base-800 dark:border-base-700 inline-flex items-center gap-0.5 rounded-2xl border p-1 px-2 shadow-lg"
 				>
 					<Popover bind:open={colorPopoverOpen}>
 						{#snippet child({ props })}
···
 						/>
 					</Popover>
 
+
+					{#if canSetSize(2, 2)}
+						<button
+							onclick={() => {
+								setSize(2, 2);
+							}}
+							class="hover:bg-accent-500/10 cursor-pointer rounded-xl p-2"
+						>
+							<div class="border-base-900 dark:border-base-50 size-3 rounded-sm border-2"></div>
+
+							<span class="sr-only">set size to 1x1</span>
+						</button>
+					{/if}
+
+					{#if canSetSize(4, 2)}
+						<button
+							onclick={() => {
+								setSize(4, 2);
+							}}
+							class="hover:bg-accent-500/10 cursor-pointer rounded-xl p-2"
+						>
+							<div class="border-base-900 dark:border-base-50 h-3 w-5 rounded-sm border-2"></div>
+							<span class="sr-only">set size to 2x1</span>
+						</button>
+					{/if}
+					{#if canSetSize(2, 4)}
+						<button
+							onclick={() => {
+								setSize(2, 4);
+							}}
+							class="hover:bg-accent-500/10 cursor-pointer rounded-xl p-2"
+						>
+							<div class="border-base-900 dark:border-base-50 h-5 w-3 rounded-sm border-2"></div>
+
+							<span class="sr-only">set size to 1x2</span>
+						</button>
+					{/if}
+					{#if canSetSize(4, 4)}
+						<button
+							onclick={() => {
+								setSize(4, 4);
+							}}
+							class="hover:bg-accent-500/10 cursor-pointer rounded-xl p-2"
+						>
+							<div class="border-base-900 dark:border-base-50 h-5 w-5 rounded-sm border-2"></div>
+
+							<span class="sr-only">set size to 2x2</span>
+						</button>
+					{/if}
+
 					{#if onshowsettings}
 						<button
 							onclick={() => {
···
 			{#if cardDef.canResize !== false}
 				<!-- Resize handle at bottom right corner -->
 				<!-- svelte-ignore a11y_no_static_element_interactions -->
-				<div
-					class={[
-						'absolute pointer-events-none inset-0 z-50 items-end justify-end overflow-hidden rounded-2xl group-focus-within:flex group-hover:flex',
-						isResizing ? 'flex' : 'hidden'
-					]}
-					onpointerdown={handleResizeStart}
-				>
-				<div onpointerdown={handleResizeStart} class="pointer-events-auto cursor-se-resize">
+				
+				<div onpointerdown={handleResizeStart} class="absolute hidden group-hover:block right-0.5 bottom-0.5 pointer-events-auto cursor-se-resize bg-base-300/70 p-1 dark:bg-base-900/70 rounded-md rounded-br-3xl">
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
 						viewBox="0 0 24 24"
···
 						stroke-width="2"
 						stroke-linecap="round"
 						stroke-linejoin="round"
-						class="text-base-500 size-4"
+						class=" dark:text-base-400 text-base-600 size-4"
 					>
 						<circle cx="12" cy="5" r="1" /><circle cx="19" cy="5" r="1" /><circle
 							cx="5"
···
 					</svg>
 					<span class="sr-only">Resize card</span>
 					</div>
-				</div>
 			{/if}
 		{/if}
 	{/snippet}

src/lib/cards/BlueskyMediaCard/Video.svelte

···
 	muted
 	loop
 	autoplay
+	playsinline
 	class="absolute inset-0 h-full w-full object-cover"
 	aria-label={video.alt}
 ></video>

src/lib/cards/utils/MarkdownTextEditor.svelte

···
 			onUpdate: () => {
 				update();
 			},
-
+			onDrop: () => {
+				return false;
+			},
 			content: json,
 
 			editorProps: {
 				attributes: {
 					class: 'outline-none'
-				}
+				},
+				handleDOMEvents: { drop: () => true }
 			}
 		});
 

src/routes/[handle]/og.png/+server.ts

···
 
 	<p class="mt-8 text-4xl text-neutral-300">Check out my blento</p>
 
-	<div class="w-20 h-20 rounded-xl bg-rose-700 text-transparent absolute top-70 right-20">h</div>
-	<div class="w-20 h-40 rounded-xl bg-rose-400 text-transparent absolute top-94 right-20">h</div>
-	<div class="w-40 h-40 rounded-xl bg-rose-300 text-transparent absolute top-70 right-44">h</div>
-	<div class="w-20 h-40 rounded-xl bg-rose-600 text-transparent absolute top-70 right-88">h</div>
-	<div class="w-40 h-20 rounded-xl bg-rose-500 text-transparent absolute top-114 right-68">h</div>
+    <svg class="absolute w-130 h-130 top-50 right-0" viewBox="0 0 900 900" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <rect x="100" y="100" width="160" height="340" rx="23" fill="#EF4444"/>
+        <rect x="640" y="280" width="160" height="340" rx="23" fill="#22C55E"/>
+        <rect x="280" y="100" width="340" height="340" rx="23" fill="#F59E0B"/>
+        <rect x="100" y="460" width="340" height="160" rx="23" fill="#0EA5E9"/>
+        <rect x="640" y="100" width="160" height="160" rx="23" fill="#EAB308"/>
+        <rect x="100" y="640" width="160" height="160" rx="23" fill="#6366F1"/>
+        <rect x="460" y="460" width="160" height="160" rx="23" fill="#14B8A6"/>
+        <rect x="280" y="640" width="520" height="160" rx="23" fill="#A855F7"/>
+    </svg>
 </div>
 `;