fix selector for page versions when version overflows

diff --git a/src/css/page-versions.css b/src/css/page-versions.css
index b317e9c..c1c210d 100644 (file)
--- a/src/css/page-versions.css
+++ b/src/css/page-versions.css
@@ -7,7 +7,8 @@
 
 @media screen and (min-width: 1024px) {
   .page-versions {
-    display: block;
+    display: flex;
+    justify-content: flex-end;
   }
 }
 
@@ -24,14 +25,22 @@
   z-index: var(--z-index-page-version-menu);
 }
 
-.page-versions .version-menu {
-  border: 1px solid transparent;
+.page-versions.is-active .version-menu-toggle {
   background-color: var(--page-version-menu-background);
+}
+
+.page-versions .version-menu {
+  flex: 1 1 auto;
+  display: flex;
+  min-width: 100%;
+  flex-direction: column;
+  background: linear-gradient(to bottom, var(--page-version-menu-background) 0%, var(--page-version-menu-background) 100%) no-repeat;
+  background-position: 100% 1.75em;
   padding: 1.25rem 0.5rem 0.5rem;
   position: absolute;
   top: 0;
-  left: 0;
-  width: 100%;
+  right: 0;
+  white-space: nowrap;
 }
 
 .page-versions:not(.is-active) .version-menu {
@@ -43,6 +52,10 @@
   padding-top: 0.5rem;
 }
 
+.page-versions .version:first-child {
+  margin-top: 0.25rem;
+}
+
 .page-versions .version.is-current {
   display: none;
 }