fix: responsiveness of MFE discussions (#697)

* fix: fixed sidebar xl screen width

* fix: fixed failing test runs

* refactor: removed unused css classes

Author: ayesha-waris

src/discussions/common/ActionsDropdown.jsx

@@ -99,7 +99,7 @@ const ActionsDropdown = ({
                     src={action.icon}
                     className="icon-size-24"
                   />
-                  <span className="font-weight-normal font-xl ml-2">
+                  <span className="font-weight-normal ml-2">
                     {intl.formatMessage(action.label)}
                   </span>
                 </Dropdown.Item>

src/discussions/common/AuthorLabel.jsx

@@ -38,7 +38,7 @@ const AuthorLabel = ({
 
   const authorName = useMemo(() => (
     <span
-      className={classNames('mr-1.5 font-size-14 font-style font-weight-500 author-name', {
+      className={classNames('mr-1.5 font-style font-weight-500 author-name', {
         'text-gray-700': isRetiredUser,
         'text-primary-500': !authorLabelMessage && !isRetiredUser,
       })}
@@ -71,7 +71,7 @@ const AuthorLabel = ({
           />
           {authorLabelMessage && (
             <span
-              className={classNames('mr-1.5 font-size-14 font-style font-weight-500', {
+              className={classNames('mr-1.5 font-style font-weight-500', {
                 'text-primary-500': showTextPrimary,
                 'text-gray-700': isRetiredUser,
               })}

src/discussions/content-unavailable/ContentUnavailable.jsx

@@ -35,7 +35,7 @@ const ContentUnavailable = ({ subTitleMessage }) => {
           {intl.formatMessage(messages.contentUnavailableTitle)}
         </h3>
         <p className="pb-2 text-gray-500 text-center">{intl.formatMessage(subTitleMessage)}</p>
-        <Button onClick={redirectToDashboard} variant="outline-dark" className="font-size-14 py-2 px-2.5">
+        <Button onClick={redirectToDashboard} variant="outline-dark" className="py-2 px-2.5">
           {intl.formatMessage(messages.contentUnavailableAction)}
         </Button>
       </div>

src/discussions/discussions-home/DiscussionsHome.jsx

@@ -82,7 +82,7 @@ const DiscussionsHome = () => {
     <Suspense fallback={(<Spinner />)}>
       <DiscussionContext.Provider value={discussionContextValue}>
         {!enableInContextSidebar && (<Header courseOrg={org} courseNumber={courseNumber} courseTitle={courseTitle} />)}
-        <main className="container-fluid d-flex flex-column p-0 w-100" id="main" tabIndex="-1">
+        <main className="container-fluid d-flex flex-column p-0 w-100 font-size" id="main" tabIndex="-1">
           {!enableInContextSidebar && <CourseTabsNavigation />}
           {(isEnrolled || !isUserLearner) && (
             <div

src/discussions/learners/learner/LearnerCard.jsx

@@ -37,7 +37,7 @@ const LearnerCard = ({ learner }) => {
           <div className="d-flex flex-column justify-content-start mw-100 flex-fill">
             <div className="d-flex align-items-center flex-fill">
               <div
-                className="text-truncate font-weight-500 font-size-14 text-primary-500 font-style"
+                className="text-truncate font-weight-500 text-primary-500 font-style"
               >
                 {username}
               </div>

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

@@ -73,7 +73,7 @@ const CommentsView = ({ threadType }) => {
         onClick={handleLoadMoreResponses}
         variant="link"
         block="true"
-        className="px-4 mt-3 border-0 line-height-24 py-0 mb-2 font-style font-weight-500 font-size-14"
+        className="px-4 mt-3 border-0 line-height-24 py-0 mb-2 font-style font-weight-500"
         data-testid="load-more-comments"
       >
         {intl.formatMessage(messages.loadMoreResponses)}
@@ -92,7 +92,7 @@ const CommentsView = ({ threadType }) => {
              variant="plain"
              block="true"
              className="card mb-4 px-0 border-0 py-10px mt-2 font-style font-weight-500
-                    line-height-24 font-size-14 text-primary-500"
+                    line-height-24 text-primary-500"
              onClick={handleAddResponse}
              data-testid="add-response"
            >

src/discussions/post-comments/comments/comment/Comment.jsx

@@ -249,7 +249,7 @@ const Comment = ({
               onClick={handleLoadMoreComments}
               variant="link"
               block="true"
-              className="font-size-14 line-height-24 font-style pt-10px border-0 font-weight-500 pb-0"
+              className="line-height-24 font-style pt-10px border-0 font-weight-500 pb-0"
               data-testid="load-more-comments-responses"
             >
               {intl.formatMessage(messages.loadMoreComments)}
@@ -267,7 +267,7 @@ const Comment = ({
             ) : (
               !isClosed && isUserPrivilegedInPostingRestriction && (inlineReplies.length >= 5) && (
                 <Button
-                  className="d-flex flex-grow mt-2 font-size-14 font-style font-weight-500 text-primary-500 add-comment-btn rounded-0"
+                  className="d-flex flex-grow mt-2 font-style font-weight-500 text-primary-500 add-comment-btn rounded-0"
                   variant="plain"
                   style={{ height: '36px' }}
                   onClick={handleAddCommentReply}

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

@@ -241,7 +241,7 @@ const PostEditor = ({
       resetForm,
     }) => (
       <Form className="m-4 card p-4 post-form" onSubmit={handleSubmit}>
-        <h4 className="mb-4 font-style font-size-16" style={{ lineHeight: '16px' }}>
+        <h4 className="mb-4 font-style" style={{ lineHeight: '16px' }}>
           {editExisting
             ? intl.formatMessage(messages.editPostHeading)
             : intl.formatMessage(messages.addPostHeading)}
@@ -423,7 +423,7 @@ const PostEditor = ({
                 onBlur={handleBlur}
                 className="mr-4.5"
               >
-                <span className="font-size-14">
+                <span>
                   {intl.formatMessage(messages.followPost)}
                 </span>
               </Form.Checkbox>
@@ -436,7 +436,7 @@ const PostEditor = ({
                 onChange={handleChange}
                 onBlur={handleBlur}
               >
-                <span className="font-size-14">
+                <span>
                   {intl.formatMessage(messages.anonymousToPeersPost)}
                 </span>
               </Form.Checkbox>

src/discussions/posts/post-filter-bar/PostFilterBar.jsx

@@ -44,7 +44,7 @@ export const ActionItem = React.memo(({
     // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
     tabIndex={value === selected ? '0' : '-1'}
   >
-    <Icon src={Check} className={classNames('text-success mr-2', { invisible: value !== selected })} />
+    <Icon src={Check} className={classNames('text-success dropdown-icon-dimensions', { invisible: value !== selected })} />
     <Form.Radio id={id} className="sr-only sr-only-focusable" value={value} tabIndex="0">
       {label}
     </Form.Radio>

src/discussions/posts/post/Post.jsx

@@ -206,13 +206,9 @@ const Post = ({ handleAddResponseButton }) => {
             )}
           >
             {(topicContext && !topic) ? (
-              <>
-                <span className="w-auto">{topicContext.chapterName}</span>
-                <span className="mx-1">/</span>
-                <span className="w-auto">{topicContext.verticalName}</span>
-                <span className="mx-1">/</span>
-                <span className="w-auto">{topicContext.unitName}</span>
-              </>
+              <span>
+                {topicContext.chapterName} / {topicContext.verticalName} / {topicContext.unitName}
+              </span>
             ) : (
               getTopicInfo(topic)
             )}