From f9a1731073101fcb7d458d3a021870e618de60ef Mon Sep 17 00:00:00 2001
From: Paulo Castellano <paulo@castellanos.llc>
Date: Fri, 17 Jul 2026 20:00:13 -0300
Subject: [PATCH] fix(auth): stop AuthSplitLayout overflowing on mobile with
 wide content
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The mobile grid column was implicit (auto), so it sized to content — a long
workspace name (truncate = nowrap, wide intrinsic size) stretched the form
column to its max-w-lg (512px) and overflowed a 375px viewport by ~31px on the
workspaces list. Make the column an explicit minmax(0,1fr) track and give the
grid item min-w-0 so it stays within the viewport and the name truncates.

Found by a runtime horizontal-overflow check; adds MobileOverflowTest guarding
it across the layout variants (AuthLayout, default, full-width editor, detail).
---
 resources/js/layouts/auth/AuthSplitLayout.vue |  4 +-
 tests/Browser/MobileOverflowTest.php          | 79 +++++++++++++++++++
 2 files changed, 81 insertions(+), 2 deletions(-)
 create mode 100644 tests/Browser/MobileOverflowTest.php

diff --git a/resources/js/layouts/auth/AuthSplitLayout.vue b/resources/js/layouts/auth/AuthSplitLayout.vue
index 3a362bf1..1450ca41 100644
--- a/resources/js/layouts/auth/AuthSplitLayout.vue
+++ b/resources/js/layouts/auth/AuthSplitLayout.vue
@@ -85,8 +85,8 @@ const platforms = [
 </script>
 
 <template>
-    <div class="grid min-h-svh lg:grid-cols-2">
-        <div class="flex flex-col gap-4 p-6 md:p-10">
+    <div class="grid min-h-svh grid-cols-1 lg:grid-cols-2">
+        <div class="flex min-w-0 flex-col gap-4 p-6 md:p-10">
             <div class="flex items-start">
                 <img
                     src="/images/trypost/logo-light.png"
diff --git a/tests/Browser/MobileOverflowTest.php b/tests/Browser/MobileOverflowTest.php
new file mode 100644
index 00000000..61c95a5a
--- /dev/null
+++ b/tests/Browser/MobileOverflowTest.php
@@ -0,0 +1,79 @@
+<?php
+
+declare(strict_types=1);
+
+use App\Enums\UserWorkspace\Role;
+use App\Models\Automation;
+use App\Models\Post;
+use App\Models\PostPlatform;
+use App\Models\User;
+use App\Models\Workspace;
+
+/**
+ * Guards against horizontal overflow on mobile across the layout variants
+ * (AuthLayout, default AppLayout, full-width editor, automations detail).
+ * Reproduces the AuthSplitLayout long-name overflow that a fixed grid column
+ * caused. Returns the widest offending element on failure for quick triage.
+ */
+function assertNoHorizontalOverflow(mixed $page, string $label): void
+{
+    $result = $page->script(<<<'JS'
+        (async () => {
+            for (let i = 0; i < 80; i++) {
+                if (document.querySelector('h1, h2, main, [data-sidebar="trigger"]')) break;
+                await new Promise((r) => setTimeout(r, 50));
+            }
+            await new Promise((r) => setTimeout(r, 400));
+            const vw = window.innerWidth;
+            let worst = null;
+            document.querySelectorAll('*').forEach((el) => {
+                const r = el.getBoundingClientRect();
+                if (r.right > vw + 2 && (!worst || r.right > worst.right)) {
+                    worst = { right: Math.round(r.right), tag: el.tagName.toLowerCase(), cls: (el.getAttribute('class') || '').slice(0, 80) };
+                }
+            });
+            return { sw: document.documentElement.scrollWidth, iw: vw, worst };
+        })()
+    JS);
+
+    $sw = (int) ($result['sw'] ?? 0);
+    $iw = (int) ($result['iw'] ?? 375);
+    $worst = $result['worst'] ?? null;
+    $detail = $worst ? " widest: <{$worst['tag']} class=\"{$worst['cls']}\"> right={$worst['right']}" : '';
+
+    expect($sw - $iw)->toBeLessThanOrEqual(2, "{$label} overflows: scrollWidth {$sw} > innerWidth {$iw}.{$detail}");
+}
+
+test('key pages do not overflow horizontally on a phone', function () {
+    $user = User::factory()->create();
+    $workspace = Workspace::factory()->create([
+        'user_id' => $user->id,
+        // A long name previously stretched the AuthSplitLayout grid column past the viewport.
+        'name' => 'A Really Very Extremely Long Workspace Name That Should Truncate Instead Of Overflowing',
+    ]);
+    $workspace->members()->attach($user->id, ['role' => Role::Member->value]);
+    $user->update(['current_workspace_id' => $workspace->id]);
+
+    $post = Post::factory()->create([
+        'workspace_id' => $workspace->id,
+        'user_id' => $user->id,
+        'content' => 'Launching our new mobile editor today!',
+    ]);
+    PostPlatform::factory()->count(2)->create(['post_id' => $post->id]);
+    $automation = Automation::factory()->create(['workspace_id' => $workspace->id]);
+
+    $this->actingAs($user);
+
+    $pages = [
+        'workspaces (AuthLayout)' => route('app.workspaces.index'),
+        'posts index (default)' => route('app.posts.index'),
+        'post editor (full-width)' => route('app.posts.edit', $post),
+        'calendar (full-width)' => route('app.calendar'),
+        'settings (tabs)' => route('app.api-keys.index'),
+        'automation metrics (detail)' => route('app.automations.metrics', $automation),
+    ];
+
+    foreach ($pages as $label => $url) {
+        assertNoHorizontalOverflow(visit($url)->resize(375, 812), $label);
+    }
+});