Files
libra/docs/tasks/18.md
T
Naser Mansour ecdad8dbd2 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>
2026-09-28 00:00:47 +03:00

2.8 KiB

id, title, status, date, parent
id title status date parent
18 18 Nablus Workshop Form - Image Sizing Fix Done 2026-09-27 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):

    <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:

        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):

        <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:

        <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.