From 72c3ab9f9934e132056b4b196df72eda6b0a16e2 Mon Sep 17 00:00:00 2001
From: John Wesely <john.wesely@tappnetwork.com>
Date: Wed, 23 Sep 2026 11:12:13 -0600
Subject: [PATCH 1/2] fix: contain landscape image steps on mobile

Class on the img used a 16:9 max-width from viewport
height, so landscape images overflowed the card.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 dist/filament-lms.css                         |  3 +-
 resources/css/plugin.css                      |  3 +-
 .../views/livewire/document-step.blade.php    | 14 ++--
 resources/views/livewire/image-step.blade.php | 12 ++--
 tests/Feature/ImageStepTest.php               | 70 +++++++++++++++++++
 5 files changed, 89 insertions(+), 13 deletions(-)
 create mode 100644 tests/Feature/ImageStepTest.php

diff --git a/dist/filament-lms.css b/dist/filament-lms.css
index b589c88c..ca2c4fa2 100644
--- a/dist/filament-lms.css
+++ b/dist/filament-lms.css
@@ -22,8 +22,9 @@
 
 /* Centralized step material sizing */
 .step-material-container {
+    width: 100%;
     height: 60vh;
-    max-width: calc(60vh * 16/9);
+    max-width: min(100%, calc(60vh * 16 / 9));
     margin: 0 auto;
 }
 
diff --git a/resources/css/plugin.css b/resources/css/plugin.css
index b589c88c..ca2c4fa2 100644
--- a/resources/css/plugin.css
+++ b/resources/css/plugin.css
@@ -22,8 +22,9 @@
 
 /* Centralized step material sizing */
 .step-material-container {
+    width: 100%;
     height: 60vh;
-    max-width: calc(60vh * 16/9);
+    max-width: min(100%, calc(60vh * 16 / 9));
     margin: 0 auto;
 }
 
diff --git a/resources/views/livewire/document-step.blade.php b/resources/views/livewire/document-step.blade.php
index 678f48db..1c808513 100644
--- a/resources/views/livewire/document-step.blade.php
+++ b/resources/views/livewire/document-step.blade.php
@@ -4,12 +4,14 @@ class="flex-1 flex flex-col"
         >
             <div class="mb-8 flex-1">
                 @if($this->getPreviewImage())
-                    <img 
-                        src="{{ $this->getPreviewImage() }}" 
-                        alt="Document Preview Image" 
-                        class="step-material-container rounded-lg border border-gray-300 cursor-pointer"
-                        wire:click="download"
-                    />
+                    <div class="step-material-container">
+                        <img
+                            src="{{ $this->getPreviewImage() }}"
+                            alt="Document Preview Image"
+                            class="rounded-lg border border-gray-300 cursor-pointer"
+                            wire:click="download"
+                        />
+                    </div>
                 @elseif ($document->hasScormPackage())
                     <div class="step-material-container step-material-container--interactive w-full">
                         <iframe
diff --git a/resources/views/livewire/image-step.blade.php b/resources/views/livewire/image-step.blade.php
index b21ed591..24534582 100644
--- a/resources/views/livewire/image-step.blade.php
+++ b/resources/views/livewire/image-step.blade.php
@@ -4,11 +4,13 @@ class="flex-1 flex flex-col"
     >
         <div class="mb-8 flex-1">
             @if($this->getImageUrl())
-                <img 
-                    src="{{ $this->getImageUrl() }}" 
-                    class="step-material-container rounded-lg border border-gray-300"
-                    alt="Step Image"
-                />
+                <div class="step-material-container">
+                    <img
+                        src="{{ $this->getImageUrl() }}"
+                        class="rounded-lg border border-gray-300"
+                        alt="Step Image"
+                    />
+                </div>
             @endif
         </div>
     </x-filament::section>
diff --git a/tests/Feature/ImageStepTest.php b/tests/Feature/ImageStepTest.php
new file mode 100644
index 00000000..20f36e2f
--- /dev/null
+++ b/tests/Feature/ImageStepTest.php
@@ -0,0 +1,70 @@
+<?php
+
+namespace Tapp\FilamentLms\Tests\Feature;
+
+use Illuminate\Contracts\Support\MessageBag as MessageBagContract;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Support\MessageBag;
+use Livewire\Livewire;
+use Tapp\FilamentLms\Livewire\ImageStep;
+use Tapp\FilamentLms\Models\Course;
+use Tapp\FilamentLms\Models\Image;
+use Tapp\FilamentLms\Models\Lesson;
+use Tapp\FilamentLms\Models\Step;
+use Tapp\FilamentLms\Tests\TestUser;
+
+class ImageStepWithErrorBag extends ImageStep
+{
+    public function getErrorBag(): MessageBagContract
+    {
+        return new MessageBag;
+    }
+}
+
+beforeEach(function () {
+    if (! Schema::hasColumn('lms_images', 'deleted_at')) {
+        Schema::table('lms_images', function (Blueprint $table) {
+            $table->softDeletes();
+        });
+    }
+});
+
+test('image step wraps the image in the material container', function () {
+    $user = TestUser::create([
+        'name' => 'Test User',
+        'email' => 'image-step@example.com',
+        'password' => bcrypt('password'),
+    ]);
+
+    $this->actingAs($user);
+
+    $course = Course::factory()->create();
+    $lesson = Lesson::factory()->create(['course_id' => $course->id]);
+
+    $image = Image::query()->create([
+        'name' => 'Landscape',
+        'file_path' => 'images/landscape.png',
+    ]);
+
+    $path = sys_get_temp_dir().'/lms-landscape-test.png';
+    $png = imagecreatetruecolor(16, 9);
+    imagepng($png, $path);
+
+    $image->addMedia($path)->preservingOriginal()->toMediaCollection('image');
+
+    $step = Step::factory()->create([
+        'lesson_id' => $lesson->id,
+        'name' => 'Landscape Image',
+        'slug' => 'landscape-image',
+        'material_type' => 'image',
+        'material_id' => $image->id,
+    ]);
+
+    $html = Livewire::test(ImageStepWithErrorBag::class, ['step' => $step->fresh(['material'])])->html();
+
+    expect($html)
+        ->toContain('class="step-material-container"')
+        ->toContain('<img')
+        ->not->toContain('class="step-material-container rounded-lg');
+});

From 43df6cd341ee2d1d2fa7dccde1e768a1e4186b62 Mon Sep 17 00:00:00 2001
From: John Wesely <john.wesely@tappnetwork.com>
Date: Wed, 23 Sep 2026 11:23:19 -0600
Subject: [PATCH 2/2] feat: add tap-to-zoom image lightbox

Constrained landscape images are unreadable on mobile.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 dist/filament-lms.css                         | 68 +++++++++++++++++++
 resources/css/plugin.css                      | 68 +++++++++++++++++++
 resources/views/livewire/image-step.blade.php | 55 +++++++++++++--
 tests/Feature/ImageStepTest.php               |  2 +
 4 files changed, 186 insertions(+), 7 deletions(-)

diff --git a/dist/filament-lms.css b/dist/filament-lms.css
index ca2c4fa2..1210eb43 100644
--- a/dist/filament-lms.css
+++ b/dist/filament-lms.css
@@ -176,3 +176,71 @@ body.lms-embedded-player .fi-main {
     font-size: 0.9375rem;
     line-height: 1.45;
 }
+
+[x-cloak] {
+    display: none !important;
+}
+
+.lms-image-preview__trigger {
+    display: block;
+    width: 100%;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    cursor: zoom-in;
+    text-align: inherit;
+}
+
+.lms-image-preview__hint {
+    display: block;
+    margin-top: 0.5rem;
+    font-size: 0.875rem;
+    color: rgb(107 114 128);
+    text-align: center;
+}
+
+.lms-image-lightbox {
+    position: fixed;
+    inset: 0;
+    z-index: 80;
+    background: rgb(15 23 42 / 0.92);
+}
+
+.lms-image-lightbox__close {
+    position: fixed;
+    top: 1rem;
+    right: 1rem;
+    z-index: 81;
+    padding: 0.5rem 0.875rem;
+    border: 0;
+    border-radius: 0.5rem;
+    background: rgb(255 255 255);
+    color: rgb(15 23 42);
+    font-size: 0.875rem;
+    font-weight: 600;
+    cursor: pointer;
+}
+
+.lms-image-lightbox__scroller {
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    touch-action: pan-x pan-y pinch-zoom;
+    -webkit-overflow-scrolling: touch;
+}
+
+.lms-image-lightbox__scroller img {
+    display: block;
+    width: auto;
+    height: auto;
+    max-width: none;
+    margin: 2.5rem auto;
+}
+
+body.lms-image-lightbox-open {
+    overflow: hidden;
+}
+
+body.lms-image-lightbox-open .next-button {
+    visibility: hidden;
+}
diff --git a/resources/css/plugin.css b/resources/css/plugin.css
index ca2c4fa2..1210eb43 100644
--- a/resources/css/plugin.css
+++ b/resources/css/plugin.css
@@ -176,3 +176,71 @@ body.lms-embedded-player .fi-main {
     font-size: 0.9375rem;
     line-height: 1.45;
 }
+
+[x-cloak] {
+    display: none !important;
+}
+
+.lms-image-preview__trigger {
+    display: block;
+    width: 100%;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    cursor: zoom-in;
+    text-align: inherit;
+}
+
+.lms-image-preview__hint {
+    display: block;
+    margin-top: 0.5rem;
+    font-size: 0.875rem;
+    color: rgb(107 114 128);
+    text-align: center;
+}
+
+.lms-image-lightbox {
+    position: fixed;
+    inset: 0;
+    z-index: 80;
+    background: rgb(15 23 42 / 0.92);
+}
+
+.lms-image-lightbox__close {
+    position: fixed;
+    top: 1rem;
+    right: 1rem;
+    z-index: 81;
+    padding: 0.5rem 0.875rem;
+    border: 0;
+    border-radius: 0.5rem;
+    background: rgb(255 255 255);
+    color: rgb(15 23 42);
+    font-size: 0.875rem;
+    font-weight: 600;
+    cursor: pointer;
+}
+
+.lms-image-lightbox__scroller {
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    touch-action: pan-x pan-y pinch-zoom;
+    -webkit-overflow-scrolling: touch;
+}
+
+.lms-image-lightbox__scroller img {
+    display: block;
+    width: auto;
+    height: auto;
+    max-width: none;
+    margin: 2.5rem auto;
+}
+
+body.lms-image-lightbox-open {
+    overflow: hidden;
+}
+
+body.lms-image-lightbox-open .next-button {
+    visibility: hidden;
+}
diff --git a/resources/views/livewire/image-step.blade.php b/resources/views/livewire/image-step.blade.php
index 24534582..9f63205c 100644
--- a/resources/views/livewire/image-step.blade.php
+++ b/resources/views/livewire/image-step.blade.php
@@ -4,16 +4,57 @@ class="flex-1 flex flex-col"
     >
         <div class="mb-8 flex-1">
             @if($this->getImageUrl())
-                <div class="step-material-container">
-                    <img
-                        src="{{ $this->getImageUrl() }}"
-                        class="rounded-lg border border-gray-300"
-                        alt="Step Image"
-                    />
+                <div
+                    class="lms-image-preview"
+                    x-data="{ open: false }"
+                    x-effect="document.body.classList.toggle('lms-image-lightbox-open', open)"
+                    @keydown.escape.window="open = false"
+                >
+                    <button
+                        type="button"
+                        class="lms-image-preview__trigger"
+                        @click="open = true; $nextTick(() => $refs.closeBtn?.focus())"
+                        aria-label="View larger image"
+                    >
+                        <div class="step-material-container">
+                            <img
+                                src="{{ $this->getImageUrl() }}"
+                                class="rounded-lg border border-gray-300"
+                                alt="Step Image"
+                            />
+                        </div>
+                        <span class="lms-image-preview__hint">Tap to zoom</span>
+                    </button>
+
+                    <div
+                        x-show="open"
+                        x-cloak
+                        class="lms-image-lightbox"
+                        role="dialog"
+                        aria-modal="true"
+                        aria-label="Image preview"
+                        @click.self="open = false"
+                    >
+                        <button
+                            type="button"
+                            class="lms-image-lightbox__close"
+                            x-ref="closeBtn"
+                            @click="open = false"
+                            aria-label="Close image preview"
+                        >
+                            Close
+                        </button>
+                        <div class="lms-image-lightbox__scroller">
+                            <img
+                                src="{{ $this->getImageUrl() }}"
+                                alt="Step Image"
+                            />
+                        </div>
+                    </div>
                 </div>
             @endif
         </div>
     </x-filament::section>
 
     <x-filament-lms::next-button />
-</div> 
+</div>
diff --git a/tests/Feature/ImageStepTest.php b/tests/Feature/ImageStepTest.php
index 20f36e2f..92263739 100644
--- a/tests/Feature/ImageStepTest.php
+++ b/tests/Feature/ImageStepTest.php
@@ -66,5 +66,7 @@ public function getErrorBag(): MessageBagContract
     expect($html)
         ->toContain('class="step-material-container"')
         ->toContain('<img')
+        ->toContain('role="dialog"')
+        ->toContain('Tap to zoom')
         ->not->toContain('class="step-material-container rounded-lg');
 });