fix: improve RH panel behavior at small viewport sizes (ietf-tools#3801)

* fix: align nav links to top of RH panel
* fix: allow timezone picker to wrap
* 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

Author: jennifer-richards

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;
-}

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"></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();
             }

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>

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 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"