From 779dfd199b695fe64ff2d457351ab3cf70d8718c Mon Sep 17 00:00:00 2001
From: Evan Lucas <evanlucas@me.com>
Date: Tue, 31 Aug 2021 10:41:14 -0500
Subject: [PATCH] doc: make version picker usable on mobile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This makes the version picker usable on mobile devices.
Previously, the version picker was difficult to select from. This
change makes the #gtoc > ul > li elements have a display
of `block` instead of `inline`.

PR-URL: https://github.com/nodejs/node/pull/39958
Reviewed-By: Luigi Pinca <luigipinca@gmail.com>
Reviewed-By: Antoine du Hamel <duhamelantoine1995@gmail.com>
Reviewed-By: Tobias Nießen <tniessen@tnie.de>
Reviewed-By: James M Snell <jasnell@gmail.com>
Reviewed-By: Derek Lewis <DerekNonGeneric@inf.is>
---
 doc/api_assets/style.css | 28 +++++++++++++++-------------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/doc/api_assets/style.css b/doc/api_assets/style.css
index 6faeb59efc04dd..90db2f4bd8a66b 100644
--- a/doc/api_assets/style.css
+++ b/doc/api_assets/style.css
@@ -165,19 +165,6 @@ em code {
   line-height: 1.5rem;
 }
 
-#gtoc > ul > li {
-  display: inline;
-  border-right: 1px currentColor solid;
-  margin-right: .4rem;
-  padding-right: .4rem;
-}
-
-#gtoc > ul > li:last-child {
-  border-right: none;
-  margin-right: 0;
-  padding-right: 0;
-}
-
 li.version-picker {
   position: relative;
 }
@@ -741,6 +728,21 @@ kbd {
   outline: var(--brand3) dotted 2px;
 }
 
+@media only screen and (min-width: 577px) {
+  #gtoc > ul > li {
+    display: inline;
+    border-right: 1px currentColor solid;
+    margin-right: .4rem;
+    padding-right: .4rem;
+  }
+
+  #gtoc > ul > li:last-child {
+    border-right: none;
+    margin-right: 0;
+    padding-right: 0;
+  }
+}
+
 @media only screen and (max-width: 1024px) {
   #content {
     overflow: visible;