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; grid-gap: 2em; 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; grid-gap: 1em; 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,12 +43,12 @@ <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" style="margin-bottom: 3em;">
     {% 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; grid-gap: 2em; 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

apps/sponsors/templatetags/sponsors.py

@@ -83,7 +83,7 @@ def ideal_size(image, ideal_dimension):
     ideal_dimension = int(ideal_dimension)
     try:
         w, h = image.width, image.height
-    except FileNotFoundError:
+    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

apps/sponsors/tests/test_templatetags.py

@@ -9,6 +9,7 @@
     benefit_quantity_for_package,
     full_sponsorship,
     list_sponsors,
+    ideal_size,
 )
 
 
@@ -88,3 +89,33 @@ 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 IdealSizeTemplateTagTests(TestCase):
+    def test_ideal_size_scales_properly(self):
+        class MockImage:
+            width = 400
+            height = 200
+
+        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 MockImageWithoutFile:
+            @property
+            def width(self):
+                raise FileNotFoundError()
+
+        size = ideal_size(MockImageWithoutFile(), 300)
+        self.assertEqual(size, 173)
+
+    def test_ideal_size_handles_value_error(self):
+        class MockImageWithoutFileValue:
+            @property
+            def width(self):
+                msg = "The 'web_logo' attribute has no file associated with it."
+                raise ValueError(msg)
+
+        size = ideal_size(MockImageWithoutFileValue(), 250)
+        self.assertEqual(size, 158)