From ad5cf0bb016006e4687403c6ea356eb48a4ccb0e Mon Sep 17 00:00:00 2001
From: Lars Eggert <lars@eggert.org>
Date: Fri, 16 Dec 2022 21:09:55 +0200
Subject: [PATCH] fix: Fix layout issue in ballot modals on narrow screens
 (#4911)

* fix: Fix layout issue in ballot modals on narrow screens

Fixes #4902

* Also apply change to old positions

* Fix tests

* Use badge to indicate former ADs
---
 ietf/doc/templatetags/ballot_icon.py          |  2 +-
 ietf/doc/tests.py                             |  2 +-
 ietf/doc/tests_ballot.py                      |  6 ++--
 .../doc/document_ballot_content.html          | 31 +++++++++++--------
 4 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/ietf/doc/templatetags/ballot_icon.py b/ietf/doc/templatetags/ballot_icon.py
index 8f9aa9ce8..ee7d5f627 100644
--- a/ietf/doc/templatetags/ballot_icon.py
+++ b/ietf/doc/templatetags/ballot_icon.py
@@ -140,7 +140,7 @@ def ballot_icon(context, doc):
         i = i + 1
 
     res.append("</tr></tbody></table></a>")
-    res.append('<div id="modal-%d" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true"><div class="modal-dialog modal-dialog-scrollable modal-xl"><div class="modal-content"></div></div></div>' % ballot.pk)
+    res.append('<div id="modal-%d" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true"><div class="modal-dialog modal-dialog-scrollable modal-xl modal-fullscreen-lg-down"><div class="modal-content"></div></div></div>' % ballot.pk)
 
     return mark_safe("".join(res))
 
diff --git a/ietf/doc/tests.py b/ietf/doc/tests.py
index e18c8a1d4..29d725c62 100644
--- a/ietf/doc/tests.py
+++ b/ietf/doc/tests.py
@@ -1707,7 +1707,7 @@ class DocTestCase(TestCase):
             href = q(f'div.balloter-name a[href$="{author_slug}"]').attr('href')
             ids = [
                 target.attr('id')
-                for target in q(f'p.h5[id$="{author_slug}"]').items()
+                for target in q(f'div.h5[id$="{author_slug}"]').items()
             ]
             self.assertEqual(len(ids), 1, 'Should be exactly one link for the balloter')
             self.assertEqual(href, f'#{ids[0]}', 'Anchor href should match ID')
diff --git a/ietf/doc/tests_ballot.py b/ietf/doc/tests_ballot.py
index 8b8d1c1b1..4de4de08b 100644
--- a/ietf/doc/tests_ballot.py
+++ b/ietf/doc/tests_ballot.py
@@ -1198,9 +1198,9 @@ class BallotContentTests(TestCase):
         )
 
     def _assertBallotMessage(self, q, balloter, expected):
-        heading = q(f'p.h5[id$="_{slugify(balloter.plain_name())}"]')
+        heading = q(f'div.h5[id$="_{slugify(balloter.plain_name())}"]')
         self.assertEqual(len(heading), 1)
-        # <p.h5/> is followed by a panel with the message of interest, so use next()
+        # <div.h5> is followed by a panel with the message of interest, so use next()
         self.assertEqual(
             len(heading.next().find(
                 f'*[title="{expected}"]'
@@ -1381,4 +1381,4 @@ class BallotContentTests(TestCase):
         q = PyQuery(content)
         self._assertBallotMessage(q, balloters[0], 'No email send requests for this discuss')
         self._assertBallotMessage(q, balloters[1], 'No ballot position send log available')
-        self._assertBallotMessage(q, old_balloter, 'No ballot position send log available')
\ No newline at end of file
+        self._assertBallotMessage(q, old_balloter, 'No ballot position send log available')
diff --git a/ietf/templates/doc/document_ballot_content.html b/ietf/templates/doc/document_ballot_content.html
index 3443b913d..1fc4680f8 100644
--- a/ietf/templates/doc/document_ballot_content.html
+++ b/ietf/templates/doc/document_ballot_content.html
@@ -4,7 +4,7 @@
 {% load ietf_filters %}
 {% load textfilters %}
 <div class="row">
-    <div class="col-md-2 d-none d-md-block d-sm-block d-lg-block d-xl-block d-xxl-block">
+    <div class="col-md-2">
         {% for n, positions in position_groups %}
             <p class="h5">
                 <span class="badge rounded-pill {{ n|pos_to_label_format }}">{{ n.name }}</span>
@@ -85,10 +85,12 @@
         {% for n, positions in position_groups %}
             {% for p in positions %}
                 {% if not p.is_old_pos %}
-                    <p class="h5 mt-4"
-                        id="{{ doc.name|slugify }}_{{ p.balloter.plain_name|slugify }}">
-                        {{ p.balloter.plain_name }}
-                        <span class="float-end">
+                    <div class="h5 d-flex mt-4"
+                         id="{{ doc.name|slugify }}_{{ p.balloter.plain_name|slugify }}">
+                        <div class="flex-fill">
+                            {{ p.balloter.plain_name }}
+                        </div>
+                        <div class="flex-fill text-end">
                             {% if p.old_positions %}<span class="text-muted small">(was {{ p.old_positions|join:", " }})</span>{% endif %}
                             <span class="badge rounded-pill {{ p.pos|pos_to_label_format }}">{{ p.pos }}</span>
                             {% if user|has_role:"Secretariat" %}
@@ -98,8 +100,8 @@
                                     Edit
                                 </a>
                             {% endif %}
-                        </span>
-                    </p>
+                        </div>
+                    </div>
                     {% if p.pos.blocking and p.discuss %}
                         <div class="card border-danger {% if p.comment %} mb-2{% endif %}">
                             <div class="card-header bg-danger text-light">
@@ -158,9 +160,12 @@
         {% for n, positions in position_groups %}
             {% for p in positions %}
                 {% if p.is_old_pos %}
-                    <p class="h5 mt-4" id="{{ doc.name|slugify }}_{{ p.balloter.plain_name|slugify }}">
-                        <span class="text-muted">({{ p.balloter.plain_name }}; former steering group member)</span>
-                        <span class="float-end">
+                    <div class="h5 d-flex mt-4"
+                         id="{{ doc.name|slugify }}_{{ p.balloter.plain_name|slugify }}">
+                        <div class="flex-fill text-muted">
+                            {{ p.balloter.plain_name }} <span class="badge rounded-pill bg-secondary">Former IESG member</span>
+                        </div>
+                        <div class="flex-fill text-end">
                             {% if p.old_positions %}<span class="text-muted small">(was {{ p.old_positions|join:", " }})</span>{% endif %}
                             <span class="badge rounded-pill {{ p.pos|pos_to_label_format }}">{{ p.pos }}</span>
                             {% if user|has_role:"Secretariat" %}
@@ -170,8 +175,8 @@
                                     Edit
                                 </a>
                             {% endif %}
-                        </span>
-                    </p>
+                        </div>
+                    </div>
                     <div class="card {{ p.pos|pos_to_border_format }}">
                         <div class="card-header {{ p.pos|pos_to_label_format }}">
                             <div>
@@ -211,4 +216,4 @@
             {% endfor %}
         {% endfor %}
     </div>
-</div>
+</div>
\ No newline at end of file