From 12fbe7eebdafeef2b232ea2bfb024825306891a1 Mon Sep 17 00:00:00 2001
From: Stanislav <stanislav.lunyachek@raccoongang.com>
Date: Thu, 4 Apr 2024 15:46:01 +0300
Subject: [PATCH] fix: Discussions UI fixes on mobile resolutions (#689)

---
 src/discussions/common/AuthorLabel.jsx                 |  4 ++--
 src/discussions/discussions-home/DiscussionSidebar.jsx |  2 +-
 .../post-comments/comments/comment/Reply.jsx           |  2 +-
 src/index.scss                                         | 10 +++++++++-
 4 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/discussions/common/AuthorLabel.jsx b/src/discussions/common/AuthorLabel.jsx
index dfd70e71..c771d365 100644
--- a/src/discussions/common/AuthorLabel.jsx
+++ b/src/discussions/common/AuthorLabel.jsx
@@ -99,7 +99,7 @@ const AuthorLabel = ({
 
   return showUserNameAsLink
     ? (
-      <div className={className}>
+      <div className={`${className} flex-wrap`}>
         <Link
           data-testid="learner-posts-link"
           id="learner-posts-link"
@@ -112,7 +112,7 @@ const AuthorLabel = ({
         {labelContents}
       </div>
     )
-    : <div className={className}>{authorName}{labelContents}</div>;
+    : <div className={`${className} flex-wrap`}>{authorName}{labelContents}</div>;
 };
 
 AuthorLabel.propTypes = {
diff --git a/src/discussions/discussions-home/DiscussionSidebar.jsx b/src/discussions/discussions-home/DiscussionSidebar.jsx
index 27ad1646..f18a03a0 100644
--- a/src/discussions/discussions-home/DiscussionSidebar.jsx
+++ b/src/discussions/discussions-home/DiscussionSidebar.jsx
@@ -50,7 +50,7 @@ const DiscussionSidebar = ({ displaySidebar, postActionBarRef }) => {
         'd-none': !displaySidebar,
         'd-flex overflow-auto box-shadow-centered-1': displaySidebar,
         'w-100': !isOnDesktop,
-        'sidebar-desktop-width': isOnDesktop && !isOnXLDesktop,
+        'w-25 sidebar-desktop-width': isOnDesktop && !isOnXLDesktop,
         'w-25 sidebar-XL-width': isOnXLDesktop,
         'min-content-height': !enableInContextSidebar,
       })}
diff --git a/src/discussions/post-comments/comments/comment/Reply.jsx b/src/discussions/post-comments/comments/comment/Reply.jsx
index c731213c..1860cfcb 100644
--- a/src/discussions/post-comments/comments/comment/Reply.jsx
+++ b/src/discussions/post-comments/comments/comment/Reply.jsx
@@ -131,7 +131,7 @@ const Reply = ({ responseId }) => {
           className="bg-light-300 pl-4 pt-2.5 pr-2.5 pb-10px flex-fill"
           style={{ borderRadius: '0rem 0.375rem 0.375rem' }}
         >
-          <div className="d-flex flex-row justify-content-between" style={{ height: '24px' }}>
+          <div className="d-flex flex-row justify-content-between">
             <AuthorLabel
               author={author}
               authorLabel={authorLabel}
diff --git a/src/index.scss b/src/index.scss
index e80990b4..aff2bc5e 100755
--- a/src/index.scss
+++ b/src/index.scss
@@ -230,6 +230,10 @@ header {
 
 .sidebar-desktop-width {
   min-width: 29rem !important;
+
+  @include media-breakpoint-down(lg) {
+    min-width: 25rem !important;
+  }
 }
 
 .sidebar-XL-width {
@@ -480,6 +484,10 @@ code {
       display: flex;
     }
   }
+
+  .pgn__avatar {
+    flex-shrink: 0;
+  }
 }
 
 .spinner-dimensions {
@@ -560,7 +568,7 @@ code {
 }
 
 .author-name {
-  line-height: 1;
+  line-height: 1.5;
   word-break: break-all;
 }