From 1ac10a43f4bee3abd30bcafcc19f43f187590d49 Mon Sep 17 00:00:00 2001
From: Jesse McConnell <jesse.mcconnell@gmail.com>
Date: Fri, 24 May 2024 09:26:04 -0500
Subject: [PATCH] Resolves #31 with the Links dropdown on the right and fully
 rendering on screen.

---
 ui/src/css/header.css | 655 +++++++++++++++++++++---------------------
 1 file changed, 328 insertions(+), 327 deletions(-)

diff --git a/ui/src/css/header.css b/ui/src/css/header.css
index 9a2b294..68432d1 100644
--- a/ui/src/css/header.css
+++ b/ui/src/css/header.css
@@ -1,327 +1,328 @@
-@media screen and (max-width: 1023.5px) {
-  html.is-clipped--navbar {
-    overflow-y: hidden;
-  }
-}
-
-body {
-  padding-top: var(--navbar-height);
-}
-
-.navbar {
-  background: var(--navbar-background);
-  color: var(--navbar-font-color);
-  font-size: calc(16 / var(--rem-base) * 1rem);
-  height: var(--navbar-height);
-  position: fixed;
-  top: 0;
-  width: 100%;
-  z-index: var(--z-index-navbar);
-}
-
-.navbar a {
-  text-decoration: none;
-}
-
-.navbar-brand {
-  display: flex;
-  flex: auto;
-  padding-left: 1rem;
-}
-
-.navbar-brand .navbar-item {
-  color: var(--navbar-font-color);
-}
-
-.navbar-brand .navbar-item:first-child {
-  align-self: center;
-  padding: 0;
-  font-size: calc(22 / var(--rem-base) * 1rem);
-  flex-wrap: wrap;
-  line-height: 1;
-}
-
-.navbar-brand .navbar-item:first-child a {
-  color: inherit;
-  word-wrap: normal;
-}
-
-.navbar-brand .navbar-item:first-child :not(:last-child) {
-  padding-right: 0.375rem;
-}
-
-.navbar-brand .navbar-item.search {
-  flex: auto;
-  justify-content: flex-end;
-}
-
-#search-input {
-  color: #333;
-  font-family: inherit;
-  font-size: 0.95rem;
-  width: 150px;
-  border: 1px solid #dbdbdb;
-  border-radius: 0.1em;
-  line-height: 1.5;
-  padding: 0 0.25em;
-}
-
-#search-input:disabled {
-  background-color: #dbdbdb;
-  /* disable cursor */
-  cursor: not-allowed;
-  pointer-events: all !important;
-}
-
-#search-input:disabled::placeholder {
-  color: #4c4c4c;
-}
-
-#search-input:focus {
-  outline: none;
-}
-
-.navbar-burger {
-  background: none;
-  border: none;
-  outline: none;
-  line-height: 1;
-  position: relative;
-  width: 3rem;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  margin-left: auto;
-  min-width: 0;
-}
-
-.navbar-burger span {
-  background-color: var(--navbar-font-color);
-  height: 1.5px;
-  width: 1rem;
-}
-
-.navbar-burger:not(.is-active) span {
-  transition: transform ease-out 0.25s, opacity 0s 0.25s, margin-top ease-out 0.25s 0.25s;
-}
-
-.navbar-burger span + span {
-  margin-top: 0.25rem;
-}
-
-.navbar-burger.is-active span + span {
-  margin-top: -1.5px;
-}
-
-.navbar-burger.is-active span:nth-child(1) {
-  transform: rotate(45deg);
-}
-
-.navbar-burger.is-active span:nth-child(2) {
-  opacity: 0;
-}
-
-.navbar-burger.is-active span:nth-child(3) {
-  transform: rotate(-45deg);
-}
-
-.navbar-item,
-.navbar-link {
-  color: var(--navbar-menu-font-color);
-  display: block;
-  line-height: var(--doc-line-height);
-  padding: 0.5rem 1rem;
-}
-
-.navbar-item.has-dropdown {
-  padding: 0;
-}
-
-.navbar-item .icon {
-  width: 1.25rem;
-  height: 1.25rem;
-  display: block;
-}
-
-.navbar-item .icon img,
-.navbar-item .icon svg {
-  fill: currentColor;
-  width: inherit;
-  height: inherit;
-}
-
-.navbar-link {
-  padding-right: 2.5em;
-}
-
-.navbar-dropdown .navbar-item {
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
-}
-
-.navbar-dropdown .navbar-item.has-label {
-  display: flex;
-  justify-content: space-between;
-}
-
-.navbar-dropdown .navbar-item small {
-  color: var(--toolbar-muted-color);
-  font-size: calc(12 / var(--rem-base) * 1rem);
-}
-
-.navbar-divider {
-  background-color: var(--navbar-menu-border-color);
-  border: none;
-  height: 1px;
-  margin: 0.25rem 0;
-}
-
-.navbar .button {
-  display: inline-flex;
-  align-items: center;
-  background: var(--navbar-button-background);
-  border: 1px solid var(--navbar-button-border-color);
-  border-radius: 0.15rem;
-  height: 1.75rem;
-  color: var(--navbar-button-font-color);
-  padding: 0 0.75em;
-  white-space: nowrap;
-}
-
-@media screen and (max-width: 768.5px) {
-  .navbar-brand .navbar-item.search {
-    padding-left: 0;
-    padding-right: 0;
-  }
-}
-
-@media screen and (min-width: 769px) {
-  #search-input {
-    width: 200px;
-  }
-}
-
-@media screen and (max-width: 1023.5px) {
-  .navbar-brand {
-    height: inherit;
-  }
-
-  .navbar-brand .navbar-item {
-    align-items: center;
-    display: flex;
-  }
-
-  .navbar-menu {
-    background: var(--navbar-menu-background);
-    box-shadow: 0 8px 16px rgba(10, 10, 10, 0.1);
-    max-height: var(--body-min-height);
-    overflow-y: auto;
-    overscroll-behavior: none;
-    padding: 0.5rem 0;
-  }
-
-  .navbar-menu:not(.is-active) {
-    display: none;
-  }
-
-  .navbar-menu a.navbar-item:hover,
-  .navbar-menu .navbar-link:hover {
-    background: var(--navbar-menu_hover-background);
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  .navbar-burger {
-    display: none;
-  }
-
-  .navbar,
-  .navbar-menu,
-  .navbar-end {
-    display: flex;
-  }
-
-  .navbar-item,
-  .navbar-link {
-    display: flex;
-    position: relative;
-    flex: none;
-  }
-
-  .navbar-item:not(.has-dropdown),
-  .navbar-link {
-    align-items: center;
-  }
-
-  .navbar-item.is-hoverable:hover .navbar-dropdown {
-    display: block;
-  }
-
-  .navbar-link::after {
-    border-width: 0 0 1px 1px;
-    border-style: solid;
-    content: "";
-    display: block;
-    height: 0.5em;
-    pointer-events: none;
-    position: absolute;
-    transform: rotate(-45deg);
-    width: 0.5em;
-    margin-top: -0.375em;
-    right: 1.125em;
-    top: 50%;
-  }
-
-  .navbar-end > .navbar-item,
-  .navbar-end .navbar-link {
-    color: var(--navbar-font-color);
-  }
-
-  .navbar-end > a.navbar-item:hover,
-  .navbar-end .navbar-link:hover,
-  .navbar-end .navbar-item.has-dropdown:hover .navbar-link {
-    background: var(--navbar_hover-background);
-    color: var(--navbar-font-color);
-  }
-
-  .navbar-end .navbar-link::after {
-    border-color: currentColor;
-  }
-
-  .navbar-dropdown {
-    background: var(--navbar-menu-background);
-    border: 1px solid var(--navbar-menu-border-color);
-    border-top: none;
-    border-radius: 0 0 0.25rem 0.25rem;
-    display: none;
-    top: 100%;
-    left: 0;
-    min-width: 100%;
-    position: absolute;
-  }
-
-  .navbar-dropdown .navbar-item {
-    padding: 0.5rem 3rem 0.5rem 1rem;
-    white-space: nowrap;
-  }
-
-  .navbar-dropdown .navbar-item small {
-    position: relative;
-    right: -2rem;
-  }
-
-  .navbar-dropdown .navbar-item:last-child {
-    border-radius: inherit;
-  }
-
-  .navbar-dropdown.is-right {
-    left: auto;
-    right: 0;
-  }
-
-  .navbar-dropdown a.navbar-item:hover {
-    background: var(--navbar-menu_hover-background);
-  }
-}
+@media screen and (max-width: 1023.5px) {
+  html.is-clipped--navbar {
+    overflow-y: hidden;
+  }
+}
+
+body {
+  padding-top: var(--navbar-height);
+}
+
+.navbar {
+  background: var(--navbar-background);
+  color: var(--navbar-font-color);
+  font-size: calc(16 / var(--rem-base) * 1rem);
+  height: var(--navbar-height);
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: var(--z-index-navbar);
+}
+
+.navbar a {
+  text-decoration: none;
+}
+
+.navbar-brand {
+  display: flex;
+  flex: auto;
+  padding-left: 1rem;
+}
+
+.navbar-brand .navbar-item {
+  color: var(--navbar-font-color);
+}
+
+.navbar-brand .navbar-item:first-child {
+  align-self: center;
+  padding: 0;
+  font-size: calc(22 / var(--rem-base) * 1rem);
+  flex-wrap: wrap;
+  line-height: 1;
+}
+
+.navbar-brand .navbar-item:first-child a {
+  color: inherit;
+  word-wrap: normal;
+}
+
+.navbar-brand .navbar-item:first-child :not(:last-child) {
+  padding-right: 0.375rem;
+}
+
+.navbar-brand .navbar-item.search {
+  flex: auto;
+  justify-content: flex-end;
+}
+
+#search-input {
+  color: #333;
+  font-family: inherit;
+  font-size: 0.95rem;
+  width: 150px;
+  border: 1px solid #dbdbdb;
+  border-radius: 0.1em;
+  line-height: 1.5;
+  padding: 0 0.25em;
+}
+
+#search-input:disabled {
+  background-color: #dbdbdb;
+  /* disable cursor */
+  cursor: not-allowed;
+  pointer-events: all !important;
+}
+
+#search-input:disabled::placeholder {
+  color: #4c4c4c;
+}
+
+#search-input:focus {
+  outline: none;
+}
+
+.navbar-burger {
+  background: none;
+  border: none;
+  outline: none;
+  line-height: 1;
+  position: relative;
+  width: 3rem;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-left: auto;
+  min-width: 0;
+}
+
+.navbar-burger span {
+  background-color: var(--navbar-font-color);
+  height: 1.5px;
+  width: 1rem;
+}
+
+.navbar-burger:not(.is-active) span {
+  transition: transform ease-out 0.25s, opacity 0s 0.25s, margin-top ease-out 0.25s 0.25s;
+}
+
+.navbar-burger span + span {
+  margin-top: 0.25rem;
+}
+
+.navbar-burger.is-active span + span {
+  margin-top: -1.5px;
+}
+
+.navbar-burger.is-active span:nth-child(1) {
+  transform: rotate(45deg);
+}
+
+.navbar-burger.is-active span:nth-child(2) {
+  opacity: 0;
+}
+
+.navbar-burger.is-active span:nth-child(3) {
+  transform: rotate(-45deg);
+}
+
+.navbar-item,
+.navbar-link {
+  color: var(--navbar-menu-font-color);
+  display: block;
+  line-height: var(--doc-line-height);
+  padding: 0.5rem 1rem;
+}
+
+.navbar-item.has-dropdown {
+  padding: 0;
+}
+
+.navbar-item .icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  display: block;
+}
+
+.navbar-item .icon img,
+.navbar-item .icon svg {
+  fill: currentColor;
+  width: inherit;
+  height: inherit;
+}
+
+.navbar-link {
+  padding-right: 2.5em;
+}
+
+.navbar-dropdown .navbar-item {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
+.navbar-dropdown .navbar-item.has-label {
+  display: flex;
+  justify-content: space-between;
+}
+
+.navbar-dropdown .navbar-item small {
+  color: var(--toolbar-muted-color);
+  font-size: calc(12 / var(--rem-base) * 1rem);
+}
+
+.navbar-divider {
+  background-color: var(--navbar-menu-border-color);
+  border: none;
+  height: 1px;
+  margin: 0.25rem 0;
+}
+
+.navbar .button {
+  display: inline-flex;
+  align-items: center;
+  background: var(--navbar-button-background);
+  border: 1px solid var(--navbar-button-border-color);
+  border-radius: 0.15rem;
+  height: 1.75rem;
+  color: var(--navbar-button-font-color);
+  padding: 0 0.75em;
+  white-space: nowrap;
+}
+
+@media screen and (max-width: 768.5px) {
+  .navbar-brand .navbar-item.search {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
+@media screen and (min-width: 769px) {
+  #search-input {
+    width: 200px;
+  }
+}
+
+@media screen and (max-width: 1023.5px) {
+  .navbar-brand {
+    height: inherit;
+  }
+
+  .navbar-brand .navbar-item {
+    align-items: center;
+    display: flex;
+  }
+
+  .navbar-menu {
+    background: var(--navbar-menu-background);
+    box-shadow: 0 8px 16px rgba(10, 10, 10, 0.1);
+    max-height: var(--body-min-height);
+    overflow-y: auto;
+    overscroll-behavior: none;
+    padding: 0.5rem 0;
+  }
+
+  .navbar-menu:not(.is-active) {
+    display: none;
+  }
+
+  .navbar-menu a.navbar-item:hover,
+  .navbar-menu .navbar-link:hover {
+    background: var(--navbar-menu_hover-background);
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  .navbar-burger {
+    display: none;
+  }
+
+  .navbar,
+  .navbar-menu,
+  .navbar-end {
+    display: flex;
+  }
+
+  .navbar-item,
+  .navbar-link {
+    display: flex;
+    position: relative;
+    flex: none;
+  }
+
+  .navbar-item:not(.has-dropdown),
+  .navbar-link {
+    align-items: center;
+  }
+
+  .navbar-item.is-hoverable:hover .navbar-dropdown {
+    display: block;
+  }
+
+  .navbar-link::after {
+    border-width: 0 0 1px 1px;
+    border-style: solid;
+    content: "";
+    display: block;
+    height: 0.5em;
+    pointer-events: none;
+    position: absolute;
+    transform: rotate(-45deg);
+    width: 0.5em;
+    margin-top: -0.375em;
+    right: 1.125em;
+    top: 50%;
+  }
+
+  .navbar-end > .navbar-item,
+  .navbar-end .navbar-link {
+    color: var(--navbar-font-color);
+  }
+
+  .navbar-end > a.navbar-item:hover,
+  .navbar-end .navbar-link:hover,
+  .navbar-end .navbar-item.has-dropdown:hover .navbar-link {
+    background: var(--navbar_hover-background);
+    color: var(--navbar-font-color);
+  }
+
+  .navbar-end .navbar-link::after {
+    border-color: currentColor;
+  }
+
+  .navbar-dropdown {
+    background: var(--navbar-menu-background);
+    border: 1px solid var(--navbar-menu-border-color);
+    border-top: none;
+    border-radius: 0 0 0.25rem 0.25rem;
+    display: none;
+    top: 100%;
+    /* left: 0; Original */
+    right: 0; /* lets the Links dropdown render fully onscreen */
+    min-width: 100%;
+    position: absolute;
+  }
+
+  .navbar-dropdown .navbar-item {
+    padding: 0.5rem 3rem 0.5rem 1rem;
+    white-space: nowrap;
+  }
+
+  .navbar-dropdown .navbar-item small {
+    position: relative;
+    right: -2rem;
+  }
+
+  .navbar-dropdown .navbar-item:last-child {
+    border-radius: inherit;
+  }
+
+  .navbar-dropdown.is-right {
+    left: auto;
+    right: 0;
+  }
+
+  .navbar-dropdown a.navbar-item:hover {
+    background: var(--navbar-menu_hover-background);
+  }
+}