fix: Discussions UI fixes on mobile resolutions (#690)

* fix: redirection to learners tab in inContext view

* fix: changed username to simple text for incontext view

* test: username is not clickable in incontext view

---------

Co-authored-by: ayesha waris <73840786+ayesha-waris@users.noreply.github.com>
Co-authored-by: sohailfatima <23100065@lums.edu.pk>
Co-authored-by: Fatima Sohail <68312464+sohailfatima@users.noreply.github.com>
Co-authored-by: Awais Ansari <79941147+awais-ansari@users.noreply.github.com>

src/discussions/common/AuthorLabel.jsx

@@ -28,7 +28,7 @@ const AuthorLabel = ({
 }) => {
   timeago.register('time-locale', timeLocale);
   const intl = useIntl();
-  const { courseId } = useContext(DiscussionContext);
+  const { courseId, enableInContextSidebar } = useContext(DiscussionContext);
   let icon = null;
   let authorLabelMessage = null;
 
@@ -47,11 +47,11 @@ const AuthorLabel = ({
   const className = classNames('d-flex align-items-center', { 'mb-0.5': !postOrComment }, labelColor);
 
   const showUserNameAsLink = useShowLearnersTab()
-    && linkToProfile && author && author !== intl.formatMessage(messages.anonymous);
+    && linkToProfile && author && author !== intl.formatMessage(messages.anonymous) && !enableInContextSidebar;
 
   const authorName = useMemo(() => (
     <span
-      className={classNames('mr-1.5 font-size-14 font-style font-weight-500', {
+      className={classNames('mr-1.5 font-size-14 font-style font-weight-500 author-name', {
         'text-gray-700': isRetiredUser,
         'text-primary-500': !authorLabelMessage && !isRetiredUser,
       })}
@@ -114,7 +114,7 @@ const AuthorLabel = ({
 
   return showUserNameAsLink
     ? (
-      <div className={className}>
+      <div className={`${className} flex-wrap`}>
         <Link
           data-testid="learner-posts-link"
           id="learner-posts-link"
@@ -127,7 +127,7 @@ const AuthorLabel = ({
         {labelContents}
       </div>
     )
-    : <div className={className}>{authorName}{labelContents}</div>;
+    : <div className={`${className} flex-wrap`}>{authorName}{labelContents}</div>;
 };
 
 AuthorLabel.propTypes = {

src/discussions/common/AuthorLabel.test.jsx

@@ -21,11 +21,11 @@ let store;
 let axiosMock;
 let container;
 
-function renderComponent(author, authorLabel, linkToProfile, labelColor) {
+function renderComponent(author, authorLabel, linkToProfile, labelColor, enableInContextSidebar) {
   const wrapper = render(
     <IntlProvider locale="en">
       <AppProvider store={store}>
-        <DiscussionContext.Provider value={{ courseId }}>
+        <DiscussionContext.Provider value={{ courseId, enableInContextSidebar }}>
           <AuthorLabel
             author={author}
             authorLabel={authorLabel}
@@ -79,9 +79,9 @@ describe('Author label', () => {
     );
 
     it(
-      `it is "${!linkToProfile && 'not'}" clickable when linkToProfile is ${!!linkToProfile}`,
+      `it is "${(!linkToProfile) && 'not'}" clickable when linkToProfile is ${!!linkToProfile} and enableInContextSidebar is false`,
       async () => {
-        renderComponent(author, authorLabel, linkToProfile, labelColor);
+        renderComponent(author, authorLabel, linkToProfile, labelColor, false);
 
         if (linkToProfile) {
           expect(screen.queryByTestId('learner-posts-link')).toBeInTheDocument();
@@ -91,6 +91,15 @@ describe('Author label', () => {
       },
     );
 
+    it(
+      'it is not clickable when enableInContextSidebar is true',
+      async () => {
+        renderComponent(author, authorLabel, linkToProfile, labelColor, true);
+
+        expect(screen.queryByTestId('learner-posts-link')).not.toBeInTheDocument();
+      },
+    );
+
     it(
       `it has "${!linkToProfile && 'not'}" label text and label color when linkToProfile is ${!!linkToProfile}`,
       async () => {

src/discussions/discussions-home/DiscussionSidebar.jsx

@@ -55,7 +55,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,
       })}

src/discussions/post-comments/comments/CommentsView.jsx

@@ -36,7 +36,7 @@ const CommentsView = ({ endorsed }) => {
 
   const handleDefinition = useCallback((message, commentsLength) => (
     <div
-      className="mx-4 my-14px text-gray-700 font-style"
+      className="comment-line mx-4 my-14px text-gray-700 font-style"
       role="heading"
       aria-level="2"
     >

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}

src/discussions/posts/post-editor/PostTypeCard.jsx

@@ -19,9 +19,9 @@ const PostTypeCard = ({
     <label htmlFor={`post-type-${value}`} className="d-flex p-0 my-0 mr-3">
       <Form.Radio value={value} id={`post-type-${value}`} className="sr-only">{type}</Form.Radio>
       <Card
-        className={classNames('border-2 shadow-none', {
-          'border-primary': selected,
-          'border-light-400': !selected,
+        className={classNames('shadow-none', {
+          'border-primary-500-2': selected,
+          'border-light-400-2': !selected,
         })}
         style={{ cursor: 'pointer', width: `${enableInContextSidebar ? '10.021rem' : '14.25rem'}` }}
       >

src/index.scss

@@ -241,6 +241,10 @@ header {
 
 .sidebar-desktop-width {
   min-width: 29rem !important;
+
+  @include media-breakpoint-down(lg) {
+    min-width: 25rem !important;
+  }
 }
 
 .sidebar-XL-width {
@@ -251,8 +255,13 @@ header {
   background-color: #e9e6e4 !important;
 }
 
-.border-2 {
-  border: 2px solid #cccccc !important;
+.border-light-400-2 {
+  border: 2px solid $light-400 !important;
+  border-width: 2px !important;
+}
+
+.border-primary-500-2 {
+  border: 2px solid $primary-500 !important;
   border-width: 2px !important;
 }
 
@@ -331,7 +340,7 @@ header {
 
 .header-action-bar {
   background-color: #fff;
-  z-index: 3;
+  z-index: 2 !important;
   box-shadow: 0px 2px 4px rgb(0 0 0 / 15%), 0px 2px 8px rgb(0 0 0 / 15%);
   position: sticky;
   top: 0;
@@ -340,11 +349,19 @@ header {
     .nav-item:not(:last-child){
       .nav-link {
           border-right: 0;
+
+          @media screen and (max-width: 567px) {
+            border-right: solid 1px #e9e6e4;
+          }
       }
     }
   }
 }
 
+.tox-tinymce-aux {
+  z-index: 1 !important;
+}
+
 .breadcrumb-menu {
   z-index: 1;
 }
@@ -460,6 +477,10 @@ header {
       display: flex;
     }
   }
+
+  .pgn__avatar {
+    flex-shrink: 0;
+  }
 }
 
 .spinner-dimentions {
@@ -488,6 +509,11 @@ header {
   z-index: 1;
 }
 
+.comment-line {
+  width: calc(100% - 180px);
+  line-height: 1;
+}
+
 .post-preview,
 .discussion-comments {
   blockquote {
@@ -529,3 +555,9 @@ header {
   left: 50%;
   transform: translate(-50%, -50%);
 }
+
+.author-name {
+  line-height: 1.5;
+  word-break: break-all;
+}
+