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

fix(ui): mobile polish — responsive headings, menu placement, truncation

Browse source 
PageHeader downscales on phones; workspace switcher opens within the viewport; OAuth page-selects go icon-only + truncate; invite info rows truncate.
This commit is contained in:
Paulo Castellano 2026-07-17 18:38:21 -03:00
parent 5118640a9c
commit 15eef28161
7 changed files with 20 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
resources/js/components/AppSidebar.vue
View file

@ -200,7 +200,7 @@ const handleCreateWorkspace = () => {
</SidebarMenuButton>
</DropdownMenuTrigger>
<DropdownMenuContent class="w-(--reka-dropdown-menu-trigger-width) min-w-56"
align="start" side="right" :side-offset="4">
align="start" side="bottom" :side-offset="4">
<DropdownMenuLabel>
{{ $t('sidebar.workspaces') }}
</DropdownMenuLabel>

2
resources/js/components/PageHeader.vue
View file

@ -9,7 +9,7 @@ defineProps<{
<template>
<header class="space-y-1">
<h1
class="text-4xl font-semibold leading-tight text-foreground"
class="text-2xl font-semibold leading-tight text-foreground sm:text-4xl"
style="font-family: var(--font-display)"
>
{{ title }}

4
resources/js/pages/accounts/FacebookPageSelect.vue
View file

@ -71,7 +71,7 @@ const pageUrl = (username: string | null): string | null =>
class="flex items-center gap-4 rounded-lg border bg-card p-4"
dusk="facebook-page"
>
<Avatar class="h-12 w-12 rounded-lg">
<Avatar class="h-12 w-12 shrink-0 rounded-lg">
<AvatarImage v-if="page.picture" :src="page.picture" class="object-cover" />
<AvatarFallback class="rounded-lg bg-blue-100 dark:bg-blue-900">
<IconBrandFacebook class="h-6 w-6 text-blue-600 dark:text-blue-400" />
@ -92,7 +92,7 @@ const pageUrl = (username: string | null): string | null =>
@click="openExternal(pageUrl(page.username))"
>
<IconExternalLink class="h-4 w-4" />
{{ $t('accounts.facebook.view') }}
<span class="hidden sm:inline">{{ $t('accounts.facebook.view') }}</span>
</Button>
<Button size="sm" dusk="choose-facebook-page" :disabled="form.processing" @click="handleSelectPage(page)">
{{ $t('accounts.facebook.choose') }}

4
resources/js/pages/accounts/InstagramFacebookPageSelect.vue
View file

@ -73,7 +73,7 @@ const igUrl = (username: string): string => `https://www.instagram.com/${usernam
class="flex items-center gap-4 rounded-lg border bg-card p-4"
dusk="instagram-page"
>
<Avatar class="h-12 w-12 rounded-lg">
<Avatar class="h-12 w-12 shrink-0 rounded-lg">
<AvatarImage v-if="page.ig_picture" :src="page.ig_picture" class="object-cover" />
<AvatarFallback class="rounded-lg bg-pink-100 dark:bg-pink-900">
<IconBrandInstagram class="h-6 w-6 text-pink-600 dark:text-pink-400" />
@ -90,7 +90,7 @@ const igUrl = (username: string): string => `https://www.instagram.com/${usernam
@click="openExternal(igUrl(page.ig_username))"
>
<IconExternalLink class="h-4 w-4" />
{{ $t('accounts.instagram_facebook.view') }}
<span class="hidden sm:inline">{{ $t('accounts.instagram_facebook.view') }}</span>
</Button>
<Button size="sm" dusk="choose-instagram-page" :disabled="form.processing" @click="handleSelectPage(page)">
{{ $t('accounts.instagram_facebook.choose') }}

8
resources/js/pages/accounts/LinkedInSelect.vue
View file

@ -93,7 +93,7 @@ const organizationUrl = (vanity: string | null): string | null =>
class="flex items-center gap-4 rounded-lg border bg-card p-4"
dusk="linkedin-identity-person"
>
<Avatar class="h-12 w-12 rounded-lg">
<Avatar class="h-12 w-12 shrink-0 rounded-lg">
<AvatarImage v-if="person.avatar" :src="person.avatar" class="object-cover" />
<AvatarFallback class="rounded-lg bg-blue-100 dark:bg-blue-900">
<IconUser class="h-6 w-6 text-blue-600 dark:text-blue-400" />
@ -121,7 +121,7 @@ const organizationUrl = (vanity: string | null): string | null =>
@click="openExternal(personUrl(person.vanity_name))"
>
<IconExternalLink class="h-4 w-4" />
{{ $t('accounts.linkedin.view') }}
<span class="hidden sm:inline">{{ $t('accounts.linkedin.view') }}</span>
</Button>
<Button size="sm" dusk="choose-person" :disabled="form.processing" @click="choosePerson">
{{ $t('accounts.linkedin.choose') }}
@ -135,7 +135,7 @@ const organizationUrl = (vanity: string | null): string | null =>
class="flex items-center gap-4 rounded-lg border bg-card p-4"
dusk="linkedin-identity-organization"
>
<Avatar class="h-12 w-12 rounded-lg">
<Avatar class="h-12 w-12 shrink-0 rounded-lg">
<AvatarImage v-if="org.logo" :src="org.logo" class="object-cover" />
<AvatarFallback class="rounded-lg bg-blue-100 dark:bg-blue-900">
<IconBuilding class="h-6 w-6 text-blue-600 dark:text-blue-400" />
@ -163,7 +163,7 @@ const organizationUrl = (vanity: string | null): string | null =>
@click="openExternal(organizationUrl(org.vanity_name))"
>
<IconExternalLink class="h-4 w-4" />
{{ $t('accounts.linkedin.view') }}
<span class="hidden sm:inline">{{ $t('accounts.linkedin.view') }}</span>
</Button>
<Button size="sm" dusk="choose-organization" :disabled="form.processing" @click="chooseOrganization(org)">
{{ $t('accounts.linkedin.choose') }}

18
resources/js/pages/auth/AcceptInvite.vue
View file

@ -57,17 +57,17 @@ const inviteUrl = computed(() => `/invites/${props.invite.id}`);
</CardHeader>
<CardContent class="space-y-6">
<div class="rounded-lg bg-muted p-4 space-y-2">
<div v-if="invite.workspace" class="flex justify-between text-sm">
<span class="text-muted-foreground">{{ $t('auth.accept_invite.workspace') }}</span>
<span class="font-medium">{{ invite.workspace.name }}</span>
<div v-if="invite.workspace" class="flex justify-between gap-3 text-sm">
<span class="shrink-0 text-muted-foreground">{{ $t('auth.accept_invite.workspace') }}</span>
<span class="min-w-0 truncate font-medium">{{ invite.workspace.name }}</span>
</div>
<div class="flex justify-between text-sm">
<span class="text-muted-foreground">{{ $t('auth.accept_invite.your_role') }}</span>
<span class="font-medium">{{ invite.role.label }}</span>
<div class="flex justify-between gap-3 text-sm">
<span class="shrink-0 text-muted-foreground">{{ $t('auth.accept_invite.your_role') }}</span>
<span class="min-w-0 truncate font-medium">{{ invite.role.label }}</span>
</div>
<div class="flex justify-between text-sm">
<span class="text-muted-foreground">{{ $t('auth.accept_invite.email') }}</span>
<span class="font-medium">{{ invite.email }}</span>
<div class="flex justify-between gap-3 text-sm">
<span class="shrink-0 text-muted-foreground">{{ $t('auth.accept_invite.email') }}</span>
<span class="min-w-0 truncate font-medium">{{ invite.email }}</span>
</div>
</div>

2
resources/js/pages/posts/Show.vue
View file

@ -155,7 +155,7 @@ usePostEcho(props.post.id, '.post.platform.status.updated', () => {
<div class="mx-auto max-w-2xl px-6 py-10">
<!-- Media grid (top) — separate rounded tiles, 4-col -->
<div v-if="post.media.length > 0" class="mb-6">
<div class="grid grid-cols-4 gap-2">
<div class="grid grid-cols-3 gap-2 sm:grid-cols-4">
<button
v-for="(item, i) in post.media"
:key="item.id"