fix(nav): header menu popover renders off-screen on 404 pages

resources/views/components/home/course-card.blade.php

@@ -45,7 +45,7 @@ class="pointer-events-none absolute -right-10 -top-10 size-32 rounded-full bg-em
                 <span class="absolute inline-flex size-full animate-ping rounded-full bg-emerald-400 opacity-75"></span>
                 <span class="relative inline-flex size-2 rounded-full bg-emerald-500"></span>
             </span>
-            Early Bird
+            Video Course
         </div>
 
         {{-- Title --}}

resources/views/components/navbar/mobile-menu.blade.php

@@ -1,10 +1,13 @@
 <div
     x-init="
         () => {
-            const updatePopoverTop = () => {
+            const updatePopoverPosition = () => {
                 const nav = $refs.menuButton.closest('nav');
                 if (nav && $refs.mobilePopover.matches(':popover-open')) {
                     $refs.mobilePopover.style.top = (nav.getBoundingClientRect().bottom + 8) + 'px';
+                    $refs.mobilePopover.style.right = window.innerWidth >= 1024
+                        ? (window.innerWidth - $refs.menuButton.getBoundingClientRect().right - 6) + 'px'
+                        : '';
                 }
             };
 
@@ -13,10 +16,12 @@
                 showMobileMenu = $refs.mobilePopover.matches(':popover-open')
 
                 if (e.newState === 'open') {
-                    updatePopoverTop()
-                    window.addEventListener('scroll', updatePopoverTop, { passive: true })
+                    updatePopoverPosition()
+                    window.addEventListener('scroll', updatePopoverPosition, { passive: true })
+                    window.addEventListener('resize', updatePopoverPosition)
                 } else {
-                    window.removeEventListener('scroll', updatePopoverTop)
+                    window.removeEventListener('scroll', updatePopoverPosition)
+                    window.removeEventListener('resize', updatePopoverPosition)
                 }
             })
 
@@ -83,7 +88,6 @@ class="-ml-2.5 h-5 w-0.5 -rotate-45 rounded-full bg-current transition duration-
         role="dialog"
         aria-modal="true"
         aria-label="Site menu"
-        x-bind:style="width >= 1024 ? 'right:' + (window.innerWidth - $refs.menuButton.getBoundingClientRect().right - 6) + 'px' : ''"
         class="fixed m-0 inset-[unset] inset-x-3 bottom-3.5 w-auto -translate-y-3 overflow-y-scroll overscroll-contain rounded-2xl bg-gray-200/50 opacity-0 shadow-2xl ring-1 ring-gray-200/80 backdrop-blur-2xl transition-[opacity,transform] transition-discrete duration-300 open:translate-y-0 open:opacity-100 min-[500px]:inset-x-3.5 lg:bottom-auto lg:left-auto lg:w-md dark:bg-black/50 dark:text-white dark:shadow-black/40 dark:ring-gray-700/70 starting:open:-translate-y-3 starting:open:opacity-0"
     >
         <div class="@container flex flex-col overflow-hidden px-6 pt-4 pb-6">

tests/Feature/HomeCourseCardTest.php

@@ -0,0 +1,29 @@
+<?php
+
+namespace Tests\Feature;
+
+use Illuminate\Foundation\Testing\RefreshDatabase;
+use PHPUnit\Framework\Attributes\Test;
+use Tests\TestCase;
+
+class HomeCourseCardTest extends TestCase
+{
+    use RefreshDatabase;
+
+    #[Test]
+    public function the_course_card_badge_reads_video_course_instead_of_early_bird()
+    {
+        $this->blade('<x-home.course-card />')
+            ->assertSee('Video Course')
+            ->assertDontSee('Early Bird');
+    }
+
+    #[Test]
+    public function the_homepage_shows_the_video_course_badge()
+    {
+        $this->get('/')
+            ->assertOk()
+            ->assertSee('Video Course')
+            ->assertDontSee('Early Bird');
+    }
+}

tests/Feature/NavigationMobileMenuPopoverPositionTest.php

@@ -0,0 +1,41 @@
+<?php
+
+namespace Tests\Feature;
+
+use Illuminate\Foundation\Testing\RefreshDatabase;
+use Tests\TestCase;
+
+class NavigationMobileMenuPopoverPositionTest extends TestCase
+{
+    use RefreshDatabase;
+
+    public function test_menu_popover_is_positioned_when_opened_rather_than_at_alpine_init(): void
+    {
+        $response = $this->get('/page-that-does-not-exist');
+
+        $response->assertStatus(404);
+
+        // The 404 page renders the shared navigation with the menu popover
+        $response->assertSee('id="mobile-menu-popover"', false);
+
+        // Positioning must happen inside the open-time updater, where the layout
+        // is measurable. An x-bind:style binding evaluates during Alpine init while
+        // <body x-cloak> is still display:none, so every measured rect is 0 and the
+        // popover ends up off-screen.
+        $response->assertDontSee('x-bind:style', false);
+        $response->assertSee('$refs.mobilePopover.style.top', false);
+        $response->assertSee('$refs.mobilePopover.style.right', false);
+    }
+
+    public function test_menu_popover_repositions_while_open_on_scroll_and_resize(): void
+    {
+        $response = $this->get('/page-that-does-not-exist');
+
+        $response->assertStatus(404);
+
+        $response->assertSee("window.addEventListener('scroll', updatePopoverPosition", false);
+        $response->assertSee("window.addEventListener('resize', updatePopoverPosition)", false);
+        $response->assertSee("window.removeEventListener('scroll', updatePopoverPosition)", false);
+        $response->assertSee("window.removeEventListener('resize', updatePopoverPosition)", false);
+    }
+}