made formatttedtextbox annotation handle work the same as pdf/web. prevent header from hiding annotation button handle. fixed resizing text boxes.

7 files changed, 510 insertions, 160 deletions

diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 964fd36c8..4d38a8194 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -521,7 +521,7 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
                             } else doc._height = actualdH;
                         }
                     } else {
-                        const maxHeight = Math.max(nheight, NumCast(doc.scrollHeight)) * docView.NativeDimScaling();
+                        const maxHeight = Math.max(nheight, NumCast(doc.scrollHeight, NumCast(doc[docView.LayoutFieldKey + '-scrollHeight']))) * docView.NativeDimScaling();
                         dH && (doc._height = actualdH > maxHeight ? maxHeight : actualdH);
                         dW && (doc._width = actualdW);
                         dH && (doc._autoHeight = false);
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 6bf0c365a..7032abba2 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -1229,6 +1229,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
                 style={{
                     position: this.headerMargin ? 'relative' : 'absolute',
                     height: this.titleHeight,
+                    width: this.isContentActive() ? `calc(100% - 18px)` : '100%', // leave room for annotation button
                     color: lightOrDark(background),
                     background,
                     pointerEvents: this.onClickHandler || this.Document.ignoreClick ? 'none' : this.isContentActive() || this.props.isDocumentActive?.() ? 'all' : undefined,
diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index e9ed594d3..abd64908f 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -7,7 +7,6 @@ import { Doc, DocListCast, Opt, WidthSym } from '../../../../fields/Doc';
 import { Id } from '../../../../fields/FieldSymbols';
 import { InkTool } from '../../../../fields/InkField';
 import { NumCast, StrCast } from '../../../../fields/Types';
-import { TraceMobx } from '../../../../fields/util';
 import { emptyFunction, OmitKeys, returnFalse, returnOne, setupMoveUpEvents, Utils } from '../../../../Utils';
 import { Docs } from '../../../documents/Documents';
 import { DragManager } from '../../../util/DragManager';
@@ -20,7 +19,6 @@ import { MarqueeAnnotator } from '../../MarqueeAnnotator';
 import { AnchorMenu } from '../../pdf/AnchorMenu';
 import { Annotation } from '../../pdf/Annotation';
 import { SidebarAnnos } from '../../SidebarAnnos';
-import { StyleProp } from '../../StyleProvider';
 import { FieldView, FieldViewProps } from '../FieldView';
 import './MapBox.scss';
 import { MapBoxInfoWindow } from './MapBoxInfoWindow';
@@ -453,21 +451,18 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
      * Handles toggle of sidebar on click the little comment button
      */
     @computed get sidebarHandle() {
-        TraceMobx();
-        const annotated = DocListCast(this.dataDoc[this.SidebarKey]).filter(d => d?.author).length;
-        const color = !annotated ? Colors.WHITE : Colors.BLACK;
-        const backgroundColor = !annotated ? (this.sidebarWidth() ? Colors.MEDIUM_BLUE : Colors.BLACK) : this.props.styleProvider?.(this.rootDoc, this.props as any, StyleProp.WidgetColor + (annotated ? ':annotated' : ''));
-        return !annotated ? null : (
+        return (
             <div
-                className="formattedTextBox-sidebar-handle"
-                onPointerDown={this.sidebarDown}
+                className="mapBox-overlayButton-sidebar"
+                key="sidebar"
+                title="Toggle Sidebar"
                 style={{
-                    left: `max(0px, calc(100% - ${this.sidebarWidthPercent} - 17px))`,
-                    backgroundColor: backgroundColor,
-                    color: color,
-                    opacity: annotated ? 1 : undefined,
-                }}>
-                <FontAwesomeIcon icon={'comment-alt'} />
+                    display: !this.props.isContentActive() ? 'none' : undefined,
+                    top: StrCast(this.rootDoc._showTitle) === 'title' ? 20 : 5,
+                    backgroundColor: this.SidebarShown ? Colors.MEDIUM_BLUE : Colors.BLACK,
+                }}
+                onPointerDown={this.sidebarBtnDown}>
+                <FontAwesomeIcon style={{ color: Colors.WHITE }} icon={'comment-alt'} size="sm" />
             </div>
         );
     }
@@ -665,18 +660,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                         removeDocument={this.sidebarRemoveDocument}
                     />
                 </div>
-                <div
-                    className="mapBox-overlayButton-sidebar"
-                    key="sidebar"
-                    title="Toggle Sidebar"
-                    style={{
-                        display: !this.props.isContentActive() ? 'none' : undefined,
-                        top: StrCast(this.rootDoc._showTitle) === 'title' ? 20 : 5,
-                        backgroundColor: this.SidebarShown ? Colors.MEDIUM_BLUE : Colors.BLACK,
-                    }}
-                    onPointerDown={this.sidebarBtnDown}>
-                    <FontAwesomeIcon style={{ color: Colors.WHITE }} icon={'comment-alt'} size="sm" />
-                </div>
+                {this.sidebarHandle}
             </div>
         );
     }
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index fad22d6e9..42df2ac5d 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -8,7 +8,7 @@ import { Id } from '../../../fields/FieldSymbols';
 import { Cast, ImageCast, NumCast, StrCast } from '../../../fields/Types';
 import { ImageField, PdfField } from '../../../fields/URLField';
 import { TraceMobx } from '../../../fields/util';
-import { emptyFunction, returnOne, setupMoveUpEvents, Utils } from '../../../Utils';
+import { emptyFunction, setupMoveUpEvents, Utils } from '../../../Utils';
 import { Docs, DocUtils } from '../../documents/Documents';
 import { DocumentType } from '../../documents/DocumentTypes';
 import { KeyCodes } from '../../util/KeyCodes';
@@ -23,8 +23,8 @@ import { PDFViewer } from '../pdf/PDFViewer';
 import { SidebarAnnos } from '../SidebarAnnos';
 import { FieldView, FieldViewProps } from './FieldView';
 import { ImageBox } from './ImageBox';
-import { VideoBox } from './VideoBox';
 import './PDFBox.scss';
+import { VideoBox } from './VideoBox';
 import React = require('react');
 
 @observer
@@ -390,18 +390,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                     />
                     {this._pageControls ? pageBtns : null}
                 </div>
-                <div
-                    className="pdfBox-sidebarBtn"
-                    key="sidebar"
-                    title="Toggle Sidebar"
-                    style={{
-                        display: !this.props.isContentActive() ? 'none' : undefined,
-                        top: StrCast(this.rootDoc._showTitle) === 'title' ? 20 : 5,
-                        backgroundColor: this.SidebarShown ? Colors.MEDIUM_BLUE : Colors.BLACK,
-                    }}
-                    onPointerDown={e => this.sidebarBtnDown(e, true)}>
-                    <FontAwesomeIcon style={{ color: Colors.WHITE }} icon={'comment-alt'} size="sm" />
-                </div>
+                {this.sidebarHandle}
             </div>
         );
     }
@@ -432,6 +421,22 @@ export class PDFBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     @computed get SidebarShown() {
         return this._showSidebar || this.layoutDoc._showSidebar ? true : false;
     }
+    @computed get sidebarHandle() {
+        return (
+            <div
+                className="pdfBox-sidebarBtn"
+                key="sidebar"
+                title="Toggle Sidebar"
+                style={{
+                    display: !this.props.isContentActive() ? 'none' : undefined,
+                    top: StrCast(this.rootDoc._showTitle) === 'title' ? 20 : 5,
+                    backgroundColor: this.SidebarShown ? Colors.MEDIUM_BLUE : Colors.BLACK,
+                }}
+                onPointerDown={e => this.sidebarBtnDown(e, true)}>
+                <FontAwesomeIcon style={{ color: Colors.WHITE }} icon={'comment-alt'} size="sm" />
+            </div>
+        );
+    }
 
     isPdfContentActive = () => this.isAnyChildContentActive() || this.props.isSelected();
     @computed get renderPdfView() {
diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx
index 71d6959a3..55228c19f 100644
--- a/src/client/views/nodes/WebBox.tsx
+++ b/src/client/views/nodes/WebBox.tsx
@@ -741,6 +741,22 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
             }
         );
     };
+    @computed get sidebarHandle() {
+        return (
+            <div
+                className="webBox-overlayButton-sidebar"
+                key="sidebar"
+                title="Toggle Sidebar"
+                style={{
+                    display: !this.props.isContentActive() ? 'none' : undefined,
+                    top: StrCast(this.rootDoc._showTitle) === 'title' ? 20 : 5,
+                    backgroundColor: this.SidebarShown ? Colors.MEDIUM_BLUE : Colors.BLACK,
+                }}
+                onPointerDown={e => this.sidebarBtnDown(e, true)}>
+                <FontAwesomeIcon style={{ color: Colors.WHITE }} icon={'comment-alt'} size="sm" />
+            </div>
+        );
+    }
     @observable _previewNativeWidth: Opt<number> = undefined;
     @observable _previewWidth: Opt<number> = undefined;
     toggleSidebar = action((preview: boolean = false) => {
@@ -955,18 +971,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                     moveDocument={this.moveDocument}
                     removeDocument={this.removeDocument}
                 />
-                <div
-                    className="webBox-overlayButton-sidebar"
-                    key="sidebar"
-                    title="Toggle Sidebar"
-                    style={{
-                        display: !this.props.isContentActive() ? 'none' : undefined,
-                        top: StrCast(this.rootDoc._showTitle) === 'title' ? 20 : 5,
-                        backgroundColor: this.SidebarShown ? Colors.MEDIUM_BLUE : Colors.BLACK,
-                    }}
-                    onPointerDown={e => this.sidebarBtnDown(e, true)}>
-                    <FontAwesomeIcon style={{ color: Colors.WHITE }} icon={'comment-alt'} size="sm" />
-                </div>
+                {this.sidebarHandle}
                 {!this.props.isContentActive() ? null : this.searchUI}
             </div>
         );
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.scss b/src/client/views/nodes/formattedText/FormattedTextBox.scss
index 27817f317..d3d8c47c0 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.scss
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.scss
@@ -1,4 +1,4 @@
-@import "../../global/globalCssVariables";
+@import '../../global/globalCssVariables';
 
 .ProseMirror {
     width: 100%;
@@ -11,13 +11,13 @@
 }
 
 audiotag {
-    left: 0; 
-    position: absolute; 
-    cursor: pointer; 
-    border-radius: 10px; 
-    width: 10px; 
-    margin-top: -2px; 
-    font-size: 4px; 
+    left: 0;
+    position: absolute;
+    cursor: pointer;
+    border-radius: 10px;
+    width: 10px;
+    margin-top: -2px;
+    font-size: 4px;
     background: lightblue;
 }
 audiotag:hover {
@@ -63,12 +63,11 @@ audiotag:hover {
 .formattedTextBox-outer-selected {
     cursor: text;
 }
-    
+
 .formattedTextBox-sidebar-handle {
     position: absolute;
     top: 0;
-    left: 17px;
-    //top: calc(50% - 17.5px);  // use this to center vertically -- make sure it looks okay for slide views
+    right: 0;
     width: 17px;
     height: 17px;
     font-size: 11px;
@@ -79,15 +78,14 @@ audiotag:hover {
     display: flex;
     justify-content: center;
     align-items: center;
-    cursor:grabbing;
+    cursor: grabbing;
     box-shadow: $standard-box-shadow;
     // transition: 0.2s;
     opacity: 0.3;
-    &:hover{
+    &:hover {
         opacity: 1 !important;
         filter: brightness(0.85);
     }
-
 }
 
 .formattedTextBox-sidebar,
@@ -117,14 +115,15 @@ audiotag:hover {
     left: 10%;
 }
 
-.formattedTextBox-inner-rounded, .formattedTextBox-inner-rounded-selected,
-.formattedTextBox-inner, 
+.formattedTextBox-inner-rounded,
+.formattedTextBox-inner-rounded-selected,
+.formattedTextBox-inner,
 .formattedTextBox-inner-minimal,
 .formattedTextBox-inner-selected {
     height: 100%;
     white-space: pre-wrap;
     .ProseMirror:hover {
-        background: rgba(200,200,200,0.2);
+        background: rgba(200, 200, 200, 0.2);
     }
     hr {
         display: block;
@@ -141,7 +140,7 @@ audiotag:hover {
 .formattedTextBox-inner-rounded-selected,
 .formattedTextBox-inner-selected {
     > .ProseMirror {
-        padding:10px;
+        padding: 10px;
     }
 }
 .formattedTextBox-outer-selected {
@@ -236,18 +235,17 @@ footnote::after {
     position: absolute;
     top: -5px;
     left: 27px;
-    content: " ";
+    content: ' ';
     height: 0;
     width: 0;
 }
 
-
 .formattedTextBox-inlineComment {
     position: relative;
     width: 40px;
     height: 20px;
     &::before {
-        content: "→";
+        content: '→';
     }
     &:hover {
         background: orange;
@@ -260,7 +258,7 @@ footnote::after {
     width: 40px;
     height: 20px;
     &::after {
-        content: "←";
+        content: '←';
     }
 }
 
@@ -270,21 +268,21 @@ footnote::after {
     width: 40px;
     height: 20px;
     &::after {
-        content: "...";
+        content: '...';
     }
 }
 
 .prosemirror-anchor {
-    overflow:hidden;
-    display:inline-grid;
+    overflow: hidden;
+    display: inline-grid;
 }
 .prosemirror-linkBtn {
-    background:unset;
-    color:unset;
-    padding:0;
+    background: unset;
+    color: unset;
+    padding: 0;
     text-transform: unset;
     letter-spacing: unset;
-    font-size:unset;
+    font-size: unset;
 }
 .prosemirror-links {
     display: none;
@@ -294,28 +292,28 @@ footnote::after {
     z-index: 1;
     padding: 5;
     border-radius: 2px;
-  }
-  .prosemirror-hrefoptions{
-      width:0px;
-      border:unset;
-      padding:0px;
-  }
-
-  .prosemirror-links a {
+}
+.prosemirror-hrefoptions {
+    width: 0px;
+    border: unset;
+    padding: 0px;
+}
+
+.prosemirror-links a {
     float: left;
     color: white;
     text-decoration: none;
     border-radius: 3px;
-  }
+}
 
-  .prosemirror-links a:hover {
+.prosemirror-links a:hover {
     background-color: #eee;
     color: black;
-  }
+}
 
-  .prosemirror-anchor:hover .prosemirror-links {
+.prosemirror-anchor:hover .prosemirror-links {
     display: grid;
-  }
+}
 
 .ProseMirror {
     padding: 0px;
@@ -334,7 +332,8 @@ footnote::after {
         border-left: solid 2px dimgray;
     }
 
-    ol, ul {
+    ol,
+    ul {
         counter-reset: deci1 0 multi1 0;
         padding-left: 1em;
         font-family: inherit;
@@ -342,42 +341,231 @@ footnote::after {
     ol {
         font-family: inherit;
     }
-    .bullet {  p { font-family: inherit} margin-left: 0; }
-    .bullet1 { p { font-family: inherit} }
-    .bullet2,.bullet3,.bullet4,.bullet5,.bullet6 { p { font-family: inherit} font-size: smaller; }
+    .bullet {
+        p {
+            font-family: inherit;
+        }
+        margin-left: 0;
+    }
+    .bullet1 {
+        p {
+            font-family: inherit;
+        }
+    }
+    .bullet2,
+    .bullet3,
+    .bullet4,
+    .bullet5,
+    .bullet6 {
+        p {
+            font-family: inherit;
+        }
+        font-size: smaller;
+    }
 
-    .decimal1-ol { counter-reset: deci1; p {display: inline-block; font-family: inherit} margin-left: 0; }
-    .decimal2-ol { counter-reset: deci2; p {display: inline-block; font-family: inherit} font-size: smaller; padding-left: 2.1em;}
-    .decimal3-ol { counter-reset: deci3; p {display: inline-block; font-family: inherit} font-size: smaller; padding-left: 2.85em;}
-    .decimal4-ol { counter-reset: deci4; p {display: inline-block; font-family: inherit} font-size: smaller; padding-left: 3.85em;}
-    .decimal5-ol { counter-reset: deci5; p {display: inline-block; font-family: inherit} font-size: smaller; }
-    .decimal6-ol { counter-reset: deci6; p {display: inline-block; font-family: inherit} font-size: smaller; }
-    .decimal7-ol { counter-reset: deci7; p {display: inline-block; font-family: inherit} font-size: smaller; }
+    .decimal1-ol {
+        counter-reset: deci1;
+        p {
+            display: inline-block;
+            font-family: inherit;
+        }
+        margin-left: 0;
+    }
+    .decimal2-ol {
+        counter-reset: deci2;
+        p {
+            display: inline-block;
+            font-family: inherit;
+        }
+        font-size: smaller;
+        padding-left: 2.1em;
+    }
+    .decimal3-ol {
+        counter-reset: deci3;
+        p {
+            display: inline-block;
+            font-family: inherit;
+        }
+        font-size: smaller;
+        padding-left: 2.85em;
+    }
+    .decimal4-ol {
+        counter-reset: deci4;
+        p {
+            display: inline-block;
+            font-family: inherit;
+        }
+        font-size: smaller;
+        padding-left: 3.85em;
+    }
+    .decimal5-ol {
+        counter-reset: deci5;
+        p {
+            display: inline-block;
+            font-family: inherit;
+        }
+        font-size: smaller;
+    }
+    .decimal6-ol {
+        counter-reset: deci6;
+        p {
+            display: inline-block;
+            font-family: inherit;
+        }
+        font-size: smaller;
+    }
+    .decimal7-ol {
+        counter-reset: deci7;
+        p {
+            display: inline-block;
+            font-family: inherit;
+        }
+        font-size: smaller;
+    }
 
-    .multi1-ol { counter-reset: multi1; p {display: inline-block; font-family: inherit} margin-left: 0;     padding-left: 1.2em }
-    .multi2-ol { counter-reset: multi2; p {display: inline-block; font-family: inherit} font-size: smaller; padding-left: 2em;}
-    .multi3-ol { counter-reset: multi3; p {display: inline-block; font-family: inherit} font-size: smaller; padding-left: 2.85em;}
-    .multi4-ol { counter-reset: multi4; p {display: inline-block; font-family: inherit} font-size: smaller; padding-left: 3.85em;}
+    .multi1-ol {
+        counter-reset: multi1;
+        p {
+            display: inline-block;
+            font-family: inherit;
+        }
+        margin-left: 0;
+        padding-left: 1.2em;
+    }
+    .multi2-ol {
+        counter-reset: multi2;
+        p {
+            display: inline-block;
+            font-family: inherit;
+        }
+        font-size: smaller;
+        padding-left: 2em;
+    }
+    .multi3-ol {
+        counter-reset: multi3;
+        p {
+            display: inline-block;
+            font-family: inherit;
+        }
+        font-size: smaller;
+        padding-left: 2.85em;
+    }
+    .multi4-ol {
+        counter-reset: multi4;
+        p {
+            display: inline-block;
+            font-family: inherit;
+        }
+        font-size: smaller;
+        padding-left: 3.85em;
+    }
 
     //.bullet:before, .bullet1:before, .bullet2:before, .bullet3:before, .bullet4:before, .bullet5:before { transition: 0.5s; display: inline-block; vertical-align: top; margin-left: -1em; width: 1em; content:" " }
 
-    .decimal1:before { transition: 0.5s;counter-increment: deci1; display: inline-block; vertical-align: top; margin-left: -1em;   width:  1em;   content: counter(deci1) ". ";  }
-    .decimal2:before { transition: 0.5s;counter-increment: deci2; display: inline-block; vertical-align: top; margin-left: -2.1em; width: 2.1em;  content: counter(deci1) "."counter(deci2) ". ";  }
-    .decimal3:before { transition: 0.5s;counter-increment: deci3; display: inline-block; vertical-align: top; margin-left: -2.85em;width: 2.85em; content: counter(deci1) "."counter(deci2) "."counter(deci3) ". "; }
-    .decimal4:before { transition: 0.5s;counter-increment: deci4; display: inline-block; vertical-align: top; margin-left: -3.85em;width: 3.85em; content: counter(deci1) "."counter(deci2) "."counter(deci3) "."counter(deci4) ". "; }
-    .decimal5:before { transition: 0.5s;counter-increment: deci5; display: inline-block; vertical-align: top; margin-left: -2em;   width:  5em;   content: counter(deci1) "."counter(deci2) "."counter(deci3) "."counter(deci4) "."counter(deci5) ". "; }
-    .decimal6:before { transition: 0.5s;counter-increment: deci6; display: inline-block; vertical-align: top; margin-left: -2em;   width:  6em;   content: counter(deci1) "."counter(deci2) "."counter(deci3) "."counter(deci4) "."counter(deci5) "."counter(deci6) ". "; }
-    .decimal7:before { transition: 0.5s;counter-increment: deci7; display: inline-block; vertical-align: top; margin-left: -2em;   width:  7em;   content: counter(deci1) "."counter(deci2) "."counter(deci3) "."counter(deci4) "."counter(deci5) "."counter(deci6) "."counter(deci7) ". "; }
+    .decimal1:before {
+        transition: 0.5s;
+        counter-increment: deci1;
+        display: inline-block;
+        vertical-align: top;
+        margin-left: -1em;
+        width: 1em;
+        content: counter(deci1) '. ';
+    }
+    .decimal2:before {
+        transition: 0.5s;
+        counter-increment: deci2;
+        display: inline-block;
+        vertical-align: top;
+        margin-left: -2.1em;
+        width: 2.1em;
+        content: counter(deci1) '.' counter(deci2) '. ';
+    }
+    .decimal3:before {
+        transition: 0.5s;
+        counter-increment: deci3;
+        display: inline-block;
+        vertical-align: top;
+        margin-left: -2.85em;
+        width: 2.85em;
+        content: counter(deci1) '.' counter(deci2) '.' counter(deci3) '. ';
+    }
+    .decimal4:before {
+        transition: 0.5s;
+        counter-increment: deci4;
+        display: inline-block;
+        vertical-align: top;
+        margin-left: -3.85em;
+        width: 3.85em;
+        content: counter(deci1) '.' counter(deci2) '.' counter(deci3) '.' counter(deci4) '. ';
+    }
+    .decimal5:before {
+        transition: 0.5s;
+        counter-increment: deci5;
+        display: inline-block;
+        vertical-align: top;
+        margin-left: -2em;
+        width: 5em;
+        content: counter(deci1) '.' counter(deci2) '.' counter(deci3) '.' counter(deci4) '.' counter(deci5) '. ';
+    }
+    .decimal6:before {
+        transition: 0.5s;
+        counter-increment: deci6;
+        display: inline-block;
+        vertical-align: top;
+        margin-left: -2em;
+        width: 6em;
+        content: counter(deci1) '.' counter(deci2) '.' counter(deci3) '.' counter(deci4) '.' counter(deci5) '.' counter(deci6) '. ';
+    }
+    .decimal7:before {
+        transition: 0.5s;
+        counter-increment: deci7;
+        display: inline-block;
+        vertical-align: top;
+        margin-left: -2em;
+        width: 7em;
+        content: counter(deci1) '.' counter(deci2) '.' counter(deci3) '.' counter(deci4) '.' counter(deci5) '.' counter(deci6) '.' counter(deci7) '. ';
+    }
 
-    .multi1:before { transition: 0.5s;counter-increment: multi1; display: inline-block; vertical-align: top; margin-left: -1.3em;  width: 1.2em;  content: counter(multi1, upper-alpha) ". ";  }
-    .multi2:before { transition: 0.5s;counter-increment: multi2; display: inline-block; vertical-align: top; margin-left: -2em;    width:   2em;  content: counter(multi1, upper-alpha) "."counter(multi2, decimal) ". "; }
-    .multi3:before { transition: 0.5s;counter-increment: multi3; display: inline-block; vertical-align: top; margin-left: -2.85em; width:2.85em;  content: counter(multi1, upper-alpha) "."counter(multi2, decimal) "."counter(multi3, lower-alpha) ". "; }
-    .multi4:before { transition: 0.5s;counter-increment: multi4; display: inline-block; vertical-align: top; margin-left: -4.2em;  width: 4.2em;    content: counter(multi1, upper-alpha) "."counter(multi2, decimal) "."counter(multi3, lower-alpha) "."counter(multi4, lower-roman) ". "; }
+    .multi1:before {
+        transition: 0.5s;
+        counter-increment: multi1;
+        display: inline-block;
+        vertical-align: top;
+        margin-left: -1.3em;
+        width: 1.2em;
+        content: counter(multi1, upper-alpha) '. ';
+    }
+    .multi2:before {
+        transition: 0.5s;
+        counter-increment: multi2;
+        display: inline-block;
+        vertical-align: top;
+        margin-left: -2em;
+        width: 2em;
+        content: counter(multi1, upper-alpha) '.' counter(multi2, decimal) '. ';
+    }
+    .multi3:before {
+        transition: 0.5s;
+        counter-increment: multi3;
+        display: inline-block;
+        vertical-align: top;
+        margin-left: -2.85em;
+        width: 2.85em;
+        content: counter(multi1, upper-alpha) '.' counter(multi2, decimal) '.' counter(multi3, lower-alpha) '. ';
+    }
+    .multi4:before {
+        transition: 0.5s;
+        counter-increment: multi4;
+        display: inline-block;
+        vertical-align: top;
+        margin-left: -4.2em;
+        width: 4.2em;
+        content: counter(multi1, upper-alpha) '.' counter(multi2, decimal) '.' counter(multi3, lower-alpha) '.' counter(multi4, lower-roman) '. ';
+    }
 }
 
-
 @media only screen and (max-width: 1000px) {
-    @import "../../global/globalCssVariables";
+    @import '../../global/globalCssVariables';
 
     .ProseMirror {
         width: 100%;
@@ -425,7 +613,7 @@ footnote::after {
         width: 100%;
         height: 100%;
     }
-    
+
     .formattedTextBox-sidebar-handle {
         position: absolute;
         background: lightgray;
@@ -562,18 +750,17 @@ footnote::after {
         position: absolute;
         top: -5px;
         left: 27px;
-        content: " ";
+        content: ' ';
         height: 0;
         width: 0;
     }
 
-
     .formattedTextBox-inlineComment {
         position: relative;
         width: 40px;
         height: 20px;
         &::before {
-            content: "→";
+            content: '→';
         }
         &:hover {
             background: orange;
@@ -586,7 +773,7 @@ footnote::after {
         width: 40px;
         height: 20px;
         &::after {
-            content: "←";
+            content: '←';
         }
     }
 
@@ -596,7 +783,7 @@ footnote::after {
         width: 40px;
         height: 20px;
         &::after {
-            content: "...";
+            content: '...';
         }
     }
 
@@ -606,7 +793,8 @@ footnote::after {
             font-family: inherit;
         }
 
-        ol, ul {
+        ol,
+        ul {
             counter-reset: deci1 0 multi1 0;
             padding-left: 1em;
             font-family: inherit;
@@ -616,30 +804,191 @@ footnote::after {
             font-family: inherit;
         }
 
-        .decimal1-ol { counter-reset: deci1; p {display: inline; font-family: inherit} margin-left: 0; }
-        .decimal2-ol { counter-reset: deci2; p {display: inline; font-family: inherit} font-size: smaller; padding-left: 1em;}
-        .decimal3-ol { counter-reset: deci3; p {display: inline; font-family: inherit} font-size: smaller; padding-left: 2em;}
-        .decimal4-ol { counter-reset: deci4; p {display: inline; font-family: inherit} font-size: smaller; padding-left: 3em;}
-        .decimal5-ol { counter-reset: deci5; p {display: inline; font-family: inherit} font-size: smaller; }
-        .decimal6-ol { counter-reset: deci6; p {display: inline; font-family: inherit} font-size: smaller; }
-        .decimal7-ol { counter-reset: deci7; p {display: inline; font-family: inherit} font-size: smaller; }
-
-        .multi1-ol { counter-reset: multi1; p {display: inline; font-family: inherit} margin-left: 0;     padding-left: 1.2em }
-        .multi2-ol { counter-reset: multi2; p {display: inline; font-family: inherit} font-size: smaller; padding-left: 1.4em;}
-        .multi3-ol { counter-reset: multi3; p {display: inline; font-family: inherit} font-size: smaller; padding-left: 2em;}
-        .multi4-ol { counter-reset: multi4; p {display: inline; font-family: inherit} font-size: smaller; padding-left: 3.4em;}
-
-        .decimal1:before { transition: 0.5s;counter-increment: deci1; display: inline-block; margin-left: -1em;   width:  1em;   content: counter(deci1) ". ";  }
-        .decimal2:before { transition: 0.5s;counter-increment: deci2; display: inline-block; margin-left: -2.1em; width: 2.1em;  content: counter(deci1) "."counter(deci2) ". ";  }
-        .decimal3:before { transition: 0.5s;counter-increment: deci3; display: inline-block; margin-left: -2.85em;width: 2.85em; content: counter(deci1) "."counter(deci2) "."counter(deci3) ". "; }
-        .decimal4:before { transition: 0.5s;counter-increment: deci4; display: inline-block; margin-left: -3.85em;width: 3.85em; content: counter(deci1) "."counter(deci2) "."counter(deci3) "."counter(deci4) ". "; }
-        .decimal5:before { transition: 0.5s;counter-increment: deci5; display: inline-block; margin-left: -2em;   width:  5em;   content: counter(deci1) "."counter(deci2) "."counter(deci3) "."counter(deci4) "."counter(deci5) ". "; }
-        .decimal6:before { transition: 0.5s;counter-increment: deci6; display: inline-block; margin-left: -2em;   width:  6em;   content: counter(deci1) "."counter(deci2) "."counter(deci3) "."counter(deci4) "."counter(deci5) "."counter(deci6) ". "; }
-        .decimal7:before { transition: 0.5s;counter-increment: deci7; display: inline-block; margin-left: -2em;   width:  7em;   content: counter(deci1) "."counter(deci2) "."counter(deci3) "."counter(deci4) "."counter(deci5) "."counter(deci6) "."counter(deci7) ". "; }
-
-        .multi1:before { transition: 0.5s;counter-increment: multi1; display: inline-block; margin-left: -1em;    width: 1.2em;  content: counter(multi1, upper-alpha) ". ";  }
-        .multi2:before { transition: 0.5s;counter-increment: multi2; display: inline-block; margin-left: -2em;    width:   2em;  content: counter(multi1, upper-alpha) "."counter(multi2, decimal) ". "; }
-        .multi3:before { transition: 0.5s;counter-increment: multi3; display: inline-block; margin-left: -2.85em; width:2.85em;  content: counter(multi1, upper-alpha) "."counter(multi2, decimal) "."counter(multi3, lower-alpha) ". "; }
-        .multi4:before { transition: 0.5s;counter-increment: multi4; display: inline-block; margin-left:   -4.2em;  width: 4.2em;    content: counter(multi1, upper-alpha) "."counter(multi2, decimal) "."counter(multi3, lower-alpha) "."counter(multi4, lower-roman) ". "; }
+        .decimal1-ol {
+            counter-reset: deci1;
+            p {
+                display: inline;
+                font-family: inherit;
+            }
+            margin-left: 0;
+        }
+        .decimal2-ol {
+            counter-reset: deci2;
+            p {
+                display: inline;
+                font-family: inherit;
+            }
+            font-size: smaller;
+            padding-left: 1em;
+        }
+        .decimal3-ol {
+            counter-reset: deci3;
+            p {
+                display: inline;
+                font-family: inherit;
+            }
+            font-size: smaller;
+            padding-left: 2em;
+        }
+        .decimal4-ol {
+            counter-reset: deci4;
+            p {
+                display: inline;
+                font-family: inherit;
+            }
+            font-size: smaller;
+            padding-left: 3em;
+        }
+        .decimal5-ol {
+            counter-reset: deci5;
+            p {
+                display: inline;
+                font-family: inherit;
+            }
+            font-size: smaller;
+        }
+        .decimal6-ol {
+            counter-reset: deci6;
+            p {
+                display: inline;
+                font-family: inherit;
+            }
+            font-size: smaller;
+        }
+        .decimal7-ol {
+            counter-reset: deci7;
+            p {
+                display: inline;
+                font-family: inherit;
+            }
+            font-size: smaller;
+        }
+
+        .multi1-ol {
+            counter-reset: multi1;
+            p {
+                display: inline;
+                font-family: inherit;
+            }
+            margin-left: 0;
+            padding-left: 1.2em;
+        }
+        .multi2-ol {
+            counter-reset: multi2;
+            p {
+                display: inline;
+                font-family: inherit;
+            }
+            font-size: smaller;
+            padding-left: 1.4em;
+        }
+        .multi3-ol {
+            counter-reset: multi3;
+            p {
+                display: inline;
+                font-family: inherit;
+            }
+            font-size: smaller;
+            padding-left: 2em;
+        }
+        .multi4-ol {
+            counter-reset: multi4;
+            p {
+                display: inline;
+                font-family: inherit;
+            }
+            font-size: smaller;
+            padding-left: 3.4em;
+        }
+
+        .decimal1:before {
+            transition: 0.5s;
+            counter-increment: deci1;
+            display: inline-block;
+            margin-left: -1em;
+            width: 1em;
+            content: counter(deci1) '. ';
+        }
+        .decimal2:before {
+            transition: 0.5s;
+            counter-increment: deci2;
+            display: inline-block;
+            margin-left: -2.1em;
+            width: 2.1em;
+            content: counter(deci1) '.' counter(deci2) '. ';
+        }
+        .decimal3:before {
+            transition: 0.5s;
+            counter-increment: deci3;
+            display: inline-block;
+            margin-left: -2.85em;
+            width: 2.85em;
+            content: counter(deci1) '.' counter(deci2) '.' counter(deci3) '. ';
+        }
+        .decimal4:before {
+            transition: 0.5s;
+            counter-increment: deci4;
+            display: inline-block;
+            margin-left: -3.85em;
+            width: 3.85em;
+            content: counter(deci1) '.' counter(deci2) '.' counter(deci3) '.' counter(deci4) '. ';
+        }
+        .decimal5:before {
+            transition: 0.5s;
+            counter-increment: deci5;
+            display: inline-block;
+            margin-left: -2em;
+            width: 5em;
+            content: counter(deci1) '.' counter(deci2) '.' counter(deci3) '.' counter(deci4) '.' counter(deci5) '. ';
+        }
+        .decimal6:before {
+            transition: 0.5s;
+            counter-increment: deci6;
+            display: inline-block;
+            margin-left: -2em;
+            width: 6em;
+            content: counter(deci1) '.' counter(deci2) '.' counter(deci3) '.' counter(deci4) '.' counter(deci5) '.' counter(deci6) '. ';
+        }
+        .decimal7:before {
+            transition: 0.5s;
+            counter-increment: deci7;
+            display: inline-block;
+            margin-left: -2em;
+            width: 7em;
+            content: counter(deci1) '.' counter(deci2) '.' counter(deci3) '.' counter(deci4) '.' counter(deci5) '.' counter(deci6) '.' counter(deci7) '. ';
+        }
+
+        .multi1:before {
+            transition: 0.5s;
+            counter-increment: multi1;
+            display: inline-block;
+            margin-left: -1em;
+            width: 1.2em;
+            content: counter(multi1, upper-alpha) '. ';
+        }
+        .multi2:before {
+            transition: 0.5s;
+            counter-increment: multi2;
+            display: inline-block;
+            margin-left: -2em;
+            width: 2em;
+            content: counter(multi1, upper-alpha) '.' counter(multi2, decimal) '. ';
+        }
+        .multi3:before {
+            transition: 0.5s;
+            counter-increment: multi3;
+            display: inline-block;
+            margin-left: -2.85em;
+            width: 2.85em;
+            content: counter(multi1, upper-alpha) '.' counter(multi2, decimal) '.' counter(multi3, lower-alpha) '. ';
+        }
+        .multi4:before {
+            transition: 0.5s;
+            counter-increment: multi4;
+            display: inline-block;
+            margin-left: -4.2em;
+            width: 4.2em;
+            content: counter(multi1, upper-alpha) '.' counter(multi2, decimal) '.' counter(multi3, lower-alpha) '.' counter(multi4, lower-roman) '. ';
+        }
     }
 }
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index e9b048c5e..ead086aca 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -11,7 +11,7 @@ import { Fragment, Mark, Node, Slice } from 'prosemirror-model';
 import { EditorState, NodeSelection, Plugin, TextSelection, Transaction } from 'prosemirror-state';
 import { EditorView } from 'prosemirror-view';
 import { DateField } from '../../../../fields/DateField';
-import { AclAdmin, AclAugment, AclEdit, AclSelfEdit, DataSym, Doc, DocListCast, DocListCastAsync, Field, ForceServerWrite, HeightSym, Opt, UpdatingFromServer, WidthSym } from '../../../../fields/Doc';
+import { AclAdmin, AclAugment, AclEdit, AclReadonly, AclSelfEdit, DataSym, Doc, DocListCast, DocListCastAsync, Field, ForceServerWrite, HeightSym, Opt, UpdatingFromServer, WidthSym } from '../../../../fields/Doc';
 import { Id } from '../../../../fields/FieldSymbols';
 import { InkTool } from '../../../../fields/InkField';
 import { PrefetchProxy } from '../../../../fields/Proxy';
@@ -61,6 +61,7 @@ import { schema } from './schema_rts';
 import { SummaryView } from './SummaryView';
 import applyDevTools = require('prosemirror-dev-tools');
 import React = require('react');
+import { text } from 'body-parser';
 const translateGoogleApi = require('translate-google-api');
 
 export interface FormattedTextBoxProps {
@@ -654,8 +655,14 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
         );
     };
     sidebarMove = (e: PointerEvent, down: number[], delta: number[]) => {
-        const bounds = this._ref.current!.getBoundingClientRect();
-        this.layoutDoc._sidebarWidthPercent = '' + 100 * Math.max(0, 1 - (e.clientX - bounds.left) / bounds.width) + '%';
+        const localDelta = this.props
+            .ScreenToLocalTransform()
+            .scale(this.props.NativeDimScaling?.() || 1)
+            .transformDirection(delta[0], delta[1]);
+        const sidebarWidth = (NumCast(this.layoutDoc._width) * Number(this.sidebarWidthPercent.replace('%', ''))) / 100;
+        const width = this.layoutDoc[WidthSym]() + localDelta[0];
+        this.layoutDoc._sidebarWidthPercent = Math.max(0, (sidebarWidth + localDelta[0]) / width) * 100 + '%';
+        this.layoutDoc.width = width;
         this.layoutDoc._showSidebar = this.layoutDoc._sidebarWidthPercent !== '0%';
         e.preventDefault();
         return false;
@@ -1726,7 +1733,6 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
                 className="formattedTextBox-sidebar-handle"
                 onPointerDown={this.sidebarDown}
                 style={{
-                    left: `max(0px, calc(100% - ${this.sidebarWidthPercent} - 17px))`,
                     backgroundColor: backgroundColor,
                     color: color,
                     opacity: annotated ? 1 : undefined,