fix: Stretch righthand-nav to viewport edge (#3921)

* fix: Stretch righthand-nav to viewport edge

Fixes #3848

* Also improve tz-select display, while we're here

* Change func name

ietf/static/js/agenda_timezone.js

@@ -177,7 +177,7 @@
     // Update times on the agenda based on the selected timezone
     function update_times(newtz) {
         $('.current-tz')
-            .html(newtz);
+            .html(newtz.replaceAll("_", " ").replaceAll("/", " / "));
         $('.time')
             .each(function () {
                 if (this.format === 4) {
@@ -226,7 +226,7 @@
         } else {
             // No sessions in the future - meeting has apparently ended
             links_to_update.attr('href', '#');
-            links_to_update.addClass('text-muted text-decoration-line-through'); // mark link
+            links_to_update.addClass('disabled'); // mark link
         }
     }
 
@@ -303,4 +303,4 @@
     window.set_current_tz_cb = function (fn) {
         get_current_tz_cb = fn;
     };
-})();
+})();

ietf/static/js/ietf.js

@@ -184,14 +184,14 @@ $(function () {
                 .attr("tabindex", 0)
                 .after($(`
                  <div class="col-xl-2 ps-0 small">
-                     <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 id="righthand-panel" class="position-fixed col-xl-2 bg-light d-flex flex-column justify-content-between align-items-start">
+                         <nav id="righthand-nav" class="navbar navbar-light w-100 overflow-auto align-items-start flex-fill"></nav>
                      </div></div>
                  </div>
                  `));
 
             const nav = $("#righthand-nav")
-                .append(`<nav class="nav nav-pills flex-column px-2">`)
+                .append(`<nav class="nav nav-pills flex-column w-100 px-2">`)
                 .children()
                 .last();
 
@@ -236,7 +236,7 @@ $(function () {
                 });
 
             if (haveExtraNav) {
-                $('#righthand-panel').append('<div id="righthand-extra" class="py-3"></div>');
+                $('#righthand-panel').append('<div id="righthand-extra" class="w-100 py-3"></div>');
                 extraNav.children().appendTo('#righthand-extra');
                 extraNav.remove();
             }

ietf/static/js/select2.js

@@ -15,6 +15,10 @@ $.fn.select2.defaults.set("escapeMarkup", function (m) {
     return m;
 });
 
+function prettify_tz(x) {
+    return x.text.replaceAll("_", " ").replaceAll("/", " / ");
+}
+
 // Copyright The IETF Trust 2015-2021, All Rights Reserved
 // JS for ietf.utils.fields.SearchableField subclasses
 window.setupSelect2Field = function (e) {
@@ -26,9 +30,13 @@ window.setupSelect2Field = function (e) {
         e.append(new Option(options[id].text, options[id].id, false, options[id].selected));
     }
 
+    template_modify = e.hasClass("tz-select") ? prettify_tz : undefined;
+
     e.select2({
         multiple: maxEntries !== 1,
         maximumSelectionSize: maxEntries,
+        templateResult: template_modify,
+        templateSelection: template_modify,
         ajax: url ? {
             url: url,
             dataType: "json",
@@ -66,4 +74,4 @@ $(document)
                     return;
                 setupSelect2Field($(this));
             });
-    });
+    });

ietf/templates/meeting/agenda.html

@@ -25,16 +25,16 @@
     {% endif %}
     {# the contents of #extra-nav will be moved into the RH nav panel #}
     <div id="extra-nav" class="d-none">
-        <div class="d-flex flex-column">
+        <div class="d-flex flex-column px-2">
           {% if now.date <= schedule.meeting.end_date %}
-              <a class="nav-link now-link" href="#">Current session</a>
+              <a class="btn btn-sm btn-primary my-3 now-link" href="#">Jump to current session</a>
           {% endif %}
-          <div class="px-3">
-            Showing <span class="current-tz">{{ timezone }}</span> time
-          </div>
-          <div class="align-self-center">
+          <div class="d-flex">
             {% include 'meeting/tz-display.html' with id_suffix="-rh" meeting_timezone=timezone minimal=True only %}
           </div>
+          <div class="small text-muted">
+            Showing <span class="current-tz">{{ timezone|split:"_"|join:" "|split:"/"|join:" / " }}</span> time
+          </div>
         </div>
     </div>
     {# cache this part -- it takes 3-6 seconds to generate #}

ietf/templates/meeting/tz-display.html

@@ -12,7 +12,7 @@ As long as id_suffix is different, should allow for as many copies of the widget
 {% load origin %}
 {% origin %}
 {% firstof id_suffix "" as suffix %}
-<div class="tz-display {% if minimal %}btn-group btn-group-sm my-2{% else %}input-group my-3{% endif %} flex-wrap">
+<div class="tz-display flex-fill {% 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"