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

fix(ui): third-pass mobile fixes

Browse source 
- AutomationHeader reserves space for the floating hamburger on mobile (its full-width pages had the back button under the trigger)
- AlertDialogContent caps height + scrolls like DialogContent
- AiGenerateDialog preview wraps long tokens (break-words)
- Enlarge notification panel action buttons on the full-width mobile panel (max-sm:size-9)
- min-w-0 so the billing processing title-bar label can truncate
This commit is contained in:
Paulo Castellano 2026-07-17 19:41:52 -03:00
parent 3d33d0d380
commit 2013808312
5 changed files with 8 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
resources/js/components/NotificationBell.vue
View file

@ -226,7 +226,7 @@ onBeforeUnmount(() => {
<TooltipTrigger as-child>
<button
type="button"
class="inline-flex size-7 cursor-pointer items-center justify-center rounded-md border-2 border-foreground bg-card text-foreground shadow-2xs transition-all hover:bg-violet-100"
class="inline-flex size-7 max-sm:size-9 cursor-pointer items-center justify-center rounded-md border-2 border-foreground bg-card text-foreground shadow-2xs transition-all hover:bg-violet-100"
@click="handleMarkAllAsRead"
>
<IconChecks class="size-3.5" stroke-width="2.5" />
@ -238,7 +238,7 @@ onBeforeUnmount(() => {
<TooltipTrigger as-child>
<button
type="button"
class="inline-flex size-7 cursor-pointer items-center justify-center rounded-md border-2 border-foreground bg-card text-foreground shadow-2xs transition-all hover:bg-violet-100"
class="inline-flex size-7 max-sm:size-9 cursor-pointer items-center justify-center rounded-md border-2 border-foreground bg-card text-foreground shadow-2xs transition-all hover:bg-violet-100"
@click="handleArchiveAll"
>
<IconArchive class="size-3.5" stroke-width="2.5" />
@ -248,7 +248,7 @@ onBeforeUnmount(() => {
</Tooltip>
<button
type="button"
class="inline-flex size-7 cursor-pointer items-center justify-center rounded-full border-2 border-foreground bg-card text-foreground shadow-2xs transition-all hover:-rotate-90 hover:bg-rose-100"
class="inline-flex size-7 max-sm:size-9 cursor-pointer items-center justify-center rounded-full border-2 border-foreground bg-card text-foreground shadow-2xs transition-all hover:-rotate-90 hover:bg-rose-100"
@click="close"
>
<IconX class="size-3.5" stroke-width="2.5" />
@ -281,7 +281,7 @@ onBeforeUnmount(() => {
<TooltipTrigger as-child>
<button
type="button"
class="inline-flex size-7 cursor-pointer items-center justify-center rounded-md text-foreground/60 transition-colors hover:bg-foreground/10 hover:text-foreground"
class="inline-flex size-7 max-sm:size-9 cursor-pointer items-center justify-center rounded-md text-foreground/60 transition-colors hover:bg-foreground/10 hover:text-foreground"
@click="handleMarkAsRead(notification)"
>
<IconCheck class="size-3.5" stroke-width="2.5" />

2
resources/js/components/automations/AutomationHeader.vue
View file

@ -26,7 +26,7 @@ const statusConfig = (status: string) => {
<template>
<div class="flex-shrink-0">
<header class="flex items-center justify-between gap-4 border-b-2 border-foreground/10 bg-card px-4 py-2">
<header class="flex items-center justify-between gap-4 border-b-2 border-foreground/10 bg-card py-2 pl-12 pr-4 md:pl-4">
<div class="flex min-w-0 items-center gap-3">
<Link :href="automationsIndex.url()">
<Button variant="outline" size="icon-sm">

2
resources/js/components/posts/ai/AiGenerateDialog.vue
View file

@ -104,7 +104,7 @@ watch(open, () => {
<div v-if="status !== 'idle'" class="grid gap-2">
<Label class="text-[11px] font-black uppercase tracking-widest text-foreground/60">{{ $t('posts.ai.generate.preview_label') }}</Label>
<div class="min-h-[120px] whitespace-pre-wrap rounded-lg border-2 border-foreground bg-card px-3 py-2 text-sm font-medium text-foreground shadow-2xs">{{ previewText || '...' }}</div>
<div class="min-h-[120px] whitespace-pre-wrap break-words rounded-lg border-2 border-foreground bg-card px-3 py-2 text-sm font-medium text-foreground shadow-2xs">{{ previewText || '...' }}</div>
<p v-if="status === 'failed'" class="text-xs font-semibold text-rose-700">{{ errorMessage }}</p>
</div>
</div>

2
resources/js/components/ui/alert-dialog/AlertDialogContent.vue
View file

@ -33,7 +33,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
v-bind="{ ...$attrs, ...forwarded }"
:class="
cn(
'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 max-h-[85dvh] overflow-y-auto rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
props.class,
)
"

2
resources/js/pages/billing/Processing.vue
View file

@ -109,7 +109,7 @@ onUnmounted(() => {
<span class="size-3 rounded-full border border-foreground bg-amber-300" />
<span class="size-3 rounded-full border border-foreground bg-emerald-300" />
</div>
<div class="ml-2 truncate text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
<div class="ml-2 min-w-0 truncate text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
trypost.it · checkout
</div>
<span class="ml-auto inline-flex items-center gap-1.5 rounded-md border-2 border-foreground bg-foreground px-2 py-0.5 text-[10px] font-black uppercase tracking-widest text-background shadow-2xs">