From ab2bcaddd36973f38fe53dabf87224e15a10bde9 Mon Sep 17 00:00:00 2001
From: Jennifer Richards <jennifer@painless-security.com>
Date: Fri, 8 Apr 2022 11:36:25 -0300
Subject: [PATCH 1/4] fix: align nav links to top of RH panel

---
 ietf/static/js/ietf.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ietf/static/js/ietf.js b/ietf/static/js/ietf.js
index 5166837832e..535bac3f5db 100644
--- a/ietf/static/js/ietf.js
+++ b/ietf/static/js/ietf.js
@@ -185,7 +185,7 @@ $(function () {
                 .after($(`
                  <div class="col-xl-2 ps-0 small">
                      <div id="righthand-card" class="position-fixed card d-flex flex-column justify-content-start align-items-start">
-                         <nav id="righthand-nav" class="card-body navbar navbar-light bg-light overflow-auto"></nav>
+                         <nav id="righthand-nav" class="card-body navbar navbar-light bg-light overflow-auto align-items-start"></nav>
                      </div></div>
                  </div>
                  `));

From 6c4cd3721f06183a4c225ca082312c0a7161b848 Mon Sep 17 00:00:00 2001
From: Jennifer Richards <jennifer@painless-security.com>
Date: Fri, 8 Apr 2022 11:47:12 -0300
Subject: [PATCH 2/4] fix: allow timezone picker to wrap

---
 ietf/templates/meeting/tz-display.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ietf/templates/meeting/tz-display.html b/ietf/templates/meeting/tz-display.html
index 8493f9e6d88..9df1eebc0fd 100644
--- a/ietf/templates/meeting/tz-display.html
+++ b/ietf/templates/meeting/tz-display.html
@@ -12,7 +12,7 @@
 {% load origin %}
 {% origin %}
 {% firstof id_suffix "" as suffix %}
-<div class="tz-display {% if minimal %}btn-group{% else %}input-group{% endif %} my-3">
+<div class="tz-display {% if minimal %}btn-group{% else %}input-group{% endif %} my-3 flex-wrap">
     {% if not minimal %}<label class="input-group-text border-primary bg-white fw-bold">Time zone:</label>{% endif %}
     {% if meeting_timezone is not None %}
         <input type="radio"

From fdbb99ec2719baba00346b70b1998d7bcbaf56f6 Mon Sep 17 00:00:00 2001
From: Jennifer Richards <jennifer@painless-security.com>
Date: Fri, 8 Apr 2022 13:36:24 -0300
Subject: [PATCH 3/4] fix: improve RH panel behavior at small viewport sizes

  * drop card styling
  * use `btn-group-sm` for compact timezone picker
  * limit overall height of #righthand-panel
  * remove redundant CSS merge artifact
---
 ietf/static/css/ietf.scss              | 9 ++++-----
 ietf/static/js/ietf.js                 | 6 +++---
 ietf/templates/meeting/agenda.html     | 2 +-
 ietf/templates/meeting/tz-display.html | 4 ++--
 4 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/ietf/static/css/ietf.scss b/ietf/static/css/ietf.scss
index 9d822bcec69..b46dd5b680d 100644
--- a/ietf/static/css/ietf.scss
+++ b/ietf/static/css/ietf.scss
@@ -165,6 +165,10 @@ table tbody.meta {
 }
 
 // Style the righthand navigation panel
+#righthand-panel {
+    max-height: 80vh;
+}
+
 #righthand-nav {
     height: 70vh;
     width: inherit;
@@ -993,8 +997,3 @@ td.position-empty {
 #current-time {
     display: inline-block;
 }
-
-// righthand nav panel styling
-#righthand-nav {
-    width: inherit;
-}
\ No newline at end of file
diff --git a/ietf/static/js/ietf.js b/ietf/static/js/ietf.js
index 535bac3f5db..f78708ddfe4 100644
--- a/ietf/static/js/ietf.js
+++ b/ietf/static/js/ietf.js
@@ -184,8 +184,8 @@ $(function () {
                 .attr("tabindex", 0)
                 .after($(`
                  <div class="col-xl-2 ps-0 small">
-                     <div id="righthand-card" class="position-fixed card d-flex flex-column justify-content-start align-items-start">
-                         <nav id="righthand-nav" class="card-body navbar navbar-light bg-light overflow-auto align-items-start"></nav>
+                     <div id="righthand-panel" class="position-fixed d-flex flex-column justify-content-between align-items-start">
+                         <nav id="righthand-nav" class="navbar navbar-light bg-light overflow-auto align-items-start flex-fill"></nav>
                      </div></div>
                  </div>
                  `));
@@ -236,7 +236,7 @@ $(function () {
                 });
 
             if (haveExtraNav) {
-                $('#righthand-card').append('<div id="righthand-extra" class="card-body"></div>');
+                $('#righthand-panel').append('<div id="righthand-extra" class="py-3"></div>');
                 extraNav.children().appendTo('#righthand-extra');
                 extraNav.remove();
             }
diff --git a/ietf/templates/meeting/agenda.html b/ietf/templates/meeting/agenda.html
index cf9119bd614..f734cec176b 100644
--- a/ietf/templates/meeting/agenda.html
+++ b/ietf/templates/meeting/agenda.html
@@ -32,7 +32,7 @@
           <div class="px-3">
             Showing <span class="current-tz">{{ timezone }}</span> time
           </div>
-          <div class="px-3 w-100">
+          <div class="align-self-center">
             {% include 'meeting/tz-display.html' with id_suffix="-rh" meeting_timezone=timezone minimal=True only %}
           </div>
         </div>
diff --git a/ietf/templates/meeting/tz-display.html b/ietf/templates/meeting/tz-display.html
index 9df1eebc0fd..2c85ca0fdbd 100644
--- a/ietf/templates/meeting/tz-display.html
+++ b/ietf/templates/meeting/tz-display.html
@@ -12,7 +12,7 @@
 {% load origin %}
 {% origin %}
 {% firstof id_suffix "" as suffix %}
-<div class="tz-display {% if minimal %}btn-group{% else %}input-group{% endif %} my-3 flex-wrap">
+<div class="tz-display {% if minimal %}btn-group btn-group-sm my-2{% else %}input-group my-3{% endif %} flex-wrap">
     {% if not minimal %}<label class="input-group-text border-primary bg-white fw-bold">Time zone:</label>{% endif %}
     {% if meeting_timezone is not None %}
         <input type="radio"
@@ -30,7 +30,7 @@
     <label class="btn btn-outline-primary" for="local-timezone{{ suffix }}">Local</label>
     <input type="radio"
            name="tzradio{{ suffix }}"
-           class="btn-check tz-select"
+           class="btn-sm btn-check tz-select"
            id="utc-timezone{{ suffix }}"
            value="UTC">
     <label class="btn btn-outline-primary" for="utc-timezone{{ suffix }}">UTC</label>

From e5396a8bf78dddef635a9fdac0f8f7e7f59f57cc Mon Sep 17 00:00:00 2001
From: Jennifer Richards <jennifer@painless-security.com>
Date: Fri, 8 Apr 2022 14:50:58 -0300
Subject: [PATCH 4/4] fix: remove leftover invalid CSS class

Lint from dev noodling.
---
 ietf/templates/meeting/tz-display.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ietf/templates/meeting/tz-display.html b/ietf/templates/meeting/tz-display.html
index 2c85ca0fdbd..529c9aec1b6 100644
--- a/ietf/templates/meeting/tz-display.html
+++ b/ietf/templates/meeting/tz-display.html
@@ -30,7 +30,7 @@
     <label class="btn btn-outline-primary" for="local-timezone{{ suffix }}">Local</label>
     <input type="radio"
            name="tzradio{{ suffix }}"
-           class="btn-sm btn-check tz-select"
+           class="btn-check tz-select"
            id="utc-timezone{{ suffix }}"
            value="UTC">
     <label class="btn btn-outline-primary" for="utc-timezone{{ suffix }}">UTC</label>