From 0abc932056629e595c00391baff76dc07f76090a Mon Sep 17 00:00:00 2001
From: Guto Foletto <gutofoletto@gmail.com>
Date: Wed, 17 Oct 2018 12:37:14 -0300
Subject: [PATCH] add styles so permalinks admin could fit mobile screen
 (#6496)

---
 .../admin/templates/permalinks.hbs            |  6 +++--
 .../stylesheets/common/admin/customize.scss   | 25 ++++++++++++++++---
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/admin/templates/permalinks.hbs b/app/assets/javascripts/admin/templates/permalinks.hbs
index 068d1afdcaf..4dd43005997 100644
--- a/app/assets/javascripts/admin/templates/permalinks.hbs
+++ b/app/assets/javascripts/admin/templates/permalinks.hbs
@@ -1,5 +1,7 @@
-<div class="permalink-title"><h2>{{i18n 'admin.permalink.title'}}</h2></div>
-<div class="pull-right">
+<div class="permalink-title">
+  <h2>{{i18n 'admin.permalink.title'}}</h2>
+</div>
+<div class="permalink-search">
   {{text-field value=filter class="url-input" placeholderKey="admin.permalink.form.filter" autocorrect="off" autocapitalize="off"}}
 </div>
 {{permalink-form action="recordAdded"}}
diff --git a/app/assets/stylesheets/common/admin/customize.scss b/app/assets/stylesheets/common/admin/customize.scss
index ce73260b585..9c8cadc6640 100644
--- a/app/assets/stylesheets/common/admin/customize.scss
+++ b/app/assets/stylesheets/common/admin/customize.scss
@@ -574,19 +574,38 @@
   .external_url,
   .post {
     text-overflow: ellipsis;
-    white-space: nowrap;
+  }
+
+  &.grid tr.admin-list-item {
+    grid-template-columns: unset;
+  }
+}
+
+.permalink-search {
+  text-align: left;
+  @media screen and (min-width: map-get($breakpoints, tablet)) {
+    text-align: right;
   }
 }
 
 .permalink-form {
+  align-items: flex-start;
   display: flex;
-  align-items: center;
+  flex-direction: column;
+  flex-wrap: wrap;
+  @media screen and (min-width: map-get($breakpoints, tablet)) {
+    align-items: center;
+    flex-direction: row;
+  }
 
   .select-kit {
     width: 150px;
   }
   input {
-    margin: 0 5px;
+    margin: 5px 0;
+    @media screen and (min-width: map-get($breakpoints, tablet)) {
+      margin: 0 5px;
+    }
   }
 }