style: 3 level topic hierarchy accomodated when incontext discussions is enabled

src/discussions/posts/post/Post.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 
 import { useDispatch, useSelector } from 'react-redux';
@@ -11,6 +11,7 @@ import HTMLLoader from '../../../components/HTMLLoader';
 import { ContentActions } from '../../../data/constants';
 import { selectorForUnitSubsection, selectTopicContext } from '../../../data/selectors';
 import { AlertBanner, Confirmation } from '../../common';
+import { DiscussionContext } from '../../common/context';
 import { selectModerationSettings } from '../../data/selectors';
 import { selectTopic } from '../../topics/data/selectors';
 import { removeThread, updateExistingThread } from '../data/thunks';
@@ -56,6 +57,7 @@ function Post({
     hideReportConfirmation();
   };
 
+  const { inContext } = useContext(DiscussionContext);
   const actionHandlers = {
     [ContentActions.EDIT_CONTENT]: () => history.push({
       ...location,
@@ -107,13 +109,23 @@ function Post({
         <HTMLLoader htmlNode={post.renderedBody} id="post" />
       </div>
       {topicContext && topic && (
-        <div className="border px-3 rounded mb-4 border-light-400 align-self-start py-2.5">
+        <div className={`border px-3 rounded mb-4 border-light-400 align-self-start py-2.5 ${inContext ? 'w-100' : ''}`}>
           <span className="text-gray-500">{intl.formatMessage(messages.relatedTo)}{' '}</span>
           <Hyperlink
             destination={topicContext.unitLink}
             target="_top"
           >
-            {`${getTopicCategoryName(topic)} / ${topic.name}`}
+            {inContext
+              ? (
+                <>
+                  <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>
+                </>
+              )
+              : `${getTopicCategoryName(topic)} / ${topic.name}`}
           </Hyperlink>
         </div>
       )}