From 868f1a18091a00a80d44f308888709e04d782c9e Mon Sep 17 00:00:00 2001
From: evazion <noizave@gmail.com>
Date: Tue, 23 Feb 2021 17:57:21 -0600
Subject: [PATCH] related tags: fix layout on mobile.

Make related tags use a single-column layout on mobile.

Related tags layout is still broken inside the tag edit dialog box, when
the dialog box is too small for multiple columns.
---
 app/javascript/src/styles/common/utilities.scss | 1 +
 app/views/related_tags/_container.html.erb      | 2 +-
 app/views/related_tags/_current_tags.html.erb   | 2 +-
 app/views/related_tags/_source_tags.html.erb    | 2 +-
 app/views/related_tags/_user_tags.html.erb      | 2 +-
 5 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/app/javascript/src/styles/common/utilities.scss b/app/javascript/src/styles/common/utilities.scss
index c9a86985a..9f43d783a 100644
--- a/app/javascript/src/styles/common/utilities.scss
+++ b/app/javascript/src/styles/common/utilities.scss
@@ -52,6 +52,7 @@ $spacer: 0.25rem; /* 4px */
   .md\:inline-block { display: inline-block; }
   .md\:flex { display: flex; }
 
+  .md\:space-x-4 > * + * { margin-left: 4 * $spacer; }
   .md\:space-x-8 > * + * { margin-left: 8 * $spacer; }
   .md\:space-y-0 > * + * { margin-top: 0; }
 }
diff --git a/app/views/related_tags/_container.html.erb b/app/views/related_tags/_container.html.erb
index 390a22c98..7fa07e5af 100644
--- a/app/views/related_tags/_container.html.erb
+++ b/app/views/related_tags/_container.html.erb
@@ -5,7 +5,7 @@
     <a href="#" id="hide-related-tags-link">«</a>
   </h3>
 
-  <div class="related-tags w-full mb-4 p-4 flex space-x-4">
+  <div class="related-tags w-full mb-4 p-4 space-y-4 md:space-y-0 md:flex md:space-x-4">
     <%= render "related_tags/user_tags", related_tags: nil %>
     <%= render "related_tags/current_tags", related_tags: nil %>
     <%= render "related_tags/source_tags", source: nil %>
diff --git a/app/views/related_tags/_current_tags.html.erb b/app/views/related_tags/_current_tags.html.erb
index 24bccf741..ecf389b2d 100644
--- a/app/views/related_tags/_current_tags.html.erb
+++ b/app/views/related_tags/_current_tags.html.erb
@@ -1,4 +1,4 @@
-<div class="current-related-tags-columns flex space-x-4">
+<div class="current-related-tags-columns space-y-4 md:space-y-0 md:flex md:space-x-4">
   <% if related_tags.present? %>
     <%= render "related_tags/tag_column", tags: related_tags.tags.map(&:name), class: "general-related-tags-column", title: related_tags.pretty_name %>
     <%= render "related_tags/tag_column", tags: related_tags.wiki_page_tags, class: "wiki-related-tags-column", title: link_to_wiki("wiki:#{related_tags.pretty_name}", related_tags.query) %>
diff --git a/app/views/related_tags/_source_tags.html.erb b/app/views/related_tags/_source_tags.html.erb
index 2ebf962fa..df9f6ea7f 100644
--- a/app/views/related_tags/_source_tags.html.erb
+++ b/app/views/related_tags/_source_tags.html.erb
@@ -1,4 +1,4 @@
-<div class="source-related-tags-columns flex space-x-4">
+<div class="source-related-tags-columns">
   <% if source.present? %>
     <%# XXX %>
     <% tags = source.artists.map(&:name) %>
diff --git a/app/views/related_tags/_user_tags.html.erb b/app/views/related_tags/_user_tags.html.erb
index dbccc100c..14ec57199 100644
--- a/app/views/related_tags/_user_tags.html.erb
+++ b/app/views/related_tags/_user_tags.html.erb
@@ -1,4 +1,4 @@
-<div class="user-related-tags-columns flex space-x-4">
+<div class="user-related-tags-columns space-y-4 md:space-y-0 md:flex md:space-x-4">
   <% if related_tags.present? %>
     <%= render "related_tags/tag_column", tags: related_tags.recent_tags, class: "recent-related-tags-column", title: "Recent" %>
     <%= render "related_tags/tag_column", tags: related_tags.favorite_tags, class: "frequent-related-tags-column", title: "Frequent" %>