fix(catalog post): display title inline

src/components/catalog-row/catalog-row.tsx

@@ -175,14 +175,7 @@ const CatalogPost = ({ post }: { post: Comment }) => {
 
   const postContent = (
     <div className={`${styles.teaser} ${hidden && styles.hidden}`}>
-      {hidden ? (
-        <b>({t('hidden')})</b>
-      ) : (
-        <>
-          <b>{title && `${title}${content ? ': ' : ''}`}</b>
-          <Markdown content={content} spoiler={spoiler} />
-        </>
-      )}
+      {hidden ? <b>({t('hidden')})</b> : <Markdown title={title} content={content} spoiler={spoiler} />}
     </div>
   );
 

src/components/markdown/markdown.module.css

@@ -44,4 +44,8 @@
   background-color: #d6daf0;
   border: 1px solid #b7c5d9;
   padding: 2px;
+}
+
+.inline {
+  display: inline;
 }

src/components/markdown/markdown.tsx

@@ -125,9 +125,10 @@ const blockquoteToGreentext = () => (tree: any) => {
 interface MarkdownProps {
   content: string;
   spoiler?: boolean;
+  title?: string;
 }
 
-const Markdown = ({ content, spoiler }: MarkdownProps) => {
+const Markdown = ({ content, spoiler, title }: MarkdownProps) => {
   const remarkPlugins: any[] = [[supersub]];
 
   if (content && content.length <= MAX_LENGTH_FOR_GFM) {
@@ -152,12 +153,18 @@ const Markdown = ({ content, spoiler }: MarkdownProps) => {
 
   return (
     <span className={styles.markdown}>
+      {isInCatalogView && title && (
+        <span>
+          <b>{title}</b>
+          {content ? ': ' : ''}
+        </span>
+      )}
       <ReactMarkdown
         children={content}
         remarkPlugins={remarkPlugins}
         rehypePlugins={[[rehypeSanitize, customSchema]]}
         components={{
-          p: ({ children }) => <p>{spoiler ? <span className={styles.spoiler}>{children}</span> : children}</p>,
+          p: ({ children }) => <p className={isInCatalogView ? styles.inline : ''}>{spoiler ? <span className={styles.spoiler}>{children}</span> : children}</p>,
           img: ({ src }) => <span>{src}</span>,
           video: ({ src }) => <span>{src}</span>,
           iframe: ({ src }) => <span>{src}</span>,
@@ -187,5 +194,4 @@ const Markdown = ({ content, spoiler }: MarkdownProps) => {
     </span>
   );
 };
-
 export default React.memo(Markdown);