Fixed table of contents style

public/icons/hide-table-of-contents.svg

@@ -1,3 +1,4 @@
-<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M22 24V21H12V19H22V16L26 20L22 24Z" fill="black"/>
+<rect x="0.999512" y="27" width="26" height="26" transform="rotate(-90 0.999512 27)" stroke="currentColor" stroke-width="2"/>
+<path d="M10.9995 18V15H19.9995V13H10.9995V10L6.99951 14L10.9995 18Z" fill="currentColor"/>
 </svg>

public/icons/show-table-of-contents.svg

@@ -1,4 +1,4 @@
-<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="40" height="40" fill="#F7F7F7"/>
+<path d="M6 9.24437C6 8.55582 6.57935 8 7.29706 8C8.01477 8 8.59412 8.55582 8.59412 9.24437C8.59412 9.93293 8.01477 10.4887 7.29706 10.4887C6.57935 10.4887 6 9.93293 6 9.24437ZM6 14.222C6 13.5334 6.57935 12.9776 7.29706 12.9776C8.01477 12.9776 8.59412 13.5334 8.59412 14.222C8.59412 14.9105 8.01477 15.4663 7.29706 15.4663C6.57935 15.4663 6 14.9105 6 14.222ZM7.29706 17.9548C6.57935 17.9548 6 18.5189 6 19.1991C6 19.8794 6.588 20.4435 7.29706 20.4435C8.00612 20.4435 8.59412 19.8794 8.59412 19.1991C8.59412 18.5189 8.01477 17.9548 7.29706 17.9548ZM22.0015 20.0284H9.89562V18.3692H22.0015V20.0284ZM9.89562 15.0517H22.0015V13.3925H9.89562V15.0517ZM9.89562 10.0741V8.41491H22.0015V10.0741H9.89562Z" fill="currentColor"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 15.2444C12 14.5558 12.5794 14 13.2971 14C14.0148 14 14.5941 14.5558 14.5941 15.2444C14.5941 15.9329 14.0148 16.4887 13.2971 16.4887C12.5794 16.4887 12 15.9329 12 15.2444ZM12 20.222C12 19.5334 12.5794 18.9776 13.2971 18.9776C14.0148 18.9776 14.5941 19.5334 14.5941 20.222C14.5941 20.9105 14.0148 21.4663 13.2971 21.4663C12.5794 21.4663 12 20.9105 12 20.222ZM13.2971 23.9548C12.5794 23.9548 12 24.5189 12 25.1991C12 25.8794 12.588 26.4435 13.2971 26.4435C14.0061 26.4435 14.5941 25.8794 14.5941 25.1991C14.5941 24.5189 14.0148 23.9548 13.2971 23.9548ZM28.0015 26.0284H15.8956V24.3692H28.0015V26.0284ZM15.8956 21.0517H28.0015V19.3925H15.8956V21.0517ZM15.8956 16.0741V14.4149H28.0015V16.0741H15.8956Z" fill="black"/>
+<rect x="1" y="1" width="26" height="26" stroke="currentColor" stroke-width="2"/>
 </svg>

src/components/Editor/Editor.tsx

@@ -246,10 +246,17 @@ export const Editor = (props: Props) => {
 
   return (
     <>
-      <div ref={(el) => (editorElRef.current = el)} id="editorBody" />
+      <div class="row">
-      <Show when={isDesktop() && html()}>
+        <div class="col-md-5">
-        <TableOfContents variant="editor" parentSelector="#editorBody" body={html()} />
+          <Show when={isDesktop() && html()}>
-      </Show>
+            <TableOfContents variant="editor" parentSelector="#editorBody" body={html()} />
+          </Show>
+        </div>
+        <div class="col-md-12">
+          <div ref={(el) => (editorElRef.current = el)} id="editorBody" />
+        </div>
+      </div>
+
       <TextBubbleMenu
         isCommonMarkup={isCommonMarkup()}
         editor={editor()}

src/components/Editor/Prosemirror.scss

@@ -13,71 +13,6 @@
 }
 
 // Keeping the cursor active when moving outside the editable area
-.articleEditor p,
-.articleEditor ul,
-.articleEditor h4,
-.articleEditor ol {
-  box-sizing: content-box;
-  flex: 0 0 auto;
-
-  @media (width >= 768px) {
-    padding-left: calc(21.9%);
-    max-width: 72.7%;
-  }
-
-  @media (width >= 1200px) {
-    padding-left: calc(21.5% + 1px);
-    max-width: 64.9%;
-  }
-}
-
-.articleEditor hr,
-.articleEditor blockquote,
-.articleEditor figure,
-.articleEditor article[data-type='incut'] {
-  @media (width >= 768px) {
-    margin-left: calc(21.9% + 3px) !important;
-    max-width: 73.6%;
-  }
-
-  @media (width >= 1200px) {
-    margin-left: calc(21.4% + 3px) !important;
-    max-width: 65.3%;
-  }
-}
-
-.articleEditor h2 {
-  @media (width >= 768px) {
-    padding-left: calc(21.9% + 2px);
-    max-width: 72.7%;
-  }
-
-  @media (width >= 1200px) {
-    padding-left: 21.5%;
-    max-width: 87.1%;
-  }
-}
-
-.articleEditor h3 {
-  @media (width >= 768px) {
-    padding-left: calc(21.9% + 2px);
-  }
-
-  @media (width >= 1200px) {
-    padding-left: 21.5%;
-    max-width: 87.1%;
-  }
-}
-
-.articleEditor * p,
-.articleEditor * h2,
-.articleEditor * h3,
-.articleEditor * h4 {
-  @media (width >= 768px) {
-    padding-left: unset;
-    max-width: unset;
-  }
-}
 
 /* Give a remote user a caret */
 .collaboration-cursor__caret {

src/components/TableOfContents/TableOfContents.module.scss

@@ -1,9 +1,6 @@
 .TableOfContentsFixedWrapper {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 281px;
   min-height: 100%;
+  top: 0;
 }
 
 .TableOfContentsFixedWrapperLefted {
@@ -13,12 +10,12 @@
 
 .TableOfContentsContainer {
   position: sticky;
-  top: 150px;
+  top: 100px;
   right: 20px;
   display: flex;
   width: 100%;
-  height: auto;
+  height: calc(100vh - 250px);
-  padding: 20px;
+  overflow: auto;
   flex-direction: column;
   align-items: flex-start;
   background-color: transparent;
@@ -41,25 +38,19 @@
 
 .TableOfContentsPrimaryButton {
   position: absolute;
-  right: 20px;
+  right: 0;
   top: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 40px;
-  height: 40px;
   background: transparent;
   border: none;
   cursor: pointer;
-
-  &:hover {
-    box-shadow: 0 0 1px 1px rgb(0 0 0 / 30%);
-  }
 }
 
 .TableOfContentsPrimaryButtonLefted {
   right: auto;
-  left: 20px;
+  left: 0;
 }
 
 .TableOfContentsHeadingsList {
@@ -99,7 +90,3 @@
 .TableOfContentsHeadingsItemH4 {
   padding-left: 16px;
 }
-
-.TableOfContentsIconRotated {
-  transform: rotate(180deg);
-}

src/components/TableOfContents/TableOfContents.tsx

@@ -104,12 +104,7 @@ export const TableOfContents = (props: Props) => {
             }}
           >
             <Show when={isVisible()} fallback={<Icon name="show-table-of-contents" class={'icon'} />}>
-              <Icon
+              <Icon name="hide-table-of-contents" class="icon" />
-                name="hide-table-of-contents"
-                class={clsx('icon', {
-                  [styles.TableOfContentsIconRotated]: props.variant === 'editor'
-                })}
-              />
             </Show>
           </button>
         </div>

src/components/Views/Edit.module.scss

@@ -133,7 +133,7 @@
   pointer-events: none;
   user-select: none;
   cursor: pointer;
-  left: 2rem;
+  left: 0;
   position: sticky;
   top: calc(100vh - 40px);
   width: 2.8rem;
@@ -151,7 +151,7 @@
   }
 
   @include media-breakpoint-up(xl) {
-    left: 4rem;
+    left: 0;
   }
 
   &:hover {

src/components/Views/Edit.tsx

@@ -235,7 +235,6 @@ export const EditView = (props: Props) => {
         <Title>{pageTitle()}</Title>
         <form>
           <div class="wide-container">
-            <AutoSaveNotice active={saving()} />
             <button
               class={clsx(styles.scrollTopButton, {
                 [styles.visible]: isScrolled()
@@ -246,6 +245,8 @@ export const EditView = (props: Props) => {
               <span class={styles.scrollTopButtonLabel}>{t('Scroll up')}</span>
             </button>
 
+            <AutoSaveNotice active={saving()} />
+
             <div class="row">
               <div class="col-md-19 col-lg-18 col-xl-16 offset-md-5">
                 <Show when={page().route === 'edit'}>