Fix #2887: Sponsor logo collides with section header text

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

@@ -8,7 +8,7 @@
 {% cache 86400 CACHED_DOWNLOAD_SPONSORS_LIST %}
   <h2 class="widget-title" style="text-align: center;">Sponsors</h2>
   <p style="text-align: center;">Visionary sponsors help to host Python downloads.</p>
-  <div style="display: grid; grid-gap: 2em; grid-template-columns: repeat(auto-fit, minmax(150px, 0fr)); align-items: center; justify-content: center; margin-top: 1.5em;">
+  <div style="display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: center; justify-content: center; margin-top: 1.5em;">
   {% for sponsorship in sponsorships %}
   {% thumbnail sponsorship.sponsor.web_logo "x150" format="PNG" quality=100 as im %}
     <div style="text-align: center;">
@@ -26,7 +26,7 @@ <h2 class="widget-title" style="text-align: center;">Sponsors</h2>
 {% comment %}cache for 1 day{% endcomment %}
 {% cache 86400 CACHED_JOBS_SPONSORS_LIST %}
   <h3 class="widget-title">Job Board Sponsors</h3>
-  <div style="display: grid; grid-gap: 1em; grid-template-columns: repeat(auto-fit, minmax(100px, 0fr)); grid-template-rows: repeat(1, minmax(50px, 0fr)); align-items: center; justify-content: center; margin-top: 1em;">
+  <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>
@@ -43,14 +43,14 @@ <h3 class="widget-title">Job Board Sponsors</h3>
 
   {% for package, placement_info in sponsorships_by_package.items %}
   {% if placement_info.sponsorships %}
-  <div title="{{ package }} Sponsors" align="center">
+  <div title="{{ package }} Sponsors" align="center"{% if not forloop.last %} style="margin-bottom: 3rem;"{% endif %}>
     {% with dimension=placement_info.logo_dimension %}
 
     <h1 style="font-size: {% if forloop.first %}350%{% else %}300%{% endif %}">{{ placement_info.label }} Sponsors</h1>
 
-    <div style="display: grid; grid-gap: 2em; grid-template-columns: repeat(auto-fit, minmax({{ dimension }}px, 0fr)); grid-template-rows: repeat(1, minmax({{ dimension }}px, 0fr)); align-items: center; justify-content: center;">
+    <div style="display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax({{ dimension }}px, 1fr)); align-items: center; justify-content: center;">
       {% for sponsorship in placement_info.sponsorships %}
-        <div id="{{ sponsorship.sponsor.slug }}" data-internal-year={{ sponsorship.year }}>
+        <div id="{{ sponsorship.sponsor.slug }}" data-internal-year="{{ sponsorship.year|default_if_none:'' }}" style="overflow: hidden;">
             <div
                 data-ea-publisher="psf"
                 data-ea-type="psf-image-only"

apps/sponsors/templatetags/sponsors.py

@@ -81,11 +81,16 @@ def benefit_name_for_display(benefit, package):
 def ideal_size(image, ideal_dimension):
     """Scale an image width to fit within the given ideal dimension area."""
     ideal_dimension = int(ideal_dimension)
+
+    # image could be an ImageFieldFile; if it's falsey, it means no file is associated with it.
+    if not image:
+        return ideal_dimension
+
     try:
         w, h = image.width, image.height
     except FileNotFoundError:
         # 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
+        # in that case, we return a fallback size to avoid 500 errors.
+        return ideal_dimension
 
     return int(w * math.sqrt((100 * ideal_dimension) / (w * h)))

apps/sponsors/tests/test_templatetags.py

@@ -8,6 +8,7 @@
     benefit_name_for_display,
     benefit_quantity_for_package,
     full_sponsorship,
+    ideal_size,
     list_sponsors,
 )
 
@@ -88,3 +89,39 @@ def test_display_name_for_display_from_benefit(self, mocked_name_for_display):
 
         self.assertEqual(name, "Modified name")
         mocked_name_for_display.assert_called_once_with(package=package)
+
+
+class IdealSizeFilterTests(TestCase):
+    def test_ideal_size_handles_missing_file_association(self):
+        class MockImageWithoutFile:
+            def __bool__(self):
+                return False
+
+        size = ideal_size(MockImageWithoutFile(), 250)
+        # Should return ideal_dimension directly as fallback
+        self.assertEqual(size, 250)
+
+    def test_ideal_size_scales_properly(self):
+        class MockImage:
+            width = 400
+            height = 200
+
+            def __bool__(self):
+                return True
+
+        size = ideal_size(MockImage(), 200)
+        # int(400 * sqrt(20000 / 80000)) = int(400 * 0.5) = 200
+        self.assertEqual(size, 200)
+
+    def test_ideal_size_handles_file_not_found(self):
+        class MockImageWithMissingFileOnDisk:
+            @property
+            def width(self):
+                raise FileNotFoundError
+
+            def __bool__(self):
+                return True
+
+        size = ideal_size(MockImageWithMissingFileOnDisk(), 300)
+        # Should return ideal_dimension directly as fallback
+        self.assertEqual(size, 300)