Fix document renderer sizing issues (3/4) (#998)

* Rework renderer columns

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>

src/components/markdown-renderer/markdown-renderer.scss

@@ -21,10 +21,6 @@
     max-width: 900px;
   }
 
-  & > img {
-    width: unset;
-  }
-
   h1, h2, h3, h4, h5, h6 {
     a.heading-anchor {
       font-size: 0.75em;

src/components/render-page/markdown-document.scss

@@ -0,0 +1,27 @@
+/*!
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+.markdown-document {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  overflow-y: scroll;
+  overflow-x: auto;
+  display: flex;
+  flex-direction: row;
+
+  .markdown-document-side {
+    flex: 1 0 0;
+  }
+
+  .markdown-document-content {
+    padding-left: 10px;
+    padding-right: 10px;
+    flex: 0 0 900px;
+    max-width: 100%;
+    width: 900px;
+  }
+}

src/components/render-page/markdown-document.tsx

@@ -17,6 +17,7 @@ import { ScrollProps } from '../editor-page/synced-scroll/scroll-props'
 import { TableOfContents } from '../editor-page/table-of-contents/table-of-contents'
 import { FullMarkdownRenderer } from '../markdown-renderer/full-markdown-renderer'
 import { ImageClickHandler } from '../markdown-renderer/replace-components/image/image-replacer'
+import './markdown-document.scss'
 
 export interface MarkdownDocumentProps extends ScrollProps {
   extraClasses?: string
@@ -53,33 +54,32 @@ export const MarkdownDocument: React.FC<MarkdownDocumentProps> = (
   const [onLineMarkerPositionChanged, onUserScroll] = useSyncedScrolling(internalDocumentRenderPaneRef, rendererRef, contentLineCount, scrollState, onScroll)
 
   return (
-    <div className={`overflow-y-scroll h-100 bg-light m-0 pb-5 row ${extraClasses ?? ''}`}
+    <div className={`markdown-document ${extraClasses ?? ''}`}
          ref={internalDocumentRenderPaneRef} onScroll={onUserScroll} onMouseEnter={onMakeScrollSource}>
-      <div className={'col-md d-none d-md-block'}/>
+      <div className={'markdown-document-side'}/>
-      <div className={'bg-light col'}>
+      <div className={'bg-light markdown-document-content'}>
         <YamlArrayDeprecationAlert/>
-        <div>
+        <FullMarkdownRenderer
-          <FullMarkdownRenderer
+          rendererRef={rendererRef}
-            rendererRef={rendererRef}
+          className={'flex-fill pt-4 mb-3'}
-            className={'flex-fill pt-4 mb-3'}
+          content={markdownContent}
-            content={markdownContent}
+          onFirstHeadingChange={onFirstHeadingChange}
-            onFirstHeadingChange={onFirstHeadingChange}
+          onLineMarkerPositionChanged={onLineMarkerPositionChanged}
-            onLineMarkerPositionChanged={onLineMarkerPositionChanged}
+          onFrontmatterChange={onFrontmatterChange}
-            onFrontmatterChange={onFrontmatterChange}
+          onTaskCheckedChange={onTaskCheckedChange}
-            onTaskCheckedChange={onTaskCheckedChange}
+          onTocChange={(tocAst) => setTocAst(tocAst)}
-            onTocChange={(tocAst) => setTocAst(tocAst)}
+          wide={wide}
-            wide={wide}
+          baseUrl={baseUrl}
-            baseUrl={baseUrl}
+          onImageClick={onImageClick}/>
-            onImageClick={onImageClick}/>
+
-        </div>
       </div>
 
-      <div className={'col-md pt-4'}>
+      <div className={'markdown-document-side pt-4'}>
         <ShowIf condition={!!tocAst}>
-          <ShowIf condition={width >= 1280}>
+          <ShowIf condition={width >= 1100}>
             <TableOfContents ast={tocAst as TocAst} className={'sticky'} baseUrl={baseUrl}/>
           </ShowIf>
-          <ShowIf condition={width < 1280}>
+          <ShowIf condition={width < 1100}>
             <div className={'markdown-toc-sidebar-button'}>
               <Dropdown drop={'up'}>
                 <Dropdown.Toggle id="toc-overlay-button" variant={'secondary'} className={'no-arrow'}>

src/components/render-page/render-page.tsx

@@ -82,7 +82,7 @@ export const RenderPage: React.FC = () => {
   return (
     <div className={"vh-100 w-100"}>
       <MarkdownDocument
-        extraClasses={'w-100'}
+        extraClasses={'bg-light'}
         markdownContent={markdownContent}
         wide={isWide}
         onTaskCheckedChange={onTaskCheckedChange}