Naser Mansour
ecdad8dbd2
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>
72 lines
2.8 KiB
Markdown
72 lines
2.8 KiB
Markdown
---
|
|
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.
|