From 6a6166f9a5e6416110ad10195ce986569e1b982c Mon Sep 17 00:00:00 2001
From: Bola Ahmed Buari <bb@zammad.com>
Date: Thu, 10 Mar 2022 12:37:33 +0100
Subject: [PATCH] Fixes #3665 - Longer category names break boxes in mobile
 version.

---
 .../knowledge_base/_reader_list_item.jst.eco  |  2 +-
 app/assets/stylesheets/knowledge_base.scss    | 48 ++++++++++++++++++-
 app/assets/stylesheets/zammad.scss            |  7 +++
 .../public/categories/_category.html.erb      |  6 ++-
 4 files changed, 59 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/app/views/knowledge_base/_reader_list_item.jst.eco b/app/assets/javascripts/app/views/knowledge_base/_reader_list_item.jst.eco
index e63571838..c5d553d97 100644
--- a/app/assets/javascripts/app/views/knowledge_base/_reader_list_item.jst.eco
+++ b/app/assets/javascripts/app/views/knowledge_base/_reader_list_item.jst.eco
@@ -1,6 +1,6 @@
 <a href="<%- @item.url %>">
   <span class="section-inner">
     <%- @iconWithModifier(@item, className: 'section-inner-icon-holder', iconset: @iconset, addStateClass: true) %>
-    <span><%= @item.title %></span>
+    <span class="title"><%= @item.title %></span>
   </span>
 </a>
diff --git a/app/assets/stylesheets/knowledge_base.scss b/app/assets/stylesheets/knowledge_base.scss
index f74370ac5..9414c67b3 100644
--- a/app/assets/stylesheets/knowledge_base.scss
+++ b/app/assets/stylesheets/knowledge_base.scss
@@ -36,6 +36,12 @@ $dark-border: hsl(210, 14%, 91%);
   }
 }
 
+@mixin small-phone {
+  @media screen and (max-width: 576px) {
+    @content;
+  }
+}
+
 /* sets LTR and RTL within the same style call */
 @mixin bidi-style($prop, $value, $inverse-prop, $default-value) {
   #{$prop}: $value;
@@ -458,6 +464,9 @@ b {
     ul,
     ol {
       @include bidi-style(padding-left, 1.5em, padding-right, 0);
+      @include phone {
+        @include bidi-style(padding-left, 0, padding-right, 0);
+      }
     }
   }
 }
@@ -704,12 +713,20 @@ b {
       width: 25%;
     }
 
+    @include small-phone {
+      width: 100%;
+    }
+
     a {
-      padding-bottom: 72%;
+      padding-bottom: 82%;
       position: relative;
       line-height: 1.3;
 
       @extend %box-link;
+
+      @include small-phone {
+        padding: 0;
+      }
     }
 
     &--subsection {
@@ -731,10 +748,31 @@ b {
       flex-direction: column;
       text-align: center;
 
+      @include small-phone {
+        position: static;
+        padding: 10px;
+        flex-direction: row;
+        justify-content: flex-start;
+        text-align: initial;
+
+        > span {
+          padding-left: 1em;
+        }
+      }
+
       span {
         display: block;
         max-width: 100%;
       }
+
+      @media screen and (min-width: 576px) {
+        .title {
+          display: -webkit-box;
+          overflow: auto;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 3;
+        }
+      }
     }
 
     &-category,
@@ -852,6 +890,14 @@ b {
     fill: currentColor;
     line-height: inherit;
     flex-shrink: 0;
+    width: 35px;
+
+    .sections--grid & {
+      @include small-phone {
+        @include ltr(margin, 0);
+        @include rtl(margin, 0);
+      }
+    }
   }
 }
 
diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss
index 47fa39750..270ad8353 100644
--- a/app/assets/stylesheets/zammad.scss
+++ b/app/assets/stylesheets/zammad.scss
@@ -13510,6 +13510,13 @@ span.is-disabled {
         justify-content: center;
         flex-direction: column;
         text-align: center;
+
+        .title {
+          display: -webkit-box;
+          overflow: auto;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 5;
+        }
       }
     }
 
diff --git a/app/views/knowledge_base/public/categories/_category.html.erb b/app/views/knowledge_base/public/categories/_category.html.erb
index 145c5c07c..72cd7d2e4 100644
--- a/app/views/knowledge_base/public/categories/_category.html.erb
+++ b/app/views/knowledge_base/public/categories/_category.html.erb
@@ -2,8 +2,10 @@
   <%= link_to custom_path_if_needed help_category_path(category.translation, locale: params[:locale]), @knowledge_base do %>
     <span class="section-inner">
       <%= icon(category.category_icon, knowledge_base.iconset) %>
-      <span><%= category.translation.title %></span>
-      <%= visibility_note(category) %>
+      <span>
+        <span class="title"><%= category.translation.title %></span>
+        <%= visibility_note(category) %>
+      </span>
     </span>
   <% end %>
 </li>