From 2f5c0621071e135d9023e65c99ed245978a9df93 Mon Sep 17 00:00:00 2001
From: Paulo Castellano <paulo@castellanos.llc>
Date: Mon, 28 Sep 2026 10:09:09 -0300
Subject: [PATCH 1/4] fix: respect Instagram feed crop in media validation

---
 .../posts/editor/InstagramSettings.vue        |  4 +-
 .../posts/editor/MediaRulesWarning.vue        |  3 +-
 .../posts/editor/PostEditorActions.vue        |  1 +
 resources/js/composables/useMedia.ts          | 18 ++++---
 resources/js/composables/usePostCompliance.ts |  7 +--
 tests/Browser/ChannelMediaIssueTest.php       | 49 +++++++++++++++++++
 6 files changed, 71 insertions(+), 11 deletions(-)

diff --git a/resources/js/components/posts/editor/InstagramSettings.vue b/resources/js/components/posts/editor/InstagramSettings.vue
index bd17de38a..07c917eac 100644
--- a/resources/js/components/posts/editor/InstagramSettings.vue
+++ b/resources/js/components/posts/editor/InstagramSettings.vue
@@ -71,6 +71,7 @@ const pickAspectRatio = (value: string) => {
         <button
             type="button"
             class="flex w-full cursor-pointer items-center justify-between gap-3 p-4 text-sm"
+            data-testid="instagram-settings-toggle"
             @click="open = !open"
         >
             <span class="flex min-w-0 items-center gap-2">
@@ -126,6 +127,7 @@ const pickAspectRatio = (value: string) => {
                         v-for="ratio in aspectRatios"
                         :key="ratio.value"
                         type="button"
+                        :data-testid="`instagram-aspect-${ratio.value.replace(':', '-')}`"
                         class="cursor-pointer rounded-full border-2 px-3 py-1 text-xs font-bold uppercase tracking-widest transition-colors disabled:cursor-not-allowed disabled:opacity-50"
                         :class="selectedAspectRatio === ratio.value
                             ? 'border-foreground bg-violet-100 text-foreground shadow-2xs'
@@ -138,7 +140,7 @@ const pickAspectRatio = (value: string) => {
                 </div>
             </div>
 
-            <MediaRulesWarning :content-type="contentType" :media="media" :platform="Platform.Instagram" />
+            <MediaRulesWarning :content-type="contentType" :media="media" :platform="Platform.Instagram" :aspect-ratio="meta.aspect_ratio" />
         </div>
     </div>
 </template>
diff --git a/resources/js/components/posts/editor/MediaRulesWarning.vue b/resources/js/components/posts/editor/MediaRulesWarning.vue
index 403bf361e..3d452695d 100644
--- a/resources/js/components/posts/editor/MediaRulesWarning.vue
+++ b/resources/js/components/posts/editor/MediaRulesWarning.vue
@@ -10,9 +10,10 @@ const props = defineProps<{
     contentType: string;
     media: MediaItem[];
     platform: string;
+    aspectRatio?: string;
 }>();
 
-const warning = computed(() => getMediaValidationWarning(props.contentType, props.media));
+const warning = computed(() => getMediaValidationWarning(props.contentType, props.media, props.aspectRatio));
 </script>
 
 <template>
diff --git a/resources/js/components/posts/editor/PostEditorActions.vue b/resources/js/components/posts/editor/PostEditorActions.vue
index 9c3abafcb..70f0139d9 100644
--- a/resources/js/components/posts/editor/PostEditorActions.vue
+++ b/resources/js/components/posts/editor/PostEditorActions.vue
@@ -99,6 +99,7 @@ const scheduledAtError = computed(() => errors.value.scheduled_at);
                             <Button
                                 type="button"
                                 class="w-full lg:w-auto"
+                                data-testid="post-submit"
                                 :disabled="isPostActionDisabled"
                                 @click="emit('submit', hasPickedTime ? PostStatus.Scheduled : PostStatus.Publishing)"
                             >
diff --git a/resources/js/composables/useMedia.ts b/resources/js/composables/useMedia.ts
index 2a18885a9..66e5e1811 100644
--- a/resources/js/composables/useMedia.ts
+++ b/resources/js/composables/useMedia.ts
@@ -2,6 +2,7 @@ import { getMediaRulesForContentType } from '@/composables/useMediaRules';
 import date from '@/date';
 import type { MediaRules } from '@/lib/contentTypeMediaRules';
 import { isDocument, isGif, isImage, isMov, isVideo } from '@/lib/mediaType';
+import { ContentType } from '@/types/content-type';
 import type { MediaItem } from '@/types/media';
 
 export type { MediaItem } from '@/types/media';
@@ -40,7 +41,7 @@ const warning = (key: string, params: Record<string, string> = {}): MediaValidat
 const firstWarning = (...candidates: Array<MediaValidationWarning | false | null | undefined>): MediaValidationWarning | null =>
     candidates.find((candidate): candidate is MediaValidationWarning => Boolean(candidate)) ?? null;
 
-const itemConstraintWarning = (item: MediaItem, rules: MediaRules): MediaValidationWarning | null => {
+const itemConstraintWarning = (item: MediaItem, rules: MediaRules, contentType: string, aspectRatio?: string): MediaValidationWarning | null => {
     const size = item.size ?? 0;
     const duration = item.meta?.duration ?? 0;
     const width = item.meta?.width ?? 0;
@@ -68,7 +69,11 @@ const itemConstraintWarning = (item: MediaItem, rules: MediaRules): MediaValidat
         return warning('image_too_large', sizeParams(rules.maxImageBytes, size));
     }
 
-    if (width > 0 && height > 0 && ! (rules.autoFitsImage && isImage(item))) {
+    const imageWillBeCropped = contentType === ContentType.InstagramFeed
+        && isImage(item)
+        && ['1:1', '4:5', '16:9'].includes(aspectRatio ?? '');
+
+    if (width > 0 && height > 0 && ! (rules.autoFitsImage && isImage(item)) && ! imageWillBeCropped) {
         const ratio = width / height;
 
         if (rules.aspectRatioMin && ratio < rules.aspectRatioMin) {
@@ -91,6 +96,7 @@ const itemConstraintWarning = (item: MediaItem, rules: MediaRules): MediaValidat
 export const getMediaValidationWarning = (
     contentType: string,
     media: MediaItem[],
+    aspectRatio?: string,
 ): MediaValidationWarning | null => {
     if (! contentType) return warning('no_variant');
 
@@ -111,7 +117,7 @@ export const getMediaValidationWarning = (
         rules.acceptDocuments && documents.length > 0 && total > 1 && warning('document_not_alone'),
         ! rules.acceptsGif && media.some(isGif) && warning('gif_not_allowed'),
         ! rules.acceptsMov && media.some(isMov) && warning('mov_not_allowed'),
-        ...media.map((item) => itemConstraintWarning(item, rules)),
+        ...media.map((item) => itemConstraintWarning(item, rules, contentType, aspectRatio)),
     );
 };
 
@@ -121,7 +127,7 @@ export const getMediaValidationWarning = (
  * (count, requires_media) are NOT checked here — use getMediaValidationWarning
  * for those.
  */
-export const getMediaItemIssue = (item: MediaItem, contentType: string): string | null => {
+export const getMediaItemIssue = (item: MediaItem, contentType: string, aspectRatio?: string): string | null => {
     if (! contentType) return null;
 
     const rules = getMediaRulesForContentType(contentType);
@@ -129,7 +135,7 @@ export const getMediaItemIssue = (item: MediaItem, contentType: string): string
     if (isDocument(item)) {
         return firstWarning(
             ! rules.acceptDocuments && warning('no_document_allowed'),
-            itemConstraintWarning(item, rules),
+            itemConstraintWarning(item, rules, contentType, aspectRatio),
         )?.key ?? null;
     }
 
@@ -138,6 +144,6 @@ export const getMediaItemIssue = (item: MediaItem, contentType: string): string
         ! isVideo(item) && ! rules.acceptImages && warning('no_image_allowed'),
         isGif(item) && ! rules.acceptsGif && warning('gif_not_allowed'),
         isMov(item) && ! rules.acceptsMov && warning('mov_not_allowed'),
-        itemConstraintWarning(item, rules),
+        itemConstraintWarning(item, rules, contentType, aspectRatio),
     )?.key ?? null;
 };
diff --git a/resources/js/composables/usePostCompliance.ts b/resources/js/composables/usePostCompliance.ts
index ac64441e4..4f083f378 100644
--- a/resources/js/composables/usePostCompliance.ts
+++ b/resources/js/composables/usePostCompliance.ts
@@ -182,8 +182,9 @@ const COMPLIANCE_KEY_BY_WARNING: Record<string, string> = {
 export const getMediaIncompatibilityReason = (
     contentType: string,
     mediaItems: MediaItem[],
+    aspectRatio?: string,
 ): string | null => {
-    const warning = getMediaValidationWarning(contentType, mediaItems);
+    const warning = getMediaValidationWarning(contentType, mediaItems, aspectRatio);
     if (!warning) return null;
 
     const complianceKey = COMPLIANCE_KEY_BY_WARNING[warning.key];
@@ -249,7 +250,7 @@ export const usePostCompliance = (opts: UsePostComplianceOptions) => {
             for (const pp of selectedPlatforms.value) {
                 if (seen.has(pp.platform)) continue;
                 const contentType = platformContentTypes.value[pp.id] ?? pp.content_type ?? '';
-                const reason = getMediaItemIssue(item, contentType);
+                const reason = getMediaItemIssue(item, contentType, platformMeta.value[pp.id]?.aspect_ratio);
                 if (reason) {
                     seen.add(pp.platform);
                     issues.push({ platform: pp.platform, reason });
@@ -275,7 +276,7 @@ export const usePostCompliance = (opts: UsePostComplianceOptions) => {
                 continue;
             }
 
-            const reason = getMediaIncompatibilityReason(contentType, media.value);
+            const reason = getMediaIncompatibilityReason(contentType, media.value, platformMeta.value[pp.id]?.aspect_ratio);
             if (!reason) continue;
 
             const isSelected = selectedPlatformIds.value.includes(pp.id);
diff --git a/tests/Browser/ChannelMediaIssueTest.php b/tests/Browser/ChannelMediaIssueTest.php
index a5ac915a1..338c3b1ab 100644
--- a/tests/Browser/ChannelMediaIssueTest.php
+++ b/tests/Browser/ChannelMediaIssueTest.php
@@ -111,3 +111,52 @@ function waitForChannelIssueCondition(mixed $page, string $testId, string $condi
         'https://docs.trypost.it/knowledge-base/media#x-twitter',
     )->assertNoJavaScriptErrors();
 });
+
+test('Instagram feed images outside the original aspect window become valid when cropped', function () {
+    $user = User::factory()->create();
+    $workspace = Workspace::factory()->create(['user_id' => $user->id]);
+    $workspace->members()->attach($user->id, ['role' => Role::Member->value]);
+    $user->update(['current_workspace_id' => $workspace->id]);
+
+    $account = SocialAccount::factory()->instagram()->create(['workspace_id' => $workspace->id]);
+    $post = Post::factory()->create([
+        'workspace_id' => $workspace->id,
+        'user_id' => $user->id,
+        'content' => 'A five-image carousel',
+        'media' => array_map(fn (int $index): array => [
+            'id' => "image-{$index}",
+            'type' => 'image',
+            'mime_type' => 'image/jpeg',
+            'path' => "uploads/image-{$index}.jpg",
+            'url' => 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==',
+            'size' => 1024,
+            'meta' => ['width' => 1080, 'height' => 1440],
+        ], range(1, 5)),
+    ]);
+    $postPlatform = PostPlatform::factory()->create([
+        'post_id' => $post->id,
+        'social_account_id' => $account->id,
+        'platform' => Platform::Instagram,
+        'content_type' => ContentType::InstagramFeed,
+        'meta' => ['aspect_ratio' => 'original'],
+    ]);
+
+    $this->actingAs($user);
+
+    $page = visit(route('app.posts.edit', $post));
+    waitForChannelIssueTestId($page, "channel-{$postPlatform->id}");
+
+    $page->click('@instagram-settings-toggle')
+        ->assertPresent('@media-rules-warning')
+        ->assertPresent("@channel-issue-{$postPlatform->id}")
+        ->assertDisabled('@post-submit')
+        ->click('@instagram-aspect-4-5')
+        ->assertMissing('@media-rules-warning')
+        ->assertMissing("@channel-issue-{$postPlatform->id}")
+        ->assertEnabled('@post-submit')
+        ->click('@instagram-aspect-original')
+        ->assertPresent('@media-rules-warning')
+        ->assertPresent("@channel-issue-{$postPlatform->id}")
+        ->assertDisabled('@post-submit')
+        ->assertNoJavaScriptErrors();
+});

From e925c0b882535f78a9310390b3ebd827f4ce2a05 Mon Sep 17 00:00:00 2001
From: Paulo Castellano <paulo@castellanos.llc>
Date: Mon, 28 Sep 2026 10:20:36 -0300
Subject: [PATCH 2/4] fix: allow original Instagram feed images in composer

---
 .../posts/previews/InstagramPreview.vue       | 20 +++++++++++-------
 resources/js/composables/useMedia.ts          |  6 +++---
 tests/Browser/ChannelMediaIssueTest.php       | 21 ++++++++++++-------
 3 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/resources/js/components/posts/previews/InstagramPreview.vue b/resources/js/components/posts/previews/InstagramPreview.vue
index dfb42111a..9c1b7479d 100644
--- a/resources/js/components/posts/previews/InstagramPreview.vue
+++ b/resources/js/components/posts/previews/InstagramPreview.vue
@@ -57,17 +57,23 @@ const isFeed = computed(() => !isReel.value && !isStory.value);
 
 // Padding-bottom percentage = height/width. Used instead of CSS `aspect-ratio`
 // because inside this flex column some rendering paths ignored `aspect-ratio`
-// and the frame stuck to a stale height. `null` = use original media height.
-const ASPECT_PADDING: Record<string, number | null> = {
+// and the frame stuck to a stale height.
+const ASPECT_PADDING: Record<string, number> = {
     '1:1': 100,
     '4:5': 125,
     '16:9': 56.25,
-    'original': null,
 };
 
 const feedAspectStyle = computed(() => {
-    const fraction = ASPECT_PADDING[props.meta?.aspect_ratio ?? '1:1'] ?? 100;
-    return fraction === null ? { aspectRatio: 'auto' } : { paddingBottom: `${fraction}%` };
+    const selectedRatio = props.meta?.aspect_ratio ?? '1:1';
+    const firstImage = props.media[0];
+    const width = firstImage?.meta?.width ?? 0;
+    const height = firstImage?.meta?.height ?? 0;
+    const fraction = selectedRatio === 'original' && width > 0 && height > 0
+        ? height / width * 100
+        : ASPECT_PADDING[selectedRatio] ?? 100;
+
+    return { paddingBottom: `${fraction}%` };
 });
 
 // Format numbers like Instagram
@@ -127,7 +133,7 @@ const truncatedCaption = computed(() => {
                 </div>
 
                 <!-- Post Media - Aspect ratio matches user's chosen crop -->
-                <div class="relative w-full shrink-0 bg-black" :style="feedAspectStyle">
+                <div class="relative w-full shrink-0 bg-black" :style="feedAspectStyle" data-testid="instagram-feed-media">
                     <div class="absolute inset-0">
                         <PostMediaPreview
                             :media="media"
@@ -297,4 +303,4 @@ const truncatedCaption = computed(() => {
             </div>
         </template>
     </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/resources/js/composables/useMedia.ts b/resources/js/composables/useMedia.ts
index 66e5e1811..fa553435e 100644
--- a/resources/js/composables/useMedia.ts
+++ b/resources/js/composables/useMedia.ts
@@ -69,11 +69,11 @@ const itemConstraintWarning = (item: MediaItem, rules: MediaRules, contentType:
         return warning('image_too_large', sizeParams(rules.maxImageBytes, size));
     }
 
-    const imageWillBeCropped = contentType === ContentType.InstagramFeed
+    const instagramImageHasSelectedAspectRatio = contentType === ContentType.InstagramFeed
         && isImage(item)
-        && ['1:1', '4:5', '16:9'].includes(aspectRatio ?? '');
+        && ['1:1', '4:5', '16:9', 'original'].includes(aspectRatio ?? '');
 
-    if (width > 0 && height > 0 && ! (rules.autoFitsImage && isImage(item)) && ! imageWillBeCropped) {
+    if (width > 0 && height > 0 && ! (rules.autoFitsImage && isImage(item)) && ! instagramImageHasSelectedAspectRatio) {
         const ratio = width / height;
 
         if (rules.aspectRatioMin && ratio < rules.aspectRatioMin) {
diff --git a/tests/Browser/ChannelMediaIssueTest.php b/tests/Browser/ChannelMediaIssueTest.php
index 338c3b1ab..90383236a 100644
--- a/tests/Browser/ChannelMediaIssueTest.php
+++ b/tests/Browser/ChannelMediaIssueTest.php
@@ -112,7 +112,7 @@ function waitForChannelIssueCondition(mixed $page, string $testId, string $condi
     )->assertNoJavaScriptErrors();
 });
 
-test('Instagram feed images outside the original aspect window become valid when cropped', function () {
+test('Instagram feed original images remain publishable without cropping', function () {
     $user = User::factory()->create();
     $workspace = Workspace::factory()->create(['user_id' => $user->id]);
     $workspace->members()->attach($user->id, ['role' => Role::Member->value]);
@@ -147,16 +147,23 @@ function waitForChannelIssueCondition(mixed $page, string $testId, string $condi
     waitForChannelIssueTestId($page, "channel-{$postPlatform->id}");
 
     $page->click('@instagram-settings-toggle')
-        ->assertPresent('@media-rules-warning')
-        ->assertPresent("@channel-issue-{$postPlatform->id}")
-        ->assertDisabled('@post-submit')
+        ->assertMissing('@media-rules-warning')
+        ->assertMissing("@channel-issue-{$postPlatform->id}")
+        ->assertEnabled('@post-submit')
         ->click('@instagram-aspect-4-5')
         ->assertMissing('@media-rules-warning')
         ->assertMissing("@channel-issue-{$postPlatform->id}")
         ->assertEnabled('@post-submit')
         ->click('@instagram-aspect-original')
-        ->assertPresent('@media-rules-warning')
-        ->assertPresent("@channel-issue-{$postPlatform->id}")
-        ->assertDisabled('@post-submit')
+        ->assertMissing('@media-rules-warning')
+        ->assertMissing("@channel-issue-{$postPlatform->id}")
+        ->assertEnabled('@post-submit')
+        ->click('@editor-tab-preview')
         ->assertNoJavaScriptErrors();
+
+    waitForChannelIssueTestId($page, 'instagram-feed-media');
+
+    $heightToWidth = $page->script('(() => { const frame = document.querySelector("[data-testid=instagram-feed-media]"); const rect = frame.getBoundingClientRect(); return rect.height / rect.width; })()');
+
+    expect(abs($heightToWidth - 4 / 3))->toBeLessThan(0.01);
 });

From 5906a03fcfe45bc37e91bbce136225e3c60194da Mon Sep 17 00:00:00 2001
From: Paulo Castellano <paulo@castellanos.llc>
Date: Mon, 28 Sep 2026 10:38:21 -0300
Subject: [PATCH 3/4] refactor: simplify Instagram feed aspect handling

---
 .../posts/editor/InstagramSettings.vue        |  4 +-
 .../posts/editor/MediaRulesWarning.vue        |  3 +-
 .../posts/editor/PostEditorTabs.vue           |  2 +-
 .../posts/previews/InstagramPreview.vue       | 20 ++---
 resources/js/composables/useMedia.ts          | 20 ++---
 resources/js/composables/usePostCompliance.ts |  7 +-
 tests/Browser/ChannelMediaIssueTest.php       | 90 +++++++++++++++----
 7 files changed, 102 insertions(+), 44 deletions(-)

diff --git a/resources/js/components/posts/editor/InstagramSettings.vue b/resources/js/components/posts/editor/InstagramSettings.vue
index 07c917eac..608c2e74c 100644
--- a/resources/js/components/posts/editor/InstagramSettings.vue
+++ b/resources/js/components/posts/editor/InstagramSettings.vue
@@ -53,7 +53,7 @@ const aspectRatios = [
 ];
 
 const isFeed = computed(() => props.contentType === ContentType.InstagramFeed);
-const selectedAspectRatio = computed(() => props.meta.aspect_ratio ?? '1:1');
+const selectedAspectRatio = computed(() => props.meta.aspect_ratio ?? 'original');
 
 const pickVariant = (value: string) => {
     if (props.disabled) return;
@@ -140,7 +140,7 @@ const pickAspectRatio = (value: string) => {
                 </div>
             </div>
 
-            <MediaRulesWarning :content-type="contentType" :media="media" :platform="Platform.Instagram" :aspect-ratio="meta.aspect_ratio" />
+            <MediaRulesWarning :content-type="contentType" :media="media" :platform="Platform.Instagram" />
         </div>
     </div>
 </template>
diff --git a/resources/js/components/posts/editor/MediaRulesWarning.vue b/resources/js/components/posts/editor/MediaRulesWarning.vue
index 3d452695d..403bf361e 100644
--- a/resources/js/components/posts/editor/MediaRulesWarning.vue
+++ b/resources/js/components/posts/editor/MediaRulesWarning.vue
@@ -10,10 +10,9 @@ const props = defineProps<{
     contentType: string;
     media: MediaItem[];
     platform: string;
-    aspectRatio?: string;
 }>();
 
-const warning = computed(() => getMediaValidationWarning(props.contentType, props.media, props.aspectRatio));
+const warning = computed(() => getMediaValidationWarning(props.contentType, props.media));
 </script>
 
 <template>
diff --git a/resources/js/components/posts/editor/PostEditorTabs.vue b/resources/js/components/posts/editor/PostEditorTabs.vue
index 532528b83..bcf819ba1 100644
--- a/resources/js/components/posts/editor/PostEditorTabs.vue
+++ b/resources/js/components/posts/editor/PostEditorTabs.vue
@@ -114,7 +114,7 @@ defineExpose({
             <TabsTrigger value="preview" data-testid="editor-tab-preview">{{
                 $t('posts.edit.tabs.preview')
             }}</TabsTrigger>
-            <TabsTrigger value="schedule">{{
+            <TabsTrigger value="schedule" data-testid="editor-tab-channels">{{
                 $t('posts.edit.tabs.channels')
             }}</TabsTrigger>
             <TabsTrigger value="comments">{{
diff --git a/resources/js/components/posts/previews/InstagramPreview.vue b/resources/js/components/posts/previews/InstagramPreview.vue
index 9c1b7479d..20a783e99 100644
--- a/resources/js/components/posts/previews/InstagramPreview.vue
+++ b/resources/js/components/posts/previews/InstagramPreview.vue
@@ -64,16 +64,16 @@ const ASPECT_PADDING: Record<string, number> = {
     '16:9': 56.25,
 };
 
-const feedAspectStyle = computed(() => {
-    const selectedRatio = props.meta?.aspect_ratio ?? '1:1';
-    const firstImage = props.media[0];
-    const width = firstImage?.meta?.width ?? 0;
-    const height = firstImage?.meta?.height ?? 0;
-    const fraction = selectedRatio === 'original' && width > 0 && height > 0
-        ? height / width * 100
-        : ASPECT_PADDING[selectedRatio] ?? 100;
+const feedAspectPadding = computed(() => {
+    const selectedRatio = props.meta?.aspect_ratio ?? 'original';
 
-    return { paddingBottom: `${fraction}%` };
+    if (selectedRatio !== 'original') {
+        return ASPECT_PADDING[selectedRatio] ?? 100;
+    }
+
+    const { width = 0, height = 0 } = props.media[0]?.meta ?? {};
+
+    return width > 0 && height > 0 ? (height / width) * 100 : 100;
 });
 
 // Format numbers like Instagram
@@ -133,7 +133,7 @@ const truncatedCaption = computed(() => {
                 </div>
 
                 <!-- Post Media - Aspect ratio matches user's chosen crop -->
-                <div class="relative w-full shrink-0 bg-black" :style="feedAspectStyle" data-testid="instagram-feed-media">
+                <div class="relative w-full shrink-0 bg-black" :style="{ paddingBottom: `${feedAspectPadding}%` }" data-testid="instagram-feed-media">
                     <div class="absolute inset-0">
                         <PostMediaPreview
                             :media="media"
diff --git a/resources/js/composables/useMedia.ts b/resources/js/composables/useMedia.ts
index fa553435e..faebfc280 100644
--- a/resources/js/composables/useMedia.ts
+++ b/resources/js/composables/useMedia.ts
@@ -41,7 +41,7 @@ const warning = (key: string, params: Record<string, string> = {}): MediaValidat
 const firstWarning = (...candidates: Array<MediaValidationWarning | false | null | undefined>): MediaValidationWarning | null =>
     candidates.find((candidate): candidate is MediaValidationWarning => Boolean(candidate)) ?? null;
 
-const itemConstraintWarning = (item: MediaItem, rules: MediaRules, contentType: string, aspectRatio?: string): MediaValidationWarning | null => {
+const itemConstraintWarning = (item: MediaItem, rules: MediaRules, contentType: string): MediaValidationWarning | null => {
     const size = item.size ?? 0;
     const duration = item.meta?.duration ?? 0;
     const width = item.meta?.width ?? 0;
@@ -69,11 +69,12 @@ const itemConstraintWarning = (item: MediaItem, rules: MediaRules, contentType:
         return warning('image_too_large', sizeParams(rules.maxImageBytes, size));
     }
 
-    const instagramImageHasSelectedAspectRatio = contentType === ContentType.InstagramFeed
-        && isImage(item)
-        && ['1:1', '4:5', '16:9', 'original'].includes(aspectRatio ?? '');
+    const skipSourceAspectRatioCheck = isImage(item) && (
+        rules.autoFitsImage
+        || contentType === ContentType.InstagramFeed
+    );
 
-    if (width > 0 && height > 0 && ! (rules.autoFitsImage && isImage(item)) && ! instagramImageHasSelectedAspectRatio) {
+    if (width > 0 && height > 0 && ! skipSourceAspectRatioCheck) {
         const ratio = width / height;
 
         if (rules.aspectRatioMin && ratio < rules.aspectRatioMin) {
@@ -96,7 +97,6 @@ const itemConstraintWarning = (item: MediaItem, rules: MediaRules, contentType:
 export const getMediaValidationWarning = (
     contentType: string,
     media: MediaItem[],
-    aspectRatio?: string,
 ): MediaValidationWarning | null => {
     if (! contentType) return warning('no_variant');
 
@@ -117,7 +117,7 @@ export const getMediaValidationWarning = (
         rules.acceptDocuments && documents.length > 0 && total > 1 && warning('document_not_alone'),
         ! rules.acceptsGif && media.some(isGif) && warning('gif_not_allowed'),
         ! rules.acceptsMov && media.some(isMov) && warning('mov_not_allowed'),
-        ...media.map((item) => itemConstraintWarning(item, rules, contentType, aspectRatio)),
+        ...media.map((item) => itemConstraintWarning(item, rules, contentType)),
     );
 };
 
@@ -127,7 +127,7 @@ export const getMediaValidationWarning = (
  * (count, requires_media) are NOT checked here — use getMediaValidationWarning
  * for those.
  */
-export const getMediaItemIssue = (item: MediaItem, contentType: string, aspectRatio?: string): string | null => {
+export const getMediaItemIssue = (item: MediaItem, contentType: string): string | null => {
     if (! contentType) return null;
 
     const rules = getMediaRulesForContentType(contentType);
@@ -135,7 +135,7 @@ export const getMediaItemIssue = (item: MediaItem, contentType: string, aspectRa
     if (isDocument(item)) {
         return firstWarning(
             ! rules.acceptDocuments && warning('no_document_allowed'),
-            itemConstraintWarning(item, rules, contentType, aspectRatio),
+            itemConstraintWarning(item, rules, contentType),
         )?.key ?? null;
     }
 
@@ -144,6 +144,6 @@ export const getMediaItemIssue = (item: MediaItem, contentType: string, aspectRa
         ! isVideo(item) && ! rules.acceptImages && warning('no_image_allowed'),
         isGif(item) && ! rules.acceptsGif && warning('gif_not_allowed'),
         isMov(item) && ! rules.acceptsMov && warning('mov_not_allowed'),
-        itemConstraintWarning(item, rules, contentType, aspectRatio),
+        itemConstraintWarning(item, rules, contentType),
     )?.key ?? null;
 };
diff --git a/resources/js/composables/usePostCompliance.ts b/resources/js/composables/usePostCompliance.ts
index 4f083f378..ac64441e4 100644
--- a/resources/js/composables/usePostCompliance.ts
+++ b/resources/js/composables/usePostCompliance.ts
@@ -182,9 +182,8 @@ const COMPLIANCE_KEY_BY_WARNING: Record<string, string> = {
 export const getMediaIncompatibilityReason = (
     contentType: string,
     mediaItems: MediaItem[],
-    aspectRatio?: string,
 ): string | null => {
-    const warning = getMediaValidationWarning(contentType, mediaItems, aspectRatio);
+    const warning = getMediaValidationWarning(contentType, mediaItems);
     if (!warning) return null;
 
     const complianceKey = COMPLIANCE_KEY_BY_WARNING[warning.key];
@@ -250,7 +249,7 @@ export const usePostCompliance = (opts: UsePostComplianceOptions) => {
             for (const pp of selectedPlatforms.value) {
                 if (seen.has(pp.platform)) continue;
                 const contentType = platformContentTypes.value[pp.id] ?? pp.content_type ?? '';
-                const reason = getMediaItemIssue(item, contentType, platformMeta.value[pp.id]?.aspect_ratio);
+                const reason = getMediaItemIssue(item, contentType);
                 if (reason) {
                     seen.add(pp.platform);
                     issues.push({ platform: pp.platform, reason });
@@ -276,7 +275,7 @@ export const usePostCompliance = (opts: UsePostComplianceOptions) => {
                 continue;
             }
 
-            const reason = getMediaIncompatibilityReason(contentType, media.value, platformMeta.value[pp.id]?.aspect_ratio);
+            const reason = getMediaIncompatibilityReason(contentType, media.value);
             if (!reason) continue;
 
             const isSelected = selectedPlatformIds.value.includes(pp.id);
diff --git a/tests/Browser/ChannelMediaIssueTest.php b/tests/Browser/ChannelMediaIssueTest.php
index 90383236a..448eb0231 100644
--- a/tests/Browser/ChannelMediaIssueTest.php
+++ b/tests/Browser/ChannelMediaIssueTest.php
@@ -112,7 +112,13 @@ function waitForChannelIssueCondition(mixed $page, string $testId, string $condi
     )->assertNoJavaScriptErrors();
 });
 
-test('Instagram feed original images remain publishable without cropping', function () {
+/**
+ * @param  array<string, string>  $platformMeta
+ * @param  array<string, int>  $imageMeta
+ * @return array{Post, PostPlatform}
+ */
+function seedInstagramFeedImagePost(array $platformMeta = ['aspect_ratio' => 'original'], array $imageMeta = ['width' => 1080, 'height' => 1440], int $size = 1024): array
+{
     $user = User::factory()->create();
     $workspace = Workspace::factory()->create(['user_id' => $user->id]);
     $workspace->members()->attach($user->id, ['role' => Role::Member->value]);
@@ -129,8 +135,8 @@ function waitForChannelIssueCondition(mixed $page, string $testId, string $condi
             'mime_type' => 'image/jpeg',
             'path' => "uploads/image-{$index}.jpg",
             'url' => 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==',
-            'size' => 1024,
-            'meta' => ['width' => 1080, 'height' => 1440],
+            'size' => $size,
+            'meta' => $imageMeta,
         ], range(1, 5)),
     ]);
     $postPlatform = PostPlatform::factory()->create([
@@ -138,24 +144,54 @@ function waitForChannelIssueCondition(mixed $page, string $testId, string $condi
         'social_account_id' => $account->id,
         'platform' => Platform::Instagram,
         'content_type' => ContentType::InstagramFeed,
-        'meta' => ['aspect_ratio' => 'original'],
+        'meta' => $platformMeta,
     ]);
 
-    $this->actingAs($user);
+    test()->actingAs($user);
+
+    return [$post, $postPlatform];
+}
+
+test('Instagram feed aspect choices do not reject the source image in the editor', function () {
+    [$post, $postPlatform] = seedInstagramFeedImagePost();
 
     $page = visit(route('app.posts.edit', $post));
     waitForChannelIssueTestId($page, "channel-{$postPlatform->id}");
 
-    $page->click('@instagram-settings-toggle')
-        ->assertMissing('@media-rules-warning')
-        ->assertMissing("@channel-issue-{$postPlatform->id}")
-        ->assertEnabled('@post-submit')
-        ->click('@instagram-aspect-4-5')
-        ->assertMissing('@media-rules-warning')
-        ->assertMissing("@channel-issue-{$postPlatform->id}")
-        ->assertEnabled('@post-submit')
-        ->click('@instagram-aspect-original')
-        ->assertMissing('@media-rules-warning')
+    $page->click('@instagram-settings-toggle');
+
+    foreach (['1-1' => 1.0, '4-5' => 5 / 4, '16-9' => 9 / 16, 'original' => 4 / 3] as $option => $expectedHeightToWidth) {
+        $page->click("@instagram-aspect-{$option}")
+            ->assertMissing('@media-rules-warning')
+            ->assertMissing("@channel-issue-{$postPlatform->id}")
+            ->assertEnabled('@post-submit')
+            ->click('@editor-tab-preview');
+
+        waitForChannelIssueTestId($page, 'instagram-feed-media');
+
+        $heightToWidth = $page->script('(() => { const frame = document.querySelector("[data-testid=instagram-feed-media]"); const rect = frame.getBoundingClientRect(); return rect.height / rect.width; })()');
+
+        expect(abs($heightToWidth - $expectedHeightToWidth))->toBeLessThan(0.01);
+
+        $page->click('@editor-tab-channels');
+    }
+
+    $page->assertNoJavaScriptErrors();
+});
+
+test('Instagram feed without a saved aspect ratio uses the original image', function () {
+    [$post, $postPlatform] = seedInstagramFeedImagePost([]);
+
+    $page = visit(route('app.posts.edit', $post));
+    waitForChannelIssueTestId($page, "channel-{$postPlatform->id}");
+
+    $page->click('@instagram-settings-toggle');
+
+    $originalSelected = $page->script('document.querySelector("[data-testid=instagram-aspect-original]").classList.contains("bg-violet-100")');
+
+    expect($originalSelected)->toBeTrue();
+
+    $page->assertMissing('@media-rules-warning')
         ->assertMissing("@channel-issue-{$postPlatform->id}")
         ->assertEnabled('@post-submit')
         ->click('@editor-tab-preview')
@@ -167,3 +203,27 @@ function waitForChannelIssueCondition(mixed $page, string $testId, string $condi
 
     expect(abs($heightToWidth - 4 / 3))->toBeLessThan(0.01);
 });
+
+test('Instagram original preview falls back to square when image dimensions are unavailable', function () {
+    [$post] = seedInstagramFeedImagePost(imageMeta: []);
+
+    $page = visit(route('app.posts.edit', $post));
+    $page->click('@editor-tab-preview');
+    waitForChannelIssueTestId($page, 'instagram-feed-media');
+
+    $heightToWidth = $page->script('(() => { const frame = document.querySelector("[data-testid=instagram-feed-media]"); const rect = frame.getBoundingClientRect(); return rect.height / rect.width; })()');
+
+    expect(abs($heightToWidth - 1.0))->toBeLessThan(0.01);
+});
+
+test('Instagram aspect selection still enforces image size limits', function () {
+    [$post] = seedInstagramFeedImagePost(size: 9 * 1024 * 1024);
+
+    $page = visit(route('app.posts.edit', $post));
+    $page->click('@instagram-settings-toggle');
+    waitForChannelIssueTestId($page, 'media-rules-warning');
+
+    $page->assertPresent('@media-rules-warning')
+        ->assertDisabled('@post-submit')
+        ->assertNoJavaScriptErrors();
+});

From f5c9d4f3a77b78766b79a05d9d5141ff33752652 Mon Sep 17 00:00:00 2001
From: Paulo Castellano <paulo@castellanos.llc>
Date: Mon, 28 Sep 2026 10:41:25 -0300
Subject: [PATCH 4/4] refactor: share Instagram aspect ratio values in frontend

---
 .../components/posts/editor/InstagramSettings.vue | 15 ++++++++-------
 .../posts/previews/InstagramPreview.vue           | 11 ++++++-----
 resources/js/types/aspect-ratio.ts                |  8 ++++++++
 3 files changed, 22 insertions(+), 12 deletions(-)
 create mode 100644 resources/js/types/aspect-ratio.ts

diff --git a/resources/js/components/posts/editor/InstagramSettings.vue b/resources/js/components/posts/editor/InstagramSettings.vue
index 608c2e74c..8b9803985 100644
--- a/resources/js/components/posts/editor/InstagramSettings.vue
+++ b/resources/js/components/posts/editor/InstagramSettings.vue
@@ -5,6 +5,7 @@ import { computed, ref } from 'vue';
 import MediaRulesWarning from '@/components/posts/editor/MediaRulesWarning.vue';
 import { Avatar } from '@/components/ui/avatar';
 import { getPlatformLogo } from '@/composables/usePlatformLogo';
+import { AspectRatio, type AspectRatioValue } from '@/types/aspect-ratio';
 import { ContentType } from '@/types/content-type';
 import type { MediaItem } from '@/types/media';
 import { Platform } from '@/types/platform';
@@ -46,21 +47,21 @@ const variants = [
 
 
 const aspectRatios = [
-    { value: '1:1', labelKey: 'posts.form.instagram.aspect.square' },
-    { value: '4:5', labelKey: 'posts.form.instagram.aspect.portrait' },
-    { value: '16:9', labelKey: 'posts.form.instagram.aspect.landscape' },
-    { value: 'original', labelKey: 'posts.form.instagram.aspect.original' },
-];
+    { value: AspectRatio.Square, labelKey: 'posts.form.instagram.aspect.square' },
+    { value: AspectRatio.Portrait, labelKey: 'posts.form.instagram.aspect.portrait' },
+    { value: AspectRatio.Landscape, labelKey: 'posts.form.instagram.aspect.landscape' },
+    { value: AspectRatio.Original, labelKey: 'posts.form.instagram.aspect.original' },
+] as const;
 
 const isFeed = computed(() => props.contentType === ContentType.InstagramFeed);
-const selectedAspectRatio = computed(() => props.meta.aspect_ratio ?? 'original');
+const selectedAspectRatio = computed(() => props.meta.aspect_ratio ?? AspectRatio.Original);
 
 const pickVariant = (value: string) => {
     if (props.disabled) return;
     emit('update:contentType', value);
 };
 
-const pickAspectRatio = (value: string) => {
+const pickAspectRatio = (value: AspectRatioValue) => {
     if (props.disabled) return;
     emit('update:meta', { ...props.meta, aspect_ratio: value });
 };
diff --git a/resources/js/components/posts/previews/InstagramPreview.vue b/resources/js/components/posts/previews/InstagramPreview.vue
index 20a783e99..3d83cbb16 100644
--- a/resources/js/components/posts/previews/InstagramPreview.vue
+++ b/resources/js/components/posts/previews/InstagramPreview.vue
@@ -16,6 +16,7 @@ import { computed } from 'vue';
 import PostMediaPreview from '@/components/posts/previews/PostMediaPreview.vue';
 import VerticalMediaCanvas from '@/components/posts/previews/VerticalMediaCanvas.vue';
 import { getInitials } from '@/composables/useInitials';
+import { AspectRatio } from '@/types/aspect-ratio';
 import { ContentType } from '@/types/content-type';
 import type { MediaItem } from '@/types/media';
 
@@ -59,15 +60,15 @@ const isFeed = computed(() => !isReel.value && !isStory.value);
 // because inside this flex column some rendering paths ignored `aspect-ratio`
 // and the frame stuck to a stale height.
 const ASPECT_PADDING: Record<string, number> = {
-    '1:1': 100,
-    '4:5': 125,
-    '16:9': 56.25,
+    [AspectRatio.Square]: 100,
+    [AspectRatio.Portrait]: 125,
+    [AspectRatio.Landscape]: 56.25,
 };
 
 const feedAspectPadding = computed(() => {
-    const selectedRatio = props.meta?.aspect_ratio ?? 'original';
+    const selectedRatio = props.meta?.aspect_ratio ?? AspectRatio.Original;
 
-    if (selectedRatio !== 'original') {
+    if (selectedRatio !== AspectRatio.Original) {
         return ASPECT_PADDING[selectedRatio] ?? 100;
     }
 
diff --git a/resources/js/types/aspect-ratio.ts b/resources/js/types/aspect-ratio.ts
new file mode 100644
index 000000000..c64e9fd6b
--- /dev/null
+++ b/resources/js/types/aspect-ratio.ts
@@ -0,0 +1,8 @@
+export const AspectRatio = {
+    Square: '1:1',
+    Portrait: '4:5',
+    Landscape: '16:9',
+    Original: 'original',
+} as const;
+
+export type AspectRatioValue = (typeof AspectRatio)[keyof typeof AspectRatio];