use pseudo-element to position caret next to version on explore drawer

diff --git a/src/css/nav.css b/src/css/nav.css
index 475262f..40785b4 100644 (file)
--- a/src/css/nav.css
+++ b/src/css/nav.css
@@ -191,7 +191,7 @@ html.is-clipped--nav {
   flex-shrink: 0;
   color: var(--nav-muted-color);
   box-shadow: 0 -1px 0 var(--nav-panel-divider-color);
-  padding: 0 0.25rem 0 0.5rem;
+  padding: 0 0.5rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -201,11 +201,15 @@ html.is-clipped--nav {
 }
 
 .nav-panel-explore .context .version {
-  background-image: url(../img/chevron.svg);
-  background-repeat: no-repeat;
-  background-position: right 0.5rem top 50%;
-  background-size: auto 0.75em;
-  padding: 0 1.5rem 0 0;
+  display: flex;
+  align-items: inherit;
+}
+
+.nav-panel-explore .context .version::after {
+  content: "";
+  background: url(../img/chevron.svg) no-repeat center right / auto 100%;
+  width: 1.25em;
+  height: 0.75em;
 }
 
 .nav-panel-explore .components {