fix: table is now showing properly in preview and post lists (#669)

* fix: table is now showing properly in preview and post lists * refactor: added paragon color code
openedx · Feb 23, 2024 · ddb6c96 · ddb6c96
1 parent ac17fd7
commit ddb6c96
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 4 deletions.
diff --git a/src/components/PostPreviewPanel.jsx b/src/components/PostPreviewPanel.jsx
@@ -18,7 +18,7 @@ const PostPreviewPanel = ({
     <>
       {showPreviewPane && (
         <div
-          className={`w-100 p-2 bg-light-200 rounded box-shadow-down-1 post-preview ${isPost ? 'mt-2 mb-5' : 'my-3'}`}
+          className={`w-100 p-2 bg-light-200 rounded box-shadow-down-1 post-preview overflow-auto ${isPost ? 'mt-2 mb-5' : 'my-3'}`}
           style={{ minHeight: '200px', wordBreak: 'break-word' }}
         >
           <IconButton

diff --git a/src/discussions/discussions-home/DiscussionContent.jsx b/src/discussions/discussions-home/DiscussionContent.jsx
@@ -13,7 +13,7 @@ const DiscussionContent = () => {
   const postEditorVisible = useSelector((state) => state.threads.postEditorVisible);
 
   return (
-    <div className="d-flex bg-light-400 flex-column w-75 w-xs-100 w-xl-75 align-items-center">
+    <div className="d-flex bg-light-400 flex-column w-75 w-xs-100 w-xl-75 align-items-center overflow-auto">
       <div className="d-flex flex-column w-100">
         <Suspense fallback={(<Spinner />)}>
           <Routes>

diff --git a/src/discussions/posts/post/Post.jsx b/src/discussions/posts/post/Post.jsx
@@ -127,7 +127,7 @@ const Post = ({ handleAddResponseButton }) => {
 
   return (
     <div
-      className="d-flex flex-column w-100 mw-100 post-card-comment"
+      className="d-flex flex-column w-100 mw-100 post-card-comment overflow-auto"
       data-testid={`post-${postId}`}
       // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
       tabIndex="0"
@@ -184,7 +184,7 @@ const Post = ({ handleAddResponseButton }) => {
         title={title}
       />
       <div className="d-flex mt-14px text-break font-style text-primary-500">
-        <HTMLLoader htmlNode={renderedBody} componentId="post" cssClassName="html-loader" testId={postId} />
+        <HTMLLoader htmlNode={renderedBody} componentId="post" cssClassName="html-loader w-100" testId={postId} />
       </div>
       {(topicContext || topic) && (
         <div

diff --git a/src/index.scss b/src/index.scss
@@ -571,3 +571,9 @@ code {
 .content-unavailable-desktop {
   width: 32.188rem !important;
 }
+
+th, td {
+  border: 1px dashed $gray-200;
+  padding: 0.4rem;
+  white-space: nowrap;
+}