From 152c0e6625f35a80d78e53a7d69203b975590165 Mon Sep 17 00:00:00 2001
From: isaacclad <sense.corporate@gmail.com>
Date: Sat, 4 Jul 2026 03:20:07 +0000
Subject: [PATCH] Show full restart labels on mobile and scroll btn-groups
 horizontally.

Remove icon-only restart buttons on webinar and conference pages; btn-group now carousels on narrow screens when actions overflow.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 resources/css/app.css                         | 26 ++++++++++++++++++-
 .../views/meet/conferences/show.blade.php     | 25 +++++-------------
 resources/views/meet/webinars/show.blade.php  | 21 +++------------
 3 files changed, 35 insertions(+), 37 deletions(-)

diff --git a/resources/css/app.css b/resources/css/app.css
index dafdcd2..57cfd06 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -819,9 +819,33 @@ html.qr-mobile-page body {
 
     .btn-group {
         display: flex;
-        flex-wrap: wrap;
+        flex-wrap: nowrap;
         align-items: center;
         gap: 0.5rem;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+        scroll-snap-type: x mandatory;
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+        padding-bottom: 0.125rem;
+    }
+
+    .btn-group::-webkit-scrollbar {
+        display: none;
+    }
+
+    .btn-group > * {
+        flex-shrink: 0;
+        scroll-snap-align: start;
+    }
+
+    @media (min-width: 640px) {
+        .btn-group {
+            flex-wrap: wrap;
+            overflow-x: visible;
+            scroll-snap-type: none;
+            padding-bottom: 0;
+        }
     }
 
     .btn-fab {
diff --git a/resources/views/meet/conferences/show.blade.php b/resources/views/meet/conferences/show.blade.php
index 3d55f92..0ca82fa 100644
--- a/resources/views/meet/conferences/show.blade.php
+++ b/resources/views/meet/conferences/show.blade.php
@@ -1,7 +1,4 @@
 <x-app-layout title="{{ $room->title }}">
-    @php
-        $conferenceRestarting = $room->status === 'ended' || $room->sessions->isNotEmpty();
-    @endphp
     <div class="mx-auto max-w-2xl">
         <div>
             <p class="text-xs font-semibold uppercase tracking-wide text-violet-600">Conference</p>
@@ -26,33 +23,23 @@
 
             <div class="btn-group mt-4">
                 @if ($room->status === 'live' && $room->activeSession())
-                    <a href="{{ route('meet.join', $room) }}" class="btn-primary btn-primary-sm">Join conference</a>
+                    <a href="{{ route('meet.join', $room) }}" class="btn-primary btn-primary-sm whitespace-nowrap">Join conference</a>
                 @elseif ($room->status === 'scheduled')
                     <form method="POST" action="{{ route('meet.conferences.start', $room) }}" class="inline">
                         @csrf
-                        <button type="submit" class="btn-primary btn-primary-sm">Start conference</button>
+                        <button type="submit" class="btn-primary btn-primary-sm whitespace-nowrap">Start conference</button>
                     </form>
                 @elseif ($room->canRestart())
                     <form method="POST" action="{{ route('meet.conferences.start', $room) }}" class="inline">
                         @csrf
-                        <button type="submit"
-                                class="btn-primary btn-primary-sm {{ $conferenceRestarting ? 'inline-flex max-lg:h-9 max-lg:w-9 max-lg:items-center max-lg:justify-center max-lg:rounded-full max-lg:p-0' : '' }}"
-                                title="{{ $room->restartLabel() }}"
-                                aria-label="{{ $room->restartLabel() }}">
-                            @if ($conferenceRestarting)
-                                <svg class="h-4 w-4 lg:hidden" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"/>
-                                </svg>
-                                <span class="hidden lg:inline">{{ $room->restartLabel() }}</span>
-                            @else
-                                {{ $room->restartLabel() }}
-                            @endif
+                        <button type="submit" class="btn-primary btn-primary-sm whitespace-nowrap">
+                            {{ $room->restartLabel() }}
                         </button>
                     </form>
                 @endif
-                <a href="{{ route('meet.rooms.ical', $room) }}" class="btn-secondary btn-secondary-sm">Download iCal</a>
+                <a href="{{ route('meet.rooms.ical', $room) }}" class="btn-secondary btn-secondary-sm whitespace-nowrap">Download iCal</a>
                 @if ($room->sessions->isNotEmpty())
-                    <a href="{{ route('meet.rooms.attendance', $room) }}" class="btn-secondary btn-secondary-sm">Attendance CSV</a>
+                    <a href="{{ route('meet.rooms.attendance', $room) }}" class="btn-secondary btn-secondary-sm whitespace-nowrap">Attendance CSV</a>
                 @endif
             </div>
 
diff --git a/resources/views/meet/webinars/show.blade.php b/resources/views/meet/webinars/show.blade.php
index e503bc5..f4692ce 100644
--- a/resources/views/meet/webinars/show.blade.php
+++ b/resources/views/meet/webinars/show.blade.php
@@ -1,7 +1,4 @@
 <x-app-layout title="{{ $room->title }}">
-    @php
-        $webinarRestarting = $room->status === 'ended' || $room->sessions->isNotEmpty();
-    @endphp
     <div class="mx-auto max-w-2xl">
         <div>
             <p class="text-xs font-semibold uppercase tracking-wide text-indigo-600">Webinar</p>
@@ -32,24 +29,14 @@
                 @if ($room->canRestart())
                     <form method="POST" action="{{ route('meet.webinars.start', $room) }}" class="inline">
                         @csrf
-                        <button type="submit"
-                                class="btn-primary btn-primary-sm {{ $webinarRestarting ? 'inline-flex max-lg:h-9 max-lg:w-9 max-lg:items-center max-lg:justify-center max-lg:rounded-full max-lg:p-0' : '' }}"
-                                title="{{ $room->restartLabel() }}"
-                                aria-label="{{ $room->restartLabel() }}">
-                            @if ($webinarRestarting)
-                                <svg class="h-4 w-4 lg:hidden" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"/>
-                                </svg>
-                                <span class="hidden lg:inline">{{ $room->restartLabel() }}</span>
-                            @else
-                                {{ $room->restartLabel() }}
-                            @endif
+                        <button type="submit" class="btn-primary btn-primary-sm whitespace-nowrap">
+                            {{ $room->restartLabel() }}
                         </button>
                     </form>
                 @endif
-                <a href="{{ route('meet.rooms.ical', $room) }}" class="btn-secondary btn-secondary-sm">Download iCal</a>
+                <a href="{{ route('meet.rooms.ical', $room) }}" class="btn-secondary btn-secondary-sm whitespace-nowrap">Download iCal</a>
                 @if ($room->sessions->isNotEmpty())
-                    <a href="{{ route('meet.rooms.attendance', $room) }}" class="btn-secondary btn-secondary-sm">Attendance CSV</a>
+                    <a href="{{ route('meet.rooms.attendance', $room) }}" class="btn-secondary btn-secondary-sm whitespace-nowrap">Attendance CSV</a>
                 @endif
             </div>