From d28502b9170330b8c758253ba7eba61cf02361ef Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Tue, 20 Sep 2022 22:42:09 +0530
Subject: [PATCH] Bug: Adds support multiline text input on article edit page
 (#5465)

* Bug: Scroll issue with article list page

* Adds support multiline text input on article edit page
---
 .../dashboard/helpcenter/components/ArticleEditor.vue     | 8 ++++++--
 .../helpcenter/pages/articles/ListAllArticles.vue         | 1 +
 .../dashboard/helpcenter/pages/articles/NewArticle.vue    | 1 +
 app/views/public/api/v1/portals/_category-block.html.erb  | 2 +-
 4 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue
index 00fc905b5..fef43a7fa 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue
@@ -1,8 +1,9 @@
 <template>
   <div class="edit-article--container">
-    <input
+    <resizable-text-area
       v-model="articleTitle"
       type="text"
+      rows="1"
       class="article-heading"
       :placeholder="$t('HELP_CENTER.EDIT_ARTICLE.TITLE_PLACEHOLDER')"
       @focus="onFocus"
@@ -23,11 +24,13 @@
 
 <script>
 import { debounce } from '@chatwoot/utils';
+import ResizableTextArea from 'shared/components/ResizableTextArea';
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
 
 export default {
   components: {
     WootMessageEditor,
+    ResizableTextArea,
   },
   props: {
     article: {
@@ -83,7 +86,8 @@ export default {
   font-size: var(--font-size-giga);
   font-weight: var(--font-weight-bold);
   min-height: var(--space-jumbo);
-  max-height: var(--space-jumbo);
+  max-height: 64rem;
+  height: auto;
   border: 0px solid transparent;
   padding: 0;
   color: var(--s-900);
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListAllArticles.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListAllArticles.vue
index 71c7599b4..628db3782 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListAllArticles.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListAllArticles.vue
@@ -149,6 +149,7 @@ export default {
 .container {
   padding: 0 var(--space-normal);
   width: 100%;
+  overflow: auto;
   .articles--loader {
     align-items: center;
     display: flex;
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/NewArticle.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/NewArticle.vue
index 7e0fafff0..865c87c3a 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/NewArticle.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/NewArticle.vue
@@ -126,5 +126,6 @@ export default {
 }
 .is-sidebar-open {
   flex: 0.7;
+  flex-grow: 1;
 }
 </style>
diff --git a/app/views/public/api/v1/portals/_category-block.html.erb b/app/views/public/api/v1/portals/_category-block.html.erb
index 9f03b7aea..514a5ce79 100644
--- a/app/views/public/api/v1/portals/_category-block.html.erb
+++ b/app/views/public/api/v1/portals/_category-block.html.erb
@@ -15,7 +15,7 @@
     </div>
     <% else %>
       <% category.articles.published.take(5).each do |article| %>
-      <div class="flex justify-between content-center h-8 my-1">
+      <div class="flex justify-between content-center min:h-8 my-1">
         <a
           class="text-slate-800 hover:underline leading-8"
           href="/hc/<%= portal.slug %>/<%= category.locale %>/<%= category.slug %>/<%= article.id %>"