diff --git a/ui/component/layoutWrapperText/view.jsx b/ui/component/layoutWrapperText/view.jsx
index 295390c73..56c20a133 100644
--- a/ui/component/layoutWrapperText/view.jsx
+++ b/ui/component/layoutWrapperText/view.jsx
@@ -1,6 +1,7 @@
 // @flow
 import * as React from 'react';
 import { normalizeURI } from 'lbry-redux';
+import classNames from 'classnames';
 import FilePrice from 'component/filePrice';
 import FileAuthor from 'component/fileAuthor';
 import FileViewCount from 'component/fileViewCount';
@@ -28,11 +29,11 @@ function LayoutWrapperText(props: Props) {
   const { uri, claim, title, nsfw, contentType, fileType } = props;
 
   const markdownType = ['md', 'markdown'];
-  const isMd = markdownType.includes(fileType) || contentType === 'text/markdown' || contentType === 'text/md';
+  const isMarkdown = markdownType.includes(fileType) || contentType === 'text/markdown' || contentType === 'text/md';
 
   return (
     <div>
-      <div className={`main__document-wrapper${isMd ? '-md' : ''}`}>
+      <div className={classNames('main__document-wrapper', { 'main__document-wrapper--markdown': isMarkdown })}>
         <ClaimUri uri={uri} />
 
         <div className="media__title">
diff --git a/ui/scss/component/_main.scss b/ui/scss/component/_main.scss
index 6542d1f63..210da2f17 100644
--- a/ui/scss/component/_main.scss
+++ b/ui/scss/component/_main.scss
@@ -113,7 +113,7 @@
   }
 }
 
-.main__document-wrapper-md {
+.main__document-wrapper--markdown {
   @extend .main__document-wrapper;
   width: 40em;
   max-width: unset;