Improve mobile UX on public pages and the live room header.
Deploy Ladill Meet / deploy (push) Successful in 35s

Cap customer-facing logos at 50vw on phones, tighten leave-feedback layout, and show icon-only share plus a blinking record dot on mobile.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
isaacclad
2026-07-03 14:58:51 +00:00
co-authored by Cursor
parent 56d486d15c
commit 9943dc9e44
7 changed files with 41 additions and 28 deletions
+6
View File
@@ -15,6 +15,12 @@
display: none !important;
}
@media (max-width: 639px) {
.public-brand-logo {
max-width: 50vw;
}
}
/* App shell: always light (ignore OS dark mode). Live meeting keeps dark UI. */
html.app-shell {
color-scheme: light;
+1 -1
View File
@@ -22,7 +22,7 @@
<div class="px-6 pb-8 pt-7 text-center sm:px-8">
<img src="{{ asset($logo) }}?v={{ @filemtime($logoPath) ?: '1' }}"
alt="{{ $signedOut['title'] ?? config('app.name') }}"
class="mx-auto h-7 w-auto">
class="public-brand-logo mx-auto h-7 w-auto">
<div @class([
'mx-auto mt-6 flex h-14 w-14 items-center justify-center rounded-2xl',
+1 -1
View File
@@ -15,7 +15,7 @@
</head>
<body class="flex min-h-screen items-center justify-center bg-slate-50 font-sans text-slate-900 antialiased">
<div class="mx-auto max-w-md px-6 text-center">
<img src="{{ asset($logo) }}?v={{ @filemtime($logoPath) ?: '1' }}" alt="{{ $title }}" class="mx-auto h-8 w-auto">
<img src="{{ asset($logo) }}?v={{ @filemtime($logoPath) ?: '1' }}" alt="{{ $title }}" class="public-brand-logo mx-auto h-8 w-auto">
<h1 class="mt-6 text-xl font-semibold">We couldn't sign you in</h1>
<p class="mt-2 text-sm text-slate-500">
Sign-in didn't complete after a few tries. This is usually a temporary
@@ -31,11 +31,11 @@
<div class="fixed left-0 top-0 z-20 p-6">
<img src="{{ asset(\App\Support\OrganizationBranding::DEFAULT_LOGO) }}?v={{ @filemtime(public_path(\App\Support\OrganizationBranding::DEFAULT_LOGO)) ?: '1' }}"
alt="Ladill Meet"
class="h-8 w-auto max-w-[220px] object-contain object-left">
class="public-brand-logo h-8 w-auto max-w-[220px] object-contain object-left">
</div>
@endif
<div class="relative mx-auto flex min-h-screen max-w-3xl flex-col pt-20 px-6 pb-12">
<div class="relative mx-auto flex min-h-screen max-w-3xl flex-col px-4 pb-10 pt-16 sm:px-6 sm:pb-12 sm:pt-20">
@if ($eyebrow)
<p class="text-center text-sm font-semibold uppercase tracking-wider text-indigo-600">{{ $eyebrow }}</p>
@endif
+19 -19
View File
@@ -2,20 +2,20 @@
<div class="flex min-h-[calc(100vh-8rem)] flex-col items-center justify-center">
<form method="POST" action="{{ route('meet.left.feedback', $session) }}"
x-data="leaveFeedback"
class="w-full max-w-lg rounded-3xl border border-slate-200 bg-white p-8 shadow-sm">
class="w-full max-w-lg rounded-2xl border border-slate-200 bg-white p-4 shadow-sm sm:rounded-3xl sm:p-6 md:p-8">
@csrf
<div class="text-center">
<h1 class="text-2xl font-bold text-slate-900">You left the {{ $room->isConference() ? 'conference' : 'meeting' }}</h1>
<h1 class="text-xl font-bold text-slate-900 sm:text-2xl">You left the {{ $room->isConference() ? 'conference' : 'meeting' }}</h1>
<p class="mt-2 text-sm text-slate-500">{{ $room->title }}</p>
@if (! empty($feedback['display_name']))
<p class="mt-1 text-sm text-slate-600">Thanks, {{ $feedback['display_name'] }}.</p>
@endif
</div>
<div class="mt-8">
<p class="text-sm font-medium text-slate-700">How was the {{ $room->isConference() ? 'conference' : 'meeting' }} overall?</p>
<div class="mt-3 flex justify-center gap-2">
<div class="mt-6 sm:mt-8">
<p class="text-center text-sm font-medium text-slate-700 sm:text-left">How was the {{ $room->isConference() ? 'conference' : 'meeting' }} overall?</p>
<div class="mt-3 flex justify-center gap-0.5 sm:gap-2">
@foreach (range(1, 5) as $star)
<button type="button"
@click="setRating({{ $star }})"
@@ -23,7 +23,7 @@
@mouseleave="hoverRating = 0"
class="rounded-lg p-1 transition-transform hover:scale-110"
aria-label="Rate {{ $star }} stars">
<svg class="h-9 w-9"
<svg class="h-8 w-8 sm:h-9 sm:w-9"
:class="(hoverRating || rating) >= {{ $star }} ? 'text-amber-400' : 'text-slate-300'"
fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z"/>
@@ -34,14 +34,14 @@
<input type="hidden" name="rating" :value="rating" required>
</div>
<div class="mt-8 grid gap-6 sm:grid-cols-2">
<div>
<div class="mt-6 space-y-6 sm:mt-8 md:grid md:grid-cols-2 md:gap-6 md:space-y-0">
<div class="text-center md:text-left">
<p class="text-sm font-medium text-slate-700">Audio quality</p>
<div class="mt-2 flex gap-1">
<div class="mt-2 flex justify-center gap-1 md:justify-start">
@foreach (range(1, 5) as $star)
<button type="button" @click="setAudioRating({{ $star }})"
class="rounded p-0.5">
<svg class="h-6 w-6"
class="rounded p-1">
<svg class="h-7 w-7 sm:h-6 sm:w-6"
:class="(hoverAudio || audioRating) >= {{ $star }} ? 'text-amber-400' : 'text-slate-300'"
fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z"/>
@@ -51,13 +51,13 @@
</div>
<input type="hidden" name="audio_rating" :value="audioRating || ''">
</div>
<div>
<div class="text-center md:text-left">
<p class="text-sm font-medium text-slate-700">Video quality</p>
<div class="mt-2 flex gap-1">
<div class="mt-2 flex justify-center gap-1 md:justify-start">
@foreach (range(1, 5) as $star)
<button type="button" @click="setVideoRating({{ $star }})"
class="rounded p-0.5">
<svg class="h-6 w-6"
class="rounded p-1">
<svg class="h-7 w-7 sm:h-6 sm:w-6"
:class="(hoverVideo || videoRating) >= {{ $star }} ? 'text-amber-400' : 'text-slate-300'"
fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z"/>
@@ -69,20 +69,20 @@
</div>
</div>
<div class="mt-8">
<div class="mt-6 sm:mt-8">
<label class="block text-sm font-medium text-slate-700">Anything else we should know? <span class="font-normal text-slate-400">(optional)</span></label>
<textarea name="comment" rows="3" x-model="comment" placeholder="Share feedback for the host or Ladill Meet…"
class="mt-2 w-full rounded-2xl border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 shadow-sm ring-1 ring-slate-200 placeholder:text-slate-400 focus:border-indigo-500 focus:ring-indigo-500"></textarea>
</div>
<div class="mt-8 flex flex-col gap-3 sm:flex-row">
<div class="mt-6 flex flex-col gap-3 sm:mt-8">
<button type="submit"
class="btn-primary btn-primary-lg flex-1 py-3.5 font-semibold disabled:cursor-not-allowed disabled:opacity-50"
class="btn-primary btn-primary-lg w-full py-3.5 font-semibold disabled:cursor-not-allowed disabled:opacity-50"
:disabled="!canSubmit()">
Submit feedback
</button>
<a href="{{ route('meet.left.thanks', $session) }}"
class="inline-flex flex-1 items-center justify-center rounded-2xl border border-slate-200 bg-white px-4 py-3.5 text-sm font-medium text-slate-600 hover:bg-slate-50">
class="inline-flex w-full items-center justify-center rounded-2xl border border-slate-200 bg-white px-4 py-3.5 text-sm font-medium text-slate-600 hover:bg-slate-50">
Skip
</a>
</div>
@@ -4,5 +4,5 @@
<div class="fixed left-0 top-0 z-20 p-6">
<img src="{{ OrganizationBranding::logoUrl($organization) }}"
alt="{{ OrganizationBranding::logoAlt($organization) }}"
class="h-8 w-auto max-w-[220px] object-contain object-left">
class="public-brand-logo h-8 w-auto max-w-[220px] object-contain object-left sm:max-w-[220px]">
</div>
+11 -4
View File
@@ -157,12 +157,19 @@
</div>
<div class="flex shrink-0 items-center gap-2 text-xs text-slate-400">
<button @click.stop="openShare()" data-share-trigger type="button"
class="inline-flex items-center gap-1.5 rounded-lg bg-slate-900 px-2.5 py-1.5 text-xs font-medium text-slate-200 transition-colors hover:bg-slate-800"
title="Share {{ $sessionNoun }} link">
class="inline-flex items-center justify-center rounded-lg bg-slate-900 p-2 text-slate-200 transition-colors hover:bg-slate-800 sm:gap-1.5 sm:px-2.5 sm:py-1.5"
title="Share {{ $sessionNoun }} link"
aria-label="Share {{ $sessionNoun }} link">
@include('meet.room.partials.meet-icon', ['icon' => 'share', 'class' => 'h-4 w-4'])
Share
<span class="hidden sm:inline text-xs font-medium">Share</span>
</button>
<span x-show="isRecording" @unless($activeRecording) style="display: none" @endunless class="rounded bg-red-600 px-2 py-0.5 font-medium text-white">REC</span>
<span x-show="isRecording" @unless($activeRecording) style="display: none" @endunless
class="inline-flex items-center justify-center"
role="status"
aria-label="Recording">
<span class="h-2.5 w-2.5 rounded-full bg-red-500 animate-pulse sm:hidden"></span>
<span class="hidden rounded bg-red-600 px-2 py-0.5 text-xs font-medium text-white sm:inline">REC</span>
</span>
<span x-show="isLocked" @unless($session->is_locked) style="display: none" @endunless class="rounded bg-amber-600 px-2 py-0.5 font-medium text-white">Locked</span>
<button @click="toggleParticipants()" type="button"
class="relative inline-flex items-center gap-2 rounded-lg bg-slate-900 px-2 py-1 text-xs font-medium text-slate-200 transition-colors hover:bg-slate-800"