vignesh/trypost
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(auth): stop AuthSplitLayout overflowing on mobile with wide content

Browse source 
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).
This commit is contained in:
Paulo Castellano 2026-07-17 20:00:13 -03:00
parent 2013808312
commit f9a1731073
2 changed files with 81 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
resources/js/layouts/auth/AuthSplitLayout.vue
View file

@ -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"

79
tests/Browser/MobileOverflowTest.php Normal file
View file

@ -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);
}
});