Shrink oversized flyer image and logo on Nablus workshop form

Flyer capped to max-h-64 (was w-full, ~640x853px dominating the page); logo
reduced to h-10 (was h-16), matching the site's own sm-logo convention.
Pure styling change, no logic — 7/7 existing tests unchanged and passing.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Naser Mansour
2026-09-28 00:00:47 +03:00
parent 690c22395f
commit ecdad8dbd2
3 changed files with 74 additions and 2 deletions
+71
View File
@@ -0,0 +1,71 @@
---
id: 18
title: 18 Nablus Workshop Form - Image Sizing Fix
status: Done
date: 2026-09-27
parent: null
---
## Description
Naser reviewed the Nablus workshop registration page (task 17, shipped in commit `690c223`) and
found the flyer image and the logo render far too large. Fix the sizing in
`resources/views/livewire/pages/forms/nablus-workshop.blade.php` — a pure styling change, no
logic involved.
**File to modify:** `resources/views/livewire/pages/forms/nablus-workshop.blade.php`
Current flyer image markup (around line 39-43):
```blade
<img
src="{{ asset('images/workshop-nablus-flyer.jpeg') }}"
alt="ورشة متخصصة: القانون، التسويق الرقمي، وإدارة المتاجر الإلكترونية"
class="w-full rounded-lg shadow-[0_2px_8px_rgba(0,0,0,0.1)]"
/>
```
The image is 1086x1448px (portrait). `w-full` inside the page's `max-w-[640px]` container
scales it to roughly 640x853px, which dominates the page above the fold on both desktop and
mobile. The full workshop agenda text is already duplicated in the paragraph immediately below
this image (same file, further down), so the image is decorative here, not the only source of
that information — it can be shown at a much smaller, capped size without losing information.
Change the class to cap its height and center it as a modest banner rather than a full-width
hero:
```blade
class="max-h-64 w-auto mx-auto rounded-lg shadow-[0_2px_8px_rgba(0,0,0,0.1)]"
```
Current logo markup (around line 46):
```blade
<img src="{{ asset('images/logo.png') }}" alt="LIBRA for Rights" class="h-16 w-auto object-contain mb-4" />
```
`h-16` (64px) is larger than this project's own logo-size convention for a compact card header —
`resources/views/components/logo.blade.php` defines `sm` as `h-10 w-10` (40px, its own comment
says "Mobile nav") and `md` as `h-12 w-12` (48px, "Desktop nav"). Change the class to match the
`sm` convention:
```blade
<img src="{{ asset('images/logo.png') }}" alt="LIBRA for Rights" class="h-10 w-auto object-contain mb-4" />
```
No other part of the file changes. No route, layout, mailable, or validation logic is affected.
## Acceptance Criteria
- [ ] `resources/views/livewire/pages/forms/nablus-workshop.blade.php`'s flyer `<img>` tag's
class attribute contains `max-h-64` and does not contain `w-full`
- [ ] The same file's logo `<img>` tag's class attribute contains `h-10` and does not contain
`h-16`
- [ ] Visiting `/forms/nablus-workshop` still returns HTTP 200 (no markup breakage introduced)
- [ ] The existing test suite for this page (`tests/Feature/Public/NablusWorkshopRegistrationTest.php`)
still passes unchanged — this is a styling-only change, it must not alter any of that
test's assertions
## Sub-tasks
None.
+1
View File
@@ -126,3 +126,4 @@
| 17 | 17 Nablus Workshop Registration Form | Done | | 17 | 17 Nablus Workshop Registration Form | Done |
| 17-1 | 17-1 Registration mailable and email template | Done | | 17-1 | 17-1 Registration mailable and email template | Done |
| 17-2 | 17-2 Standalone registration page, form, and submit wiring | Done | | 17-2 | 17-2 Standalone registration page, form, and submit wiring | Done |
| 18 | 18 Nablus Workshop Form - Image Sizing Fix | Done |
@@ -39,11 +39,11 @@ new #[Layout('components.layouts.standalone')] class extends Component
<img <img
src="{{ asset('images/workshop-nablus-flyer.jpeg') }}" src="{{ asset('images/workshop-nablus-flyer.jpeg') }}"
alt="ورشة متخصصة: القانون، التسويق الرقمي، وإدارة المتاجر الإلكترونية" alt="ورشة متخصصة: القانون، التسويق الرقمي، وإدارة المتاجر الإلكترونية"
class="w-full rounded-lg shadow-[0_2px_8px_rgba(0,0,0,0.1)]" class="max-h-64 w-auto mx-auto rounded-lg shadow-[0_2px_8px_rgba(0,0,0,0.1)]"
/> />
<div class="bg-white rounded-lg p-6" style="box-shadow: 0 2px 8px rgba(0,0,0,0.1)"> <div class="bg-white rounded-lg p-6" style="box-shadow: 0 2px 8px rgba(0,0,0,0.1)">
<img src="{{ asset('images/logo.png') }}" alt="LIBRA for Rights" class="h-16 w-auto object-contain mb-4" /> <img src="{{ asset('images/logo.png') }}" alt="LIBRA for Rights" class="h-10 w-auto object-contain mb-4" />
<h1 class="text-2xl font-bold mb-2" style="color: #2D322A">تسجيل في ورشة عمل ريادايات نابلس</h1> <h1 class="text-2xl font-bold mb-2" style="color: #2D322A">تسجيل في ورشة عمل ريادايات نابلس</h1>
<p class="mb-4" style="color: #2D322A">تخططين لإطلاق مشروعك الخاص أو تطوير تجارتك الإلكترونية؟ 🚀</p> <p class="mb-4" style="color: #2D322A">تخططين لإطلاق مشروعك الخاص أو تطوير تجارتك الإلكترونية؟ 🚀</p>