WEB: Fix maintainers grid not displaying correctly (GH41438) (#41447)

Author: calvh

web/pandas/about/team.md

@@ -8,30 +8,22 @@ If you want to support pandas development, you can find information in the [dona
 
 ## Maintainers
 
-<div class="row maintainers">
-    {% for row in maintainers.people | batch(6, "") %}
-        <div class="card-group maintainers">
-            {% for person in row %}
-                {% if person %}
-                    <div class="card">
-                        <img class="card-img-top" alt="" src="{{ person.avatar_url }}"/>
-                        <div class="card-body">
-                            <h6 class="card-title">
-                                {% if person.blog %}
-                                    <a href="{{ person.blog }}">
-                                        {{ person.name or person.login }}
-                                    </a>
-                                {% else %}
-                                    {{ person.name or person.login }}
-                                {% endif %}
-                            </h6>
-                            <p class="card-text small"><a href="{{ person.html_url }}">{{ person.login }}</a></p>
-                        </div>
-                    </div>
-                {% else %}
-                    <div class="card border-0"></div>
-                {% endif %}
-            {% endfor %}
+<div class="card-group maintainers">
+    {% for person in maintainers.people %}
+        <div class="card">
+            <img class="card-img-top" alt="" src="{{ person.avatar_url }}"/>
+            <div class="card-body">
+                <h6 class="card-title">
+                    {% if person.blog %}
+                        <a href="{{ person.blog }}">
+                            {{ person.name or person.login }}
+                        </a>
+                    {% else %}
+                        {{ person.name or person.login }}
+                    {% endif %}
+                </h6>
+                <p class="card-text small"><a href="{{ person.html_url }}">{{ person.login }}</a></p>
+            </div>
         </div>
     {% endfor %}
 </div>

web/pandas/static/css/pandas.css

@@ -45,6 +45,12 @@ a.navbar-brand img {
 div.card {
     margin: 0 0 .2em .2em !important;
 }
+@media (min-width: 576px) {
+    .card-group.maintainers div.card {
+        min-width: 10rem;
+        max-width: 10rem;
+    }
+}
 div.card .card-title {
     font-weight: 500;
     color: #130654;