From 0bae76802ab82dce60cf4c74cce00c80f1e4a2a1 Mon Sep 17 00:00:00 2001
From: Harsh Shandilya <msfjarvis@gmail.com>
Date: Mon, 10 Feb 2020 11:48:45 +0530
Subject: [PATCH] Make tag view scrollable

Signed-off-by: Harsh Shandilya <msfjarvis@gmail.com>
---
 layouts/_default/single.html     |  4 ++--
 themes/hyde/assets/css/poole.css | 13 +++++++++++++
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 1daf11b..d136920 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -7,11 +7,11 @@
       | Also available on <a href="{{ . }}">dev.to</a>
     {{- end -}}
   </p>
-  <p>
+  <div class="tag-container">
     {{ range .Params.tags }}
     <button class="tag-button"><a class="tag-button" href="{{ "tags/" | absLangURL }}{{ . | urlize }}">#{{.}}</a> </button>
     {{ end }}
-  </p>
+  </div>
   {{- with .Content -}}
     {{ . | replaceRE "(<h[1-2] id=\"([^\"]+)\".+)(</h[1-9]+>)" `<a href="#${2}" class="hanchor" ariaLabel="Anchor"> ${1}</a> ${3}` | safeHTML }}
   {{- end -}}
diff --git a/themes/hyde/assets/css/poole.css b/themes/hyde/assets/css/poole.css
index f228352..4dbc4f1 100644
--- a/themes/hyde/assets/css/poole.css
+++ b/themes/hyde/assets/css/poole.css
@@ -96,6 +96,19 @@ div.image_caption {
   color: #757575;
 }
 
+div.tag-container {
+  width: fit-content(300px);
+  margin-bottom: 1rem;
+  overflow-x: auto;
+  scrollbar-width: 0rem;
+  white-space: nowrap;
+  overflow-y: hidden;
+}
+
+::-webkit-scrollbar {
+  display: none;
+}
+
 .tag-button {
   background-color: #202020;
   border: none;