Fix #2887: Sponsor logo collides with section header text

[iampujan]

Fixes #2887. Replaces invalid 0fr column grid properties with 1fr, and removes hardcoded 1 row rule to correctly let sponsor items naturally wrap to multiple rows without overflowing into the next section. Also fixes a 500 error triggered by missing image file paths in the 'ideal_size' filter.

[Copilot]

Pull request overview

This pull request fixes issue #2887 where sponsor logos were colliding with section header text on the sponsors page. The fix addresses two related problems: incorrect CSS grid properties causing layout overflow, and a server error from missing image handling.

Changes:

• Fixed CSS grid layout by replacing invalid 0fr values with 1fr and removing the hardcoded single row constraint to allow proper wrapping
• Added ValueError exception handling in the ideal_size template filter to handle corrupted or invalid image files
• Added bottom margin spacing between sponsor sections

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
apps/sponsors/templates/sponsors/partials/sponsors-list.html	Updated CSS grid properties from 0fr to 1fr, removed single-row constraint, and added section spacing to fix logo overflow issue
apps/sponsors/templatetags/sponsors.py	Added ValueError to exception handling in ideal_size filter to prevent 500 errors from invalid image files

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 3 out of 4 changed files in this pull request and generated no new comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

Comments suppressed due to low confidence (1)

apps/sponsors/templatetags/sponsors.py:91

• The exception-path comment says this is a fallback to return ideal_dimension, but the current implementation sets w, h = ideal_dimension and then still applies the scaling formula, producing int(10 * sqrt(ideal_dimension)) for square fallbacks (e.g., 300 -> 173). Please either (a) return ideal_dimension directly in the except block, or (b) update the comment (and any expectations) to describe the actual behavior so future readers don’t assume the wrong output.

    except (FileNotFoundError, ValueError):
        # local dev doesn't have all images if DB is a copy from prod environment
        # this is just a fallback to return ideal_dimension instead
        w, h = ideal_dimension, ideal_dimension

    return int(w * math.sqrt((100 * ideal_dimension) / (w * h)))

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated no new comments.

Comments suppressed due to low confidence (1)

apps/sponsors/templates/sponsors/partials/sponsors-list.html:33

• With grid-template-columns: ... minmax(100px, 1fr), each grid cell will expand to fill available width, and the child <div> will stretch; since it has no text-align:center/justify-self override, the <img> will render left-aligned in wider sidebars. If the intent is to keep logos centered (as they effectively were when columns didn’t stretch), add centering via justify-items: center/place-items: center on the grid container, or center the grid items themselves.

  <div style="display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); align-items: center; justify-content: center; margin-top: 1em;">
  {% for sponsorship in sponsorships %}
  {% thumbnail sponsorship.sponsor.web_logo "x100" format="PNG" quality=100 as im %}
    <div>
      <img src="{{ im.url }}" alt="{{ sponsorship.sponsor.name }} logo" style="max-height:100px;max-width:100px;height:auto;width:auto;">

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated no new comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated no new comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.