From bfbcd642ea37e66e6a80bc72f2c920a645aeefd5 Mon Sep 17 00:00:00 2001
From: Paulo Castellano <paulo@castellanos.llc>
Date: Mon, 29 Jun 2026 14:35:36 -0300
Subject: [PATCH 1/2] feat(instagram): auto-fit story images to 9:16 with
 blurred background
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Story images that aren't 9:16 were clipped by Instagram. They are now
fitted onto a 1080x1920 canvas — the image is contained and a blurred,
darkened copy of itself fills the letterbox gaps, so nothing is cropped
and the background color adapts to the image.

The fit happens at publish time (the hosted copy lives in social-crops/),
and the post editor preview now renders the same blurred-background fit
for stories, so the user sees exactly what will publish. The aspect-ratio
warning is suppressed for story images since they're auto-fitted.

Instagram only — Facebook stories are video-only in our flow.
---
 app/Services/Media/MediaOptimizer.php         | 34 +++++++++++++++++++
 .../Concerns/CropsImageForAspectRatio.php     | 29 ++++++++++++++++
 app/Services/Social/InstagramPublisher.php    |  3 +-
 .../posts/previews/InstagramPreview.vue       |  1 +
 .../posts/previews/PostMediaPreview.vue       | 31 +++++++++++++----
 resources/js/composables/useMedia.ts          |  4 +--
 resources/js/composables/useMediaRules.ts     |  5 ++-
 .../Services/InstagramPublisherTest.php       | 13 +++++++
 .../Social/InstagramPublisherTest.php         | 25 +++++++++++---
 .../Services/Media/MediaOptimizerTest.php     | 30 ++++++++++++++++
 10 files changed, 161 insertions(+), 14 deletions(-)

diff --git a/app/Services/Media/MediaOptimizer.php b/app/Services/Media/MediaOptimizer.php
index d2a7b7a7..3b208ecd 100644
--- a/app/Services/Media/MediaOptimizer.php
+++ b/app/Services/Media/MediaOptimizer.php
@@ -148,6 +148,40 @@ public function cropToAspectRatio(string $filePath, float $ratio): string
         return $tempFile;
     }
 
+    /**
+     * Fit an image inside a width×height canvas without cropping: the image is
+     * scaled to fit and centered, and the empty space is filled with a blurred,
+     * slightly darkened copy of the image. When the image already matches the
+     * canvas ratio it's just scaled down (no background). Returns a temp file.
+     */
+    public function fitToCanvas(string $filePath, int $width, int $height): string
+    {
+        $probe = $this->manager->decodePath($filePath);
+        $canvasRatio = $width / $height;
+        $imageRatio = $probe->width() / $probe->height();
+
+        $tempFile = tempnam(sys_get_temp_dir(), 'media_fit_');
+
+        if (abs($imageRatio - $canvasRatio) < 0.01) {
+            $sized = $this->manager->decodePath($filePath)->scaleDown($width, $height);
+            file_put_contents($tempFile, (string) $sized->encodeUsingMediaType('image/jpeg', quality: 100));
+
+            return $tempFile;
+        }
+
+        $canvas = $this->manager->decodePath($filePath)
+            ->cover($width, $height)
+            ->blur(40)
+            ->brightness(-12);
+
+        $foreground = $this->manager->decodePath($filePath)->scaleDown($width, $height);
+        $canvas->insert($foreground, 0, 0, 'center');
+
+        file_put_contents($tempFile, (string) $canvas->encodeUsingMediaType('image/jpeg', quality: 100));
+
+        return $tempFile;
+    }
+
     /**
      * @return array{max_width: int, max_size: int, format: string, quality: int}
      */
diff --git a/app/Services/Social/Concerns/CropsImageForAspectRatio.php b/app/Services/Social/Concerns/CropsImageForAspectRatio.php
index ae4cefdb..d2c67d9c 100644
--- a/app/Services/Social/Concerns/CropsImageForAspectRatio.php
+++ b/app/Services/Social/Concerns/CropsImageForAspectRatio.php
@@ -50,6 +50,35 @@ protected function cropImageForAspectRatio(string $imageUrl, ?string $aspectRati
         }
     }
 
+    /**
+     * Fit the image inside a width×height canvas with a blurred-background
+     * extension (no cropping), host it, and return a public URL. Used for
+     * stories so an off-ratio image isn't clipped by the platform.
+     */
+    protected function fitImageToCanvas(string $imageUrl, int $width, int $height): string
+    {
+        $tempInput = tempnam(sys_get_temp_dir(), 'fit_in_');
+
+        try {
+            $download = Http::sink($tempInput)->timeout(120)->get($imageUrl);
+
+            if ($download->failed()) {
+                throw $this->cropFailureException('Failed to download image for story fitting');
+            }
+
+            $fitted = app(MediaOptimizer::class)->fitToCanvas($tempInput, $width, $height);
+
+            $path = self::CROP_DIRECTORY.'/'.Str::uuid()->toString().'.jpg';
+            Storage::put($path, file_get_contents($fitted));
+
+            @unlink($fitted);
+
+            return Storage::url($path);
+        } finally {
+            @unlink($tempInput);
+        }
+    }
+
     protected function aspectRatioToFloat(string $ratio): float
     {
         return AspectRatio::tryFrom($ratio)?->toFloat() ?? 1.0;
diff --git a/app/Services/Social/InstagramPublisher.php b/app/Services/Social/InstagramPublisher.php
index 23e684d8..388f3808 100644
--- a/app/Services/Social/InstagramPublisher.php
+++ b/app/Services/Social/InstagramPublisher.php
@@ -158,7 +158,8 @@ private function publishStory(string $instagramId, string $accessToken, $media):
         if ($isVideo) {
             $params['video_url'] = $media->url;
         } else {
-            $params['image_url'] = $media->url;
+            $dimensions = ContentType::InstagramStory->aiImageDimensions();
+            $params['image_url'] = $this->fitImageToCanvas($media->url, $dimensions['width'], $dimensions['height']);
         }
 
         // Step 1: Create story container
diff --git a/resources/js/components/posts/previews/InstagramPreview.vue b/resources/js/components/posts/previews/InstagramPreview.vue
index c442b604..98bf98f7 100644
--- a/resources/js/components/posts/previews/InstagramPreview.vue
+++ b/resources/js/components/posts/previews/InstagramPreview.vue
@@ -237,6 +237,7 @@ const username = computed(() => props.socialAccount.username || props.socialAcco
                         :placeholder-icon="IconPhoto"
                         :show-arrows="false"
                         :show-dots="false"
+                        :blur-background="true"
                         placeholder-class="w-full h-full flex items-center justify-center"
                     />
                 </div>
diff --git a/resources/js/components/posts/previews/PostMediaPreview.vue b/resources/js/components/posts/previews/PostMediaPreview.vue
index dcf08849..95621997 100644
--- a/resources/js/components/posts/previews/PostMediaPreview.vue
+++ b/resources/js/components/posts/previews/PostMediaPreview.vue
@@ -15,6 +15,9 @@ interface Props {
     dotInactiveClass?: string;
     mediaClass?: string;
     placeholderClass?: string;
+    // Fit images inside the frame with a blurred copy filling the gaps (matches
+    // the blurred-background extension applied to story images at publish time).
+    blurBackground?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -25,6 +28,7 @@ const props = withDefaults(defineProps<Props>(), {
     dotInactiveClass: 'bg-white/50 hover:bg-white/70',
     mediaClass: 'w-full h-full object-cover',
     placeholderClass: 'w-full h-full flex items-center justify-center bg-muted',
+    blurBackground: false,
 });
 
 const currentIndex = ref(0);
@@ -61,12 +65,27 @@ const goToSlide = (index: number) => {
                 :src="item.url"
                 :video-class="mediaClass"
             />
-            <img
-                v-else-if="index === currentIndex"
-                :src="item.url"
-                :alt="item.original_filename"
-                :class="mediaClass"
-            />
+            <template v-else-if="index === currentIndex">
+                <template v-if="blurBackground">
+                    <img
+                        :src="item.url"
+                        alt=""
+                        aria-hidden="true"
+                        class="absolute inset-0 h-full w-full scale-110 object-cover blur-2xl brightness-90"
+                    />
+                    <img
+                        :src="item.url"
+                        :alt="item.original_filename"
+                        class="absolute inset-0 h-full w-full object-contain"
+                    />
+                </template>
+                <img
+                    v-else
+                    :src="item.url"
+                    :alt="item.original_filename"
+                    :class="mediaClass"
+                />
+            </template>
         </template>
 
         <template v-if="hasMultiple && showArrows">
diff --git a/resources/js/composables/useMedia.ts b/resources/js/composables/useMedia.ts
index c421a191..38a08d8e 100644
--- a/resources/js/composables/useMedia.ts
+++ b/resources/js/composables/useMedia.ts
@@ -107,7 +107,7 @@ export const getMediaValidationWarning = (
             };
         }
 
-        if (width > 0 && height > 0) {
+        if (width > 0 && height > 0 && ! (rules.autoFitsImage && isImage(m))) {
             const ratio = width / height;
             if (rules.aspectRatioMin && ratio < rules.aspectRatioMin) {
                 return {
@@ -163,7 +163,7 @@ export const getMediaItemIssue = (item: MediaItem, contentType: string): string
 
     const width = item.meta?.width ?? 0;
     const height = item.meta?.height ?? 0;
-    if (width > 0 && height > 0) {
+    if (width > 0 && height > 0 && ! (rules.autoFitsImage && ! itemIsVideo)) {
         const ratio = width / height;
         if (rules.aspectRatioMin && ratio < rules.aspectRatioMin) return 'aspect_ratio_too_narrow';
         if (rules.aspectRatioMax && ratio > rules.aspectRatioMax) return 'aspect_ratio_too_wide';
diff --git a/resources/js/composables/useMediaRules.ts b/resources/js/composables/useMediaRules.ts
index ab0bc204..75407f9d 100644
--- a/resources/js/composables/useMediaRules.ts
+++ b/resources/js/composables/useMediaRules.ts
@@ -17,6 +17,9 @@ export interface MediaRules {
     maxVideoDurationSec?: number;
     aspectRatioMin?: number;
     aspectRatioMax?: number;
+    // Images off the target ratio are auto-fitted with a blurred background at
+    // publish time, so the aspect-ratio warning is suppressed for images.
+    autoFitsImage?: boolean;
 }
 
 const MB = 1024 * 1024;
@@ -40,7 +43,7 @@ const CONTENT_TYPE_RULES: Record<string, MediaRules> = {
         maxFiles: 1, acceptImages: true, acceptVideos: true, requiresMedia: true,
         acceptsGif: false,
         maxImageBytes: 8 * MB, maxVideoBytes: 100 * MB, maxVideoDurationSec: 60,
-        aspectRatioMin: 0.5, aspectRatioMax: 0.6,
+        aspectRatioMin: 0.5, aspectRatioMax: 0.6, autoFitsImage: true,
     },
 
     // Facebook
diff --git a/tests/Feature/Services/InstagramPublisherTest.php b/tests/Feature/Services/InstagramPublisherTest.php
index edf126fa..d0f9bc7f 100644
--- a/tests/Feature/Services/InstagramPublisherTest.php
+++ b/tests/Feature/Services/InstagramPublisherTest.php
@@ -9,8 +9,10 @@
 use App\Models\PostPlatform;
 use App\Models\SocialAccount;
 use App\Models\Workspace;
+use App\Services\Media\MediaOptimizer;
 use App\Services\Social\InstagramPublisher;
 use Illuminate\Support\Facades\Http;
+use Illuminate\Support\Facades\Storage;
 
 beforeEach(function () {
     $this->workspace = Workspace::factory()->create();
@@ -77,13 +79,24 @@
 });
 
 test('instagram publisher publishes story', function () {
+    Storage::fake();
     $this->postPlatform->update(['content_type' => ContentType::InstagramStory]);
 
+    $mockOptimizer = Mockery::mock(MediaOptimizer::class);
+    $mockOptimizer->shouldReceive('fitToCanvas')->once()->with(Mockery::type('string'), 1080, 1920)->andReturnUsing(function (string $tempFile) {
+        $out = tempnam(sys_get_temp_dir(), 'ig_fit_');
+        copy($tempFile, $out);
+
+        return $out;
+    });
+    app()->instance(MediaOptimizer::class, $mockOptimizer);
+
     Http::fake([
         '*/12345678/media' => Http::response(['id' => 'container-123'], 200),
         '*/container-123*' => Http::response(['status_code' => 'FINISHED'], 200),
         '*/12345678/media_publish' => Http::response(['id' => 'story-123'], 200),
         '*/story-123*' => Http::response(['permalink' => 'https://instagram.com/stories/abc123'], 200),
+        '*' => Http::response(file_get_contents(__DIR__.'/../../fixtures/1x1.png'), 200, ['Content-Type' => 'image/png']),
     ]);
 
     $this->post->update([
diff --git a/tests/Feature/Services/Social/InstagramPublisherTest.php b/tests/Feature/Services/Social/InstagramPublisherTest.php
index 30ff943b..8cc87cc3 100644
--- a/tests/Feature/Services/Social/InstagramPublisherTest.php
+++ b/tests/Feature/Services/Social/InstagramPublisherTest.php
@@ -11,6 +11,7 @@
 use App\Models\SocialAccount;
 use App\Models\User;
 use App\Models\Workspace;
+use App\Services\Media\MediaOptimizer;
 use App\Services\Social\InstagramPublisher;
 use Illuminate\Support\Facades\Http;
 use Illuminate\Support\Facades\Storage;
@@ -140,11 +141,11 @@ function fakeJpegBytes(int $width = 1200, int $height = 800): string
     });
 });
 
-test('instagram publisher can publish image story', function () {
+test('instagram publisher fits an image story to 9:16 and posts the hosted copy', function () {
+    Storage::fake();
     $this->postPlatform->update(['content_type' => ContentType::InstagramStory]);
 
     $this->post->update([
-
         'media' => [
             [
                 'id' => 'test-media-story',
@@ -154,9 +155,19 @@ function fakeJpegBytes(int $width = 1200, int $height = 800): string
                 'original_filename' => 'story.jpg',
             ],
         ],
-
     ]);
 
+    // The fit itself is covered by MediaOptimizerTest; here we only assert the
+    // story is built from the hosted, fitted copy (9:16 canvas).
+    $mockOptimizer = Mockery::mock(MediaOptimizer::class);
+    $mockOptimizer->shouldReceive('fitToCanvas')->once()->with(Mockery::type('string'), 1080, 1920)->andReturnUsing(function (string $tempFile) {
+        $out = tempnam(sys_get_temp_dir(), 'ig_fit_');
+        copy($tempFile, $out);
+
+        return $out;
+    });
+    app()->instance(MediaOptimizer::class, $mockOptimizer);
+
     Http::fake([
         'https://graph.instagram.com/v25.0/ig_123456789/media' => Http::response([
             'id' => 'story-container-123',
@@ -170,6 +181,7 @@ function fakeJpegBytes(int $width = 1200, int $height = 800): string
         'https://graph.instagram.com/v25.0/story-123456789*' => Http::response([
             'permalink' => 'https://www.instagram.com/stories/testuser/123/',
         ], 200),
+        '*' => Http::response(file_get_contents(__DIR__.'/../../../fixtures/1x1.png'), 200, ['Content-Type' => 'image/png']),
     ]);
 
     $result = $this->publisher->publish($this->postPlatform);
@@ -177,7 +189,12 @@ function fakeJpegBytes(int $width = 1200, int $height = 800): string
     expect($result['id'])->toBe('story-123456789');
 
     Http::assertSent(function ($request) {
-        return str_contains($request->url(), '/ig_123456789/media');
+        if (! str_contains($request->url(), '/ig_123456789/media') || str_contains($request->url(), 'media_publish')) {
+            return false;
+        }
+        $imageUrl = (string) data_get($request->data(), 'image_url', '');
+
+        return str_contains($imageUrl, 'social-crops/') && ! str_contains($imageUrl, 'example.com');
     });
 });
 
diff --git a/tests/Unit/Services/Media/MediaOptimizerTest.php b/tests/Unit/Services/Media/MediaOptimizerTest.php
index 54c7cae3..76088578 100644
--- a/tests/Unit/Services/Media/MediaOptimizerTest.php
+++ b/tests/Unit/Services/Media/MediaOptimizerTest.php
@@ -213,3 +213,33 @@ function createTestImage(int $width, int $height, string $format = 'image/jpeg')
     expect($cropped->width())->toBe(800);
     expect($cropped->height())->toBe(800);
 });
+
+it('fits a wide image into a 9:16 canvas (blurred background, no crop)', function () use (&$tempFiles) {
+    $source = createTestImage(1200, 900); // 4:3
+    $tempFiles[] = $source;
+
+    $optimizer = new MediaOptimizer;
+    $result = $optimizer->fitToCanvas($source, 1080, 1920);
+    $tempFiles[] = $result;
+
+    $manager = new ImageManager(Driver::class);
+    $out = $manager->decodePath($result);
+
+    expect($out->width())->toBe(1080)
+        ->and($out->height())->toBe(1920);
+});
+
+it('does not letterbox an image that already matches the canvas ratio', function () use (&$tempFiles) {
+    $source = createTestImage(1080, 1920); // already 9:16
+    $tempFiles[] = $source;
+
+    $optimizer = new MediaOptimizer;
+    $result = $optimizer->fitToCanvas($source, 1080, 1920);
+    $tempFiles[] = $result;
+
+    $manager = new ImageManager(Driver::class);
+    $out = $manager->decodePath($result);
+
+    $ratio = $out->width() / $out->height();
+    expect(abs($ratio - 9 / 16))->toBeLessThan(0.01);
+});

From b0cc7ba12b9be19b527904102b3c4cb35bcff699 Mon Sep 17 00:00:00 2001
From: Paulo Castellano <paulo@castellanos.llc>
Date: Mon, 29 Jun 2026 15:50:24 -0300
Subject: [PATCH 2/2] feat(previews): show full vertical media without cropping

Vertical previews (stories, reels, TikTok, Shorts) rendered media full-bleed,
so a correctly-sized 9:16 image was clipped by the phone mockup, which is
taller than 9:16.

A shared VerticalMediaCanvas now renders every vertical format consistently:
images show in full with a blurred-background extension filling the gaps (no
crop), while videos stay full-bleed like the real feed. This mirrors how the
platforms themselves display the content and matches the story blur applied at
publish time.

Also reduce fitToCanvas to two image decodes instead of three (reuse the probe
as the foreground), lowering peak memory on the story publish path.
---
 app/Services/Media/MediaOptimizer.php         |  9 ++---
 .../posts/previews/FacebookPreview.vue        | 37 +++++++++---------
 .../posts/previews/InstagramPreview.vue       | 38 +++++++++----------
 .../posts/previews/PostMediaPreview.vue       | 31 +++------------
 .../posts/previews/TikTokPreview.vue          | 28 ++++++--------
 .../posts/previews/VerticalMediaCanvas.vue    | 35 +++++++++++++++++
 .../posts/previews/YouTubePreview.vue         | 30 ++++++---------
 7 files changed, 102 insertions(+), 106 deletions(-)
 create mode 100644 resources/js/components/posts/previews/VerticalMediaCanvas.vue

diff --git a/app/Services/Media/MediaOptimizer.php b/app/Services/Media/MediaOptimizer.php
index 3b208ecd..6c13c0fc 100644
--- a/app/Services/Media/MediaOptimizer.php
+++ b/app/Services/Media/MediaOptimizer.php
@@ -156,14 +156,14 @@ public function cropToAspectRatio(string $filePath, float $ratio): string
      */
     public function fitToCanvas(string $filePath, int $width, int $height): string
     {
-        $probe = $this->manager->decodePath($filePath);
+        $foreground = $this->manager->decodePath($filePath);
         $canvasRatio = $width / $height;
-        $imageRatio = $probe->width() / $probe->height();
+        $imageRatio = $foreground->width() / $foreground->height();
 
         $tempFile = tempnam(sys_get_temp_dir(), 'media_fit_');
 
         if (abs($imageRatio - $canvasRatio) < 0.01) {
-            $sized = $this->manager->decodePath($filePath)->scaleDown($width, $height);
+            $sized = $foreground->scaleDown($width, $height);
             file_put_contents($tempFile, (string) $sized->encodeUsingMediaType('image/jpeg', quality: 100));
 
             return $tempFile;
@@ -174,8 +174,7 @@ public function fitToCanvas(string $filePath, int $width, int $height): string
             ->blur(40)
             ->brightness(-12);
 
-        $foreground = $this->manager->decodePath($filePath)->scaleDown($width, $height);
-        $canvas->insert($foreground, 0, 0, 'center');
+        $canvas->insert($foreground->scaleDown($width, $height), 0, 0, 'center');
 
         file_put_contents($tempFile, (string) $canvas->encodeUsingMediaType('image/jpeg', quality: 100));
 
diff --git a/resources/js/components/posts/previews/FacebookPreview.vue b/resources/js/components/posts/previews/FacebookPreview.vue
index f0302ae2..9227cd52 100644
--- a/resources/js/components/posts/previews/FacebookPreview.vue
+++ b/resources/js/components/posts/previews/FacebookPreview.vue
@@ -3,6 +3,7 @@ import { IconDots, IconPhoto } from '@tabler/icons-vue';
 import { computed } from 'vue';
 
 import PostMediaPreview from '@/components/posts/previews/PostMediaPreview.vue';
+import VerticalMediaCanvas from '@/components/posts/previews/VerticalMediaCanvas.vue';
 import type { MediaItem } from '@/types/media';
 
 interface SocialAccount {
@@ -214,17 +215,15 @@ const displayName = computed(() => props.socialAccount.display_name || props.soc
 
         <!-- ==================== REELS ==================== -->
         <template v-else-if="isReel">
-            <div class="relative flex-1 bg-black overflow-hidden">
+            <div class="relative flex-1 overflow-hidden">
                 <!-- Video/Media - Full screen -->
-                <div class="absolute inset-0">
-                    <PostMediaPreview
-                        :media="media"
-                        :placeholder-icon="IconPhoto"
-                        :show-arrows="false"
-                        :show-dots="false"
-                        placeholder-class="w-full h-full flex items-center justify-center bg-[#18191a]"
-                    />
-                </div>
+                <VerticalMediaCanvas :media="media">
+                    <template #placeholder>
+                        <div class="flex h-full w-full items-center justify-center bg-[#18191a]">
+                            <IconPhoto class="h-12 w-12 text-muted-foreground/40" />
+                        </div>
+                    </template>
+                </VerticalMediaCanvas>
 
                 <!-- Gradient overlay -->
                 <div v-if="media.length > 0"
@@ -353,17 +352,15 @@ const displayName = computed(() => props.socialAccount.display_name || props.soc
 
         <!-- ==================== STORIES ==================== -->
         <template v-else-if="isStory">
-            <div class="relative flex-1 bg-black overflow-hidden">
+            <div class="relative flex-1 overflow-hidden">
                 <!-- Media - Full screen -->
-                <div class="absolute inset-0">
-                    <PostMediaPreview
-                        :media="media"
-                        :placeholder-icon="IconPhoto"
-                        :show-arrows="false"
-                        :show-dots="false"
-                        placeholder-class="w-full h-full flex items-center justify-center bg-gradient-to-b from-[#1877f2]/50 to-[#833ab4]/50"
-                    />
-                </div>
+                <VerticalMediaCanvas :media="media">
+                    <template #placeholder>
+                        <div class="flex h-full w-full items-center justify-center bg-gradient-to-b from-[#1877f2]/50 to-[#833ab4]/50">
+                            <IconPhoto class="h-12 w-12 text-muted-foreground/40" />
+                        </div>
+                    </template>
+                </VerticalMediaCanvas>
 
                 <!-- Progress Bars -->
                 <div v-if="media.length > 0" class="absolute top-1 left-2 right-2 flex gap-0.5 z-10">
diff --git a/resources/js/components/posts/previews/InstagramPreview.vue b/resources/js/components/posts/previews/InstagramPreview.vue
index 98bf98f7..63ad2b0a 100644
--- a/resources/js/components/posts/previews/InstagramPreview.vue
+++ b/resources/js/components/posts/previews/InstagramPreview.vue
@@ -14,6 +14,7 @@ import {
 import { computed } from 'vue';
 
 import PostMediaPreview from '@/components/posts/previews/PostMediaPreview.vue';
+import VerticalMediaCanvas from '@/components/posts/previews/VerticalMediaCanvas.vue';
 import { ContentType } from '@/types/content-type';
 import type { MediaItem } from '@/types/media';
 
@@ -163,17 +164,15 @@ const username = computed(() => props.socialAccount.username || props.socialAcco
 
         <!-- ==================== REELS ==================== -->
         <template v-else-if="isReel">
-            <div class="relative flex-1 bg-[#fafafa] dark:bg-black overflow-hidden">
+            <div class="relative flex-1 overflow-hidden">
                 <!-- Video/Media - Full screen -->
-                <div class="absolute inset-0">
-                    <PostMediaPreview
-                        :media="media"
-                        :placeholder-icon="IconPlayerPlayFilled"
-                        :show-arrows="false"
-                        :show-dots="false"
-                        placeholder-class="w-full h-full flex items-center justify-center"
-                    />
-                </div>
+                <VerticalMediaCanvas :media="media">
+                    <template #placeholder>
+                        <div class="flex h-full w-full items-center justify-center">
+                            <IconPlayerPlayFilled class="h-12 w-12 text-muted-foreground/40" />
+                        </div>
+                    </template>
+                </VerticalMediaCanvas>
 
                 <!-- Top Bar - below status bar -->
                 <div class="absolute top-1 left-0 right-0 px-3 flex items-center justify-between z-10">
@@ -229,18 +228,15 @@ const username = computed(() => props.socialAccount.username || props.socialAcco
 
         <!-- ==================== STORIES ==================== -->
         <template v-else-if="isStory">
-            <div class="relative flex-1 bg-[#fafafa] dark:bg-black overflow-hidden">
+            <div class="relative flex-1 overflow-hidden">
                 <!-- Media - Full screen -->
-                <div class="absolute inset-0">
-                    <PostMediaPreview
-                        :media="media"
-                        :placeholder-icon="IconPhoto"
-                        :show-arrows="false"
-                        :show-dots="false"
-                        :blur-background="true"
-                        placeholder-class="w-full h-full flex items-center justify-center"
-                    />
-                </div>
+                <VerticalMediaCanvas :media="media">
+                    <template #placeholder>
+                        <div class="flex h-full w-full items-center justify-center">
+                            <IconPhoto class="h-12 w-12 text-muted-foreground/40" />
+                        </div>
+                    </template>
+                </VerticalMediaCanvas>
 
                 <!-- Progress Bars - below status bar -->
                 <div class="absolute top-0.5 left-2 right-2 flex gap-0.5 z-10">
diff --git a/resources/js/components/posts/previews/PostMediaPreview.vue b/resources/js/components/posts/previews/PostMediaPreview.vue
index 95621997..dcf08849 100644
--- a/resources/js/components/posts/previews/PostMediaPreview.vue
+++ b/resources/js/components/posts/previews/PostMediaPreview.vue
@@ -15,9 +15,6 @@ interface Props {
     dotInactiveClass?: string;
     mediaClass?: string;
     placeholderClass?: string;
-    // Fit images inside the frame with a blurred copy filling the gaps (matches
-    // the blurred-background extension applied to story images at publish time).
-    blurBackground?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -28,7 +25,6 @@ const props = withDefaults(defineProps<Props>(), {
     dotInactiveClass: 'bg-white/50 hover:bg-white/70',
     mediaClass: 'w-full h-full object-cover',
     placeholderClass: 'w-full h-full flex items-center justify-center bg-muted',
-    blurBackground: false,
 });
 
 const currentIndex = ref(0);
@@ -65,27 +61,12 @@ const goToSlide = (index: number) => {
                 :src="item.url"
                 :video-class="mediaClass"
             />
-            <template v-else-if="index === currentIndex">
-                <template v-if="blurBackground">
-                    <img
-                        :src="item.url"
-                        alt=""
-                        aria-hidden="true"
-                        class="absolute inset-0 h-full w-full scale-110 object-cover blur-2xl brightness-90"
-                    />
-                    <img
-                        :src="item.url"
-                        :alt="item.original_filename"
-                        class="absolute inset-0 h-full w-full object-contain"
-                    />
-                </template>
-                <img
-                    v-else
-                    :src="item.url"
-                    :alt="item.original_filename"
-                    :class="mediaClass"
-                />
-            </template>
+            <img
+                v-else-if="index === currentIndex"
+                :src="item.url"
+                :alt="item.original_filename"
+                :class="mediaClass"
+            />
         </template>
 
         <template v-if="hasMultiple && showArrows">
diff --git a/resources/js/components/posts/previews/TikTokPreview.vue b/resources/js/components/posts/previews/TikTokPreview.vue
index ee91a4b8..23920184 100644
--- a/resources/js/components/posts/previews/TikTokPreview.vue
+++ b/resources/js/components/posts/previews/TikTokPreview.vue
@@ -2,8 +2,7 @@
 import { IconPlus } from '@tabler/icons-vue';
 import { computed } from 'vue';
 
-import VideoPreview from "@/components/posts/previews/VideoPreview.vue";
-import { isVideoMedia } from '@/composables/useMedia';
+import VerticalMediaCanvas from "@/components/posts/previews/VerticalMediaCanvas.vue";
 import type { MediaItem } from '@/types/media';
 
 interface SocialAccount {
@@ -39,21 +38,16 @@ const username = computed(() => props.socialAccount.username || props.socialAcco
 <template>
     <div class="w-full h-full bg-black text-white overflow-hidden flex flex-col relative">
         <!-- Video/Media Area - Full screen -->
-        <div class="absolute inset-0">
-            <!-- Video content -->
-            <div v-if="media.length > 0 && isVideoMedia(media[0])" class="w-full h-full">
-                <VideoPreview :src="media[0].url" />
-            </div>
-            <div v-else-if="media.length > 0" class="w-full h-full">
-                <img :src="media[0].url" :alt="media[0].original_filename" class="w-full h-full object-cover" />
-            </div>
-            <div v-else class="w-full h-full flex items-center justify-center bg-[#161823]">
-                <svg class="h-12 w-12 text-white/20" viewBox="0 0 24 24" fill="currentColor">
-                    <path
-                        d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.1z" />
-                </svg>
-            </div>
-        </div>
+        <VerticalMediaCanvas :media="media">
+            <template #placeholder>
+                <div class="flex h-full w-full items-center justify-center bg-[#161823]">
+                    <svg class="h-12 w-12 text-white/20" viewBox="0 0 24 24" fill="currentColor">
+                        <path
+                            d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.1z" />
+                    </svg>
+                </div>
+            </template>
+        </VerticalMediaCanvas>
 
         <!-- Top Header (only when media exists) -->
         <div v-if="media.length > 0"
diff --git a/resources/js/components/posts/previews/VerticalMediaCanvas.vue b/resources/js/components/posts/previews/VerticalMediaCanvas.vue
new file mode 100644
index 00000000..97cc7181
--- /dev/null
+++ b/resources/js/components/posts/previews/VerticalMediaCanvas.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { IconPhoto } from '@tabler/icons-vue';
+import { computed } from 'vue';
+
+import VideoPreview from '@/components/posts/previews/VideoPreview.vue';
+import { isVideoMedia } from '@/composables/useMedia';
+import type { MediaItem } from '@/types/media';
+
+const props = defineProps<{
+    media: MediaItem[];
+}>();
+
+const item = computed<MediaItem | null>(() => props.media[0] ?? null);
+</script>
+
+<template>
+    <div class="absolute inset-0 overflow-hidden bg-black">
+        <template v-if="item">
+            <VideoPreview v-if="isVideoMedia(item)" :src="item.url" video-class="h-full w-full object-cover" />
+            <template v-else>
+                <img :src="item.url" alt="" aria-hidden="true"
+                    class="absolute inset-0 h-full w-full scale-110 object-cover blur-2xl brightness-90" />
+                <img :src="item.url" :alt="item.original_filename"
+                    class="absolute inset-0 h-full w-full object-contain" />
+            </template>
+        </template>
+        <template v-else>
+            <slot name="placeholder">
+                <div class="flex h-full w-full items-center justify-center">
+                    <IconPhoto class="h-12 w-12 text-muted-foreground/40" />
+                </div>
+            </slot>
+        </template>
+    </div>
+</template>
diff --git a/resources/js/components/posts/previews/YouTubePreview.vue b/resources/js/components/posts/previews/YouTubePreview.vue
index 9882b3b2..3c111e5d 100644
--- a/resources/js/components/posts/previews/YouTubePreview.vue
+++ b/resources/js/components/posts/previews/YouTubePreview.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import VideoPreview from "@/components/posts/previews/VideoPreview.vue";
-import { isVideoMedia } from '@/composables/useMedia';
+import VerticalMediaCanvas from "@/components/posts/previews/VerticalMediaCanvas.vue";
 import type { MediaItem } from '@/types/media';
 
 interface SocialAccount {
@@ -38,22 +37,17 @@ const username = computed(() => props.socialAccount.username || props.socialAcco
 <template>
     <div class="w-full h-full bg-[#0f0f0f] text-white overflow-hidden flex flex-col relative">
         <!-- Video/Media Area - Full screen -->
-        <div class="absolute inset-0">
-            <!-- Video content -->
-            <div v-if="media.length > 0 && isVideoMedia(media[0])" class="w-full h-full">
-                <VideoPreview :src="media[0].url" />
-            </div>
-            <div v-else-if="media.length > 0" class="w-full h-full">
-                <img :src="media[0].url" :alt="media[0].original_filename" class="w-full h-full object-cover" />
-            </div>
-            <div v-else class="w-full h-full flex items-center justify-center bg-[#0f0f0f]">
-                <!-- YouTube Shorts icon -->
-                <svg class="h-12 w-12 text-white/20" viewBox="0 0 24 24" fill="currentColor">
-                    <path
-                        d="M10 14.65v-5.3L15 12l-5 2.65zm7.77-4.33c-.77-.32-1.2-.5-1.2-.5L18 9.06c1.84-.96 2.53-3.23 1.56-5.06s-3.24-2.53-5.07-1.56L6 6.94c-1.29.68-2.07 2.04-2 3.49.07 1.42.93 2.67 2.22 3.25.03.01 1.2.5 1.2.5L6 14.93c-1.83.97-2.53 3.24-1.56 5.07.97 1.83 3.24 2.53 5.07 1.56l8.5-4.5c1.29-.68 2.06-2.04 1.99-3.49-.07-1.42-.94-2.68-2.23-3.25z" />
-                </svg>
-            </div>
-        </div>
+        <VerticalMediaCanvas :media="media">
+            <template #placeholder>
+                <div class="flex h-full w-full items-center justify-center bg-[#0f0f0f]">
+                    <!-- YouTube Shorts icon -->
+                    <svg class="h-12 w-12 text-white/20" viewBox="0 0 24 24" fill="currentColor">
+                        <path
+                            d="M10 14.65v-5.3L15 12l-5 2.65zm7.77-4.33c-.77-.32-1.2-.5-1.2-.5L18 9.06c1.84-.96 2.53-3.23 1.56-5.06s-3.24-2.53-5.07-1.56L6 6.94c-1.29.68-2.07 2.04-2 3.49.07 1.42.93 2.67 2.22 3.25.03.01 1.2.5 1.2.5L6 14.93c-1.83.97-2.53 3.24-1.56 5.07.97 1.83 3.24 2.53 5.07 1.56l8.5-4.5c1.29-.68 2.06-2.04 1.99-3.49-.07-1.42-.94-2.68-2.23-3.25z" />
+                    </svg>
+                </div>
+            </template>
+        </VerticalMediaCanvas>
 
         <!-- Top Header -->
         <div v-if="media.length > 0"