fixed sizing of text box annotations sidebar button. cleaned up TagsView to not overlap button bar below doc decorations or bottom resize handle

11 files changed, 98 insertions, 56 deletions

diff --git a/src/client/views/AntimodeMenu.tsx b/src/client/views/AntimodeMenu.tsx
index 99dee6410..b5e56cad5 100644
--- a/src/client/views/AntimodeMenu.tsx
+++ b/src/client/views/AntimodeMenu.tsx
@@ -4,6 +4,7 @@ import { SnappingManager } from '../util/SnappingManager';
 import './AntimodeMenu.scss';
 import { ObservableReactComponent } from './ObservableReactComponent';
 
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export interface AntimodeMenuProps {}
 
 /**
@@ -162,6 +163,7 @@ export abstract class AntimodeMenu<T extends AntimodeMenuProps> extends Observab
                     transitionDuration: this._transitionDuration,
                     transitionDelay: this._transitionDelay,
                     position: this.Pinned ? 'unset' : undefined,
+                    border: `${SnappingManager.userColor} solid 1px`,
                 }}>
                 {buttons}
             </div>
diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index 732c2645e..28cebe23c 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -41,6 +41,7 @@ $resizeHandler: 8px;
     .documentDecorations-tagsView {
         position: absolute;
         height: 100%;
+        width: 100%;
         pointer-events: all;
         border-radius: 50%;
         color: black;
@@ -327,7 +328,7 @@ $resizeHandler: 8px;
     .documentDecorations-rightResizer {
         pointer-events: auto;
         background: global.$medium-gray-dim;
-        //opacity: 0.2;
+        opacity: 0.2;
         &:hover {
             opacity: 1;
         }
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 875eb45e0..452dd60ee 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -49,7 +49,7 @@ export class DocumentDecorations extends ObservableReactComponent<DocumentDecora
     static Instance: DocumentDecorations;
     private _resizeHdlId = '';
     private _keyinput = React.createRef<HTMLInputElement>();
-    private _resizeBorderWidth = 16;
+    private _resizeBorderWidth = 8;
     private _linkBoxHeight = 20 + 3; // link button height + margin
     private _titleHeight = 20;
     private _resizeUndo?: UndoManager.Batch;
@@ -98,11 +98,11 @@ export class DocumentDecorations extends ObservableReactComponent<DocumentDecora
         const bounds = { ...this.Bounds };
         const leftBounds = this._props.boundsLeft;
         const topBounds = DocumentView.LightboxDoc() ? 0 : this._props.boundsTop;
-        bounds.x = Math.max(leftBounds, bounds.x - this._resizeBorderWidth / 2) + this._resizeBorderWidth / 2;
-        bounds.y = Math.max(topBounds, bounds.y - this._resizeBorderWidth / 2 - this._titleHeight) + this._resizeBorderWidth / 2 + this._titleHeight;
+        bounds.x = Math.max(leftBounds, bounds.x - this._resizeBorderWidth) + this._resizeBorderWidth;
+        bounds.y = Math.max(topBounds, bounds.y - this._resizeBorderWidth - this._titleHeight) + this._resizeBorderWidth + this._titleHeight;
         const borderRadiusDraggerWidth = 15;
-        bounds.r = Math.max(bounds.x, Math.max(leftBounds, Math.min(window.innerWidth, bounds.r + borderRadiusDraggerWidth + this._resizeBorderWidth / 2) - this._resizeBorderWidth / 2 - borderRadiusDraggerWidth));
-        bounds.b = Math.max(bounds.y, Math.max(topBounds, Math.min(window.innerHeight, bounds.b + this._resizeBorderWidth / 2 + this._linkBoxHeight) - this._resizeBorderWidth / 2 - this._linkBoxHeight));
+        bounds.r = Math.max(bounds.x, Math.max(leftBounds, Math.min(window.innerWidth, bounds.r + borderRadiusDraggerWidth + this._resizeBorderWidth) - this._resizeBorderWidth - borderRadiusDraggerWidth));
+        bounds.b = Math.max(bounds.y, Math.max(topBounds, Math.min(window.innerHeight, bounds.b + this._resizeBorderWidth + this._linkBoxHeight) - this._resizeBorderWidth - this._linkBoxHeight));
         return bounds;
     }
 
@@ -790,10 +790,10 @@ export class DocumentDecorations extends ObservableReactComponent<DocumentDecora
                 <div
                     className="documentDecorations-background"
                     style={{
-                        width: bounds.r - bounds.x + this._resizeBorderWidth + 'px',
-                        height: bounds.b - bounds.y + this._resizeBorderWidth + 'px',
-                        left: bounds.x - this._resizeBorderWidth / 2,
-                        top: bounds.y - this._resizeBorderWidth / 2,
+                        width: bounds.r - bounds.x + 2 * this._resizeBorderWidth + 'px',
+                        height: bounds.b - bounds.y + 2 * this._resizeBorderWidth + 'px',
+                        left: bounds.x - this._resizeBorderWidth,
+                        top: bounds.y - this._resizeBorderWidth,
                         transformOrigin,
                         background: SnappingManager.ShiftKey ? undefined : 'yellow',
                         pointerEvents: SnappingManager.ShiftKey || SnappingManager.IsResizing ? 'none' : 'all',
@@ -807,10 +807,10 @@ export class DocumentDecorations extends ObservableReactComponent<DocumentDecora
                         <div
                             className={`documentDecorations-container  ${this._showNothing ? 'showNothing' : ''}`}
                             style={{
-                                transform: `translate(${bounds.x - this._resizeBorderWidth / 2}px, ${bounds.y - this._resizeBorderWidth / 2 - this._titleHeight}px) rotate(${rotation}deg)`,
+                                transform: `translate(${bounds.x - this._resizeBorderWidth}px, ${bounds.y - this._resizeBorderWidth - this._titleHeight}px) rotate(${rotation}deg)`,
                                 transformOrigin,
-                                width: bounds.r - bounds.x + this._resizeBorderWidth + 'px',
-                                height: bounds.b - bounds.y + this._resizeBorderWidth + (this._showNothing ? 0 : this._titleHeight) + 'px',
+                                width: bounds.r - bounds.x + 2 * this._resizeBorderWidth + 'px',
+                                height: bounds.b - bounds.y + 2 * this._resizeBorderWidth + (this._showNothing ? 0 : this._titleHeight) + 'px',
                             }}>
                             <div
                                 className="documentDecorations-topbar"
@@ -834,7 +834,7 @@ export class DocumentDecorations extends ObservableReactComponent<DocumentDecora
                                     <div key="c" className="documentDecorations-centerCont" />
                                     <div key="r" className="documentDecorations-rightResizer" onPointerDown={this.onPointerDown} />
                                     <div key="bl" className="documentDecorations-bottomLeftResizer" onPointerDown={this.onPointerDown} />
-                                    {(seldocview.TagPanelHeight ?? 0) > 30 ? null : <div key="b" className="documentDecorations-bottomResizer" onPointerDown={this.onPointerDown} />}
+                                    {seldocview.TagPanelHeight !== 0 || seldocview.TagPanelEditing ? null : <div key="b" className="documentDecorations-bottomResizer" onPointerDown={this.onPointerDown} />}
                                     <div key="br" className="documentDecorations-bottomRightResizer" onPointerDown={this.onPointerDown} />
                                 </>
                             )}
@@ -850,12 +850,12 @@ export class DocumentDecorations extends ObservableReactComponent<DocumentDecora
                                 />
                             )}
 
-                            {hideDocumentButtonBar || this._showNothing ? null : (
+                            {seldocview.TagPanelEditing || hideDocumentButtonBar || this._showNothing ? null : (
                                 <div
                                     className="link-button-container"
                                     style={{
-                                        top: DocumentView.Selected().length > 1 ? 0 : `${seldocview.showTags ? 4 + seldocview.TagPanelHeight : 4}px`,
-                                        transform: `translate(${-this._resizeBorderWidth / 2 + 10}px, ${this._resizeBorderWidth + bounds.b - bounds.y + this._titleHeight}px) `,
+                                        top: DocumentView.Selected().length > 1 || !seldocview.showTags ? 0 : `${seldocview.TagPanelHeight}px`,
+                                        transform: `translate(${-this._resizeBorderWidth + 10}px, ${(seldocview.TagPanelHeight === 0 ? 2 * this._resizeBorderWidth : this._resizeBorderWidth) + bounds.b - bounds.y + this._titleHeight}px) `,
                                     }}>
                                     <DocumentButtonBar views={() => DocumentView.Selected()} />
                                 </div>
@@ -864,7 +864,7 @@ export class DocumentDecorations extends ObservableReactComponent<DocumentDecora
                                 className="documentDecorations-tagsView"
                                 style={{
                                     top: 30, // offset by height of documentButtonBar so that items can be clicked without overlap interference
-                                    transform: `translate(${-this._resizeBorderWidth / 2 + 10}px, ${this._resizeBorderWidth + bounds.b - bounds.y + this._titleHeight}px) `,
+                                    transform: `translate(${-this._resizeBorderWidth + 10}px, ${2 * this._resizeBorderWidth + bounds.b - bounds.y + this._titleHeight}px) `,
                                 }}>
                                 {DocumentView.Selected().length > 1 ? <TagsView Views={DocumentView.Selected()} background={SnappingManager.userBackgroundColor ?? ''} /> : null}
                             </div>
diff --git a/src/client/views/SidebarAnnos.scss b/src/client/views/SidebarAnnos.scss
index d7de2b641..abfd04f11 100644
--- a/src/client/views/SidebarAnnos.scss
+++ b/src/client/views/SidebarAnnos.scss
@@ -1,3 +1,13 @@
+.sidebarAnnos-container {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    right: 0;
+    .sidebarAnnos-stacking {
+        width: 100%;
+        position: relative;
+    }
+}
 .sidebarAnnos-tagList {
     display: flex;
     flex-direction: row;
diff --git a/src/client/views/SidebarAnnos.tsx b/src/client/views/SidebarAnnos.tsx
index 3c0611f03..b7e6318b1 100644
--- a/src/client/views/SidebarAnnos.tsx
+++ b/src/client/views/SidebarAnnos.tsx
@@ -213,14 +213,11 @@ export class SidebarAnnos extends ObservableReactComponent<FieldViewProps & Extr
         // TODO: Calculation of the topbar is hardcoded and different for text nodes - it should all be the same and all be part of SidebarAnnos
         return !this._props.showSidebar ? null : (
             <div
+                className="sidebarAnnos-container"
                 style={{
-                    position: 'absolute',
                     pointerEvents: this._props.isContentActive() ? 'all' : undefined,
                     top: this._props.Doc.type !== DocumentType.RTF && StrCast(this._props.Doc._layout_showTitle) === 'title' ? 15 : 0,
-                    right: 0,
                     background: this._props.styleProvider?.(this._props.Doc, this._props, StyleProp.WidgetColor) as string,
-                    width: `100%`,
-                    height: '100%',
                 }}>
                 <div className="sidebarAnnos-tagList" style={{ height: this.filtersHeight() }} onWheel={e => e.stopPropagation()}>
                     {this.allUsers.length > 1 ? this.allUsers.map(renderUsers) : null}
@@ -228,7 +225,7 @@ export class SidebarAnnos extends ObservableReactComponent<FieldViewProps & Extr
                     {Array.from(this.allMetadata.keys()).sort().map(renderMeta)}
                 </div>
 
-                <div style={{ width: '100%', height: `calc(100% - 38px)`, position: 'relative' }}>
+                <div className="sidebarAnnos-stacking" style={{ height: `calc(100% - ${this.filtersHeight()}px)` }}>
                     <CollectionStackingView
                         {...this._props}
                         setContentViewBox={emptyFunction}
diff --git a/src/client/views/TagsView.scss b/src/client/views/TagsView.scss
index 231d5e11a..d58b55ab5 100644
--- a/src/client/views/TagsView.scss
+++ b/src/client/views/TagsView.scss
@@ -2,13 +2,12 @@
     display: flex;
     flex-wrap: wrap;
     flex-direction: column;
-    border: 1px solid;
-    border-radius: 4px;
     width: 100%;
     position: relative;
     .tagsView-content {
         width: 100%;
         height: inherit;
+        position: absolute;
         .tagsView-list {
             display: flex;
             flex-wrap: wrap;
diff --git a/src/client/views/TagsView.tsx b/src/client/views/TagsView.tsx
index 39c952483..79c4d8af1 100644
--- a/src/client/views/TagsView.tsx
+++ b/src/client/views/TagsView.tsx
@@ -267,7 +267,6 @@ export class TagsView extends ObservableReactComponent<TagViewProps> {
         super(props);
         makeObservable(this);
     }
-    InsetDist = 25; // how far tag panel is moved up to overlap DocumentView.
 
     @observable _panelHeightDirty = 0;
     @observable _currentInput = '';
@@ -298,8 +297,8 @@ export class TagsView extends ObservableReactComponent<TagViewProps> {
 
     @computed get isEditing() {
         const selected = DocumentView.Selected().length === 1 && DocumentView.Selected().includes(this.View);
-        if (this._isEditing === undefined) return selected && !StrListCast(this.View.dataDoc.tags).length && !StrListCast(this.View.dataDoc[Doc.LayoutFieldKey(this.View.Document) + '_audioAnnotations_text']).length;
-        return this._isEditing && (this._props.Views.length > 1 || selected);
+        if (this._isEditing === undefined) return selected && this.View.TagPanelEditing; // && !StrListCast(this.View.dataDoc.tags).length && !StrListCast(this.View.dataDoc[Doc.LayoutFieldKey(this.View.Document) + '_audioAnnotations_text']).length;
+        return this._isEditing && (this._props.Views.length > 1 || (selected && this.View.TagPanelEditing));
     }
 
     /**
@@ -309,7 +308,10 @@ export class TagsView extends ObservableReactComponent<TagViewProps> {
     @action
     setToEditing = (editing = true) => {
         this._isEditing = editing;
-        editing && this._props.Views.length === 1 && this.View.select(false);
+        if (this._props.Views.length === 1) {
+            this.View.TagPanelEditing = editing;
+            editing && this.View.select(false);
+        }
     };
 
     /**
@@ -350,7 +352,16 @@ export class TagsView extends ObservableReactComponent<TagViewProps> {
         return this.View.ComponentView?.isUnstyledView?.() || (!this.View.showTags && this._props.Views.length === 1) ? null : (
             <div
                 className="tagsView-container"
-                ref={r => r && new ResizeObserver(action(() => this._props.Views.length === 1 && (this.View.TagPanelHeight = Math.max(0, (r?.getBoundingClientRect().height ?? 0) - this.InsetDist)))).observe(r)}
+                ref={r =>
+                    r &&
+                    new ResizeObserver(
+                        action(() => {
+                            if (this._props.Views.length === 1) {
+                                this.View.TagPanelHeight = Math.floor(r?.children[0].children[0].getBoundingClientRect().height ?? 0) - Math.floor(r?.children[0].children[0].children[0].getBoundingClientRect().height ?? 0);
+                            }
+                        })
+                    ).observe(r?.children[0])
+                }
                 style={{
                     display: SnappingManager.IsResizing === this.View.Document[Id] ? 'none' : undefined,
                     backgroundColor: this.isEditing ? this._props.background : Colors.TRANSPARENT,
diff --git a/src/client/views/global/globalCssVariables.module.scss b/src/client/views/global/globalCssVariables.module.scss
index ad0c5c21d..82f6caa52 100644
--- a/src/client/views/global/globalCssVariables.module.scss
+++ b/src/client/views/global/globalCssVariables.module.scss
@@ -4,7 +4,7 @@ $white: #ffffff;
 $off-white: #fdfdfd;
 $light-gray: #dfdfdf;
 $medium-gray: #9f9f9f;
-$medium-gray-dim: #9f9f9f30;
+$medium-gray-dim: #9f9f9f;
 $dark-gray: #323232;
 $black: #000000;
 
diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss
index dd5fd0d0c..f60f33608 100644
--- a/src/client/views/nodes/DocumentView.scss
+++ b/src/client/views/nodes/DocumentView.scss
@@ -273,7 +273,9 @@
 
 .documentView-noAIWidgets {
     transform-origin: top left;
-    position: relative;
+    position: absolute;
+    bottom: 0;
+    pointer-events: none;
 }
 
 .documentView-editorView-history {
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 37f888ddd..4cf60d356 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -748,7 +748,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewProps & Field
                         style={{
                             width: `${100 / this.uiBtnScaling}%`, //
                             transform: `scale(${this.uiBtnScaling})`,
-                            bottom: Number.isNaN(this.maxWidgetSize) ? undefined : this.maxWidgetSize,
+                            height: Number.isNaN(this.maxWidgetSize) ? undefined : this.TagsBtnHeight * this.uiBtnScaling,
                         }}>
                         {this._props.DocumentView?.() && !this._props.docViewPath().slice(-2)[0].ComponentView?.isUnstyledView?.() ? <TagsView background={this.backgroundBoxColor} Views={[this._props.DocumentView?.()]} /> : null}
                     </div>
@@ -1163,6 +1163,7 @@ export class DocumentView extends DocComponent<DocumentViewProps>() {
     @observable private _selected = false;
     @observable public static CurrentlyPlaying: DocumentView[] = []; // audio or video media views that are currently playing
     @observable public TagPanelHeight = 0;
+    @observable public TagPanelEditing = false;
 
     @computed get showTags() {
         return this.Document._layout_showTags || this._props.showTags;
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index f7e6d8e1e..d90be007f 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -154,11 +154,11 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
 
     // eslint-disable-next-line no-return-assign
     @computed get config()                     { return FormattedTextBox.MakeConfig(this._rules = new RichTextRules(this.Document, this), this); } // prettier-ignore
-    @computed get recordingDictation()        { return this.dataDoc?.mediaState === mediaState.Recording; } // prettier-ignore
-    @computed get SidebarShown()               {  return !!(this._showSidebar || this.layoutDoc._layout_showSidebar);  } // prettier-ignore
+    @computed get recordingDictation()         { return this.dataDoc?.mediaState === mediaState.Recording; } // prettier-ignore
+    @computed get SidebarShown()               { return !!(this._showSidebar || this.layoutDoc._layout_showSidebar);  } // prettier-ignore
     @computed get allSidebarDocs()             { return DocListCast(this.dataDoc[this.sidebarKey]); } // prettier-ignore
     @computed get noSidebar()                  { return this.DocumentView?.()._props.hideDecorationTitle || this._props.noSidebar || this.Document._layout_noSidebar; } // prettier-ignore
-    @computed get layout_sidebarWidthPercent() { return this._showSidebar ? '20%' : StrCast(this.layoutDoc._layout_sidebarWidthPercent, '0%'); } // prettier-ignore
+    @computed get sidebarWidthPercent() { return StrCast(this.layoutDoc._layout_sidebarWidthPercent, this._showSidebar ? '20%' :'0%'); } // prettier-ignore
     @computed get sidebarColor()               { return StrCast(this.layoutDoc.sidebar_color, StrCast(this.layoutDoc[this.fieldKey + '_backgroundColor'], '#e4e4e4')); } // prettier-ignore
     @computed get layout_autoHeight()          { return (this._props.forceAutoHeight || this.layoutDoc._layout_autoHeight) && !this._props.ignoreAutoHeight; } // prettier-ignore
     @computed get textHeight()                 { return NumCast(this.dataDoc[this.fieldKey + '_height']); } // prettier-ignore
@@ -743,15 +743,21 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
     @action
     toggleSidebar = (preview: boolean = false) => {
         const defaultSidebar = 250;
-        const prevWidth = 1 - this.sidebarWidth() / DivWidth(this._ref.current!);
+        const dw = DivWidth(this._ref.current);
+        const prevWidth = 1 - this.sidebarWidth() / dw / this.nativeScaling();
         if (preview) this._showSidebar = true;
         else {
-            this.layoutDoc[this.sidebarKey + '_freeform_scale_max'] = 1;
-            this.layoutDoc._layout_showSidebar =
-                (this.layoutDoc._layout_sidebarWidthPercent = StrCast(this.layoutDoc._layout_sidebarWidthPercent, '0%') === '0%' ? `${(defaultSidebar / (NumCast(this.layoutDoc._width) + defaultSidebar)) * 100}%` : '0%') !== '0%';
+            this.layoutDoc._layout_sidebarWidthPercent =
+                this.sidebarWidthPercent === '0%' //
+                    ? `${(defaultSidebar / (NumCast(this.layoutDoc._width) + defaultSidebar)) * 100}%` //
+                    : '0%';
+            this.layoutDoc._layout_showSidebar = this.sidebarWidthPercent !== '0%';
         }
 
-        this.layoutDoc._width = !preview && this.SidebarShown ? NumCast(this.layoutDoc._width) + defaultSidebar : Math.max(20, NumCast(this.layoutDoc._width) * prevWidth);
+        this.layoutDoc._width =
+            !preview && this.SidebarShown //
+                ? NumCast(this.layoutDoc._width) + defaultSidebar
+                : Math.max(20, NumCast(this.layoutDoc._width) * prevWidth);
     };
     sidebarDown = (e: React.PointerEvent) => {
         const batch = UndoManager.StartBatch('toggle sidebar');
@@ -769,7 +775,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
     };
     sidebarMove = (e: PointerEvent, down: number[], delta: number[]) => {
         const localDelta = this.DocumentView?.().screenToViewTransform().transformDirection(delta[0], delta[1]) ?? delta;
-        const sidebarWidth = (NumCast(this.layoutDoc._width) * Number(this.layout_sidebarWidthPercent.replace('%', ''))) / 100;
+        const sidebarWidth = (NumCast(this.layoutDoc._width) * Number(this.sidebarWidthPercent.replace('%', ''))) / 100;
         const width = NumCast(this.layoutDoc._width) + localDelta[0];
         this.layoutDoc._layout_sidebarWidthPercent = Math.max(0, (sidebarWidth + localDelta[0]) / width) * 100 + '%';
         this.layoutDoc.width = width;
@@ -1223,7 +1229,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
     }
 
     @computed get contentScaling() {
-        return Doc.NativeAspect(this.Document, this.dataDoc, false) ? this._props.NativeDimScaling?.() || 1 : 1;
+        return Doc.NativeAspect(this.Document, this.dataDoc, false) ? this.nativeScaling() : 1;
     }
     componentDidMount() {
         !this._props.dontSelectOnLoad && this._props.setContentViewBox?.(this); // this tells the DocumentView that this AudioBox is the "content" of the document.  this allows the DocumentView to indirectly call getAnchor() on the AudioBox when making a link.
@@ -1891,7 +1897,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
         }
     };
     fitContentsToBox = () => BoolCast(this.Document._freeform_fitContentsToBox);
-    sidebarContentScaling = () => (this._props.NativeDimScaling?.() || 1) * NumCast(this.layoutDoc._freeform_scale, 1);
+    nativeScaling = () => this._props.NativeDimScaling?.() || 1;
     sidebarAddDocument = (doc: Doc | Doc[], sidebarKey: string = this.sidebarKey) => {
         if (!this.layoutDoc._layout_showSidebar) this.toggleSidebar();
         return this.addDocument(doc, sidebarKey);
@@ -1901,12 +1907,12 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
     setSidebarHeight = (height: number) => {
         this.dataDoc[this.sidebarKey + '_height'] = height;
     };
-    sidebarWidth = () => (Number(this.layout_sidebarWidthPercent.substring(0, this.layout_sidebarWidthPercent.length - 1)) / 100) * this._props.PanelWidth();
+    sidebarWidth = () => (Number(this.sidebarWidthPercent.substring(0, this.sidebarWidthPercent.length - 1)) / 100) * this._props.PanelWidth();
     sidebarScreenToLocal = () =>
         this._props
             .ScreenToLocalTransform()
-            .translate(-(this._props.PanelWidth() - this.sidebarWidth()) / (this._props.NativeDimScaling?.() || 1), 0)
-            .scale(1 / NumCast(this.layoutDoc._freeform_scale, 1) / (this._props.NativeDimScaling?.() || 1));
+            .translate(-(this._props.PanelWidth() - this.sidebarWidth()) / this.nativeScaling(), 0)
+            .scale(1 / this.nativeScaling());
 
     @computed get audioHandle() {
         return !this.recordingDictation ? null : (
@@ -1927,6 +1933,20 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
             </div>
         );
     }
+    private _sideBtnWidth = 35;
+    /**
+     * How much the content of the view is being scaled based on its nesting and its fit-to-width settings
+     */
+    @computed get viewScaling() { return this.ScreenToLocalBoxXf().Scale ; } // prettier-ignore
+    /**
+     * The maximum size a UI widget can be scaled so that it won't be bigger in screen pixels than its normal 35 pixel size.
+     */
+    @computed get maxWidgetSize() { return Math.min(this._sideBtnWidth, 0.2 * this._props.PanelWidth())*this.viewScaling; } // prettier-ignore
+    /**
+     * How much to reactively scale a UI element so that it is as big as it can be (up to its normal 35pixel size) without being too big for the Doc content
+     */
+    @computed get uiBtnScaling() { return this.maxWidgetSize / this._sideBtnWidth; } // prettier-ignore
+
     @computed get sidebarHandle() {
         TraceMobx();
         const annotated = DocListCast(this.dataDoc[this.sidebarKey]).filter(d => d?.author).length;
@@ -1941,7 +1961,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
                     backgroundColor,
                     color,
                     opacity: annotated ? 1 : undefined,
-                    transform: `scale(${this._props.DocumentView?.().UIBtnScaling ?? 1})`,
+                    transform: `scale(${this.uiBtnScaling})`,
                 }}>
                 <FontAwesomeIcon icon="comment-alt" />
             </div>
@@ -1986,7 +2006,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
                         isAnnotationOverlay={false}
                         select={emptyFunction}
                         isAnyChildContentActive={returnFalse}
-                        NativeDimScaling={this.sidebarContentScaling}
+                        NativeDimScaling={this.nativeScaling}
                         whenChildContentsActiveChanged={this.whenChildContentsActiveChanged}
                         removeDocument={this.sidebarRemDocument}
                         moveDocument={this.sidebarMoveDocument}
@@ -2003,7 +2023,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
             );
         };
         return (
-            <div className={'formattedTextBox-sidebar' + (Doc.ActiveTool !== InkTool.None ? '-inking' : '')} style={{ width: `${this.layout_sidebarWidthPercent}`, backgroundColor: `${this.sidebarColor}` }}>
+            <div className={'formattedTextBox-sidebar' + (Doc.ActiveTool !== InkTool.None ? '-inking' : '')} style={{ width: `${this.sidebarWidthPercent}`, backgroundColor: `${this.sidebarColor}` }}>
                 {renderComponent(StrCast(this.layoutDoc[this.sidebarKey + '_type_collection']))}
             </div>
         );
@@ -2061,7 +2081,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
 
         // if scrollTop is 0, then don't let wheel trigger scroll on any container (which it would since onScroll won't be triggered on this)
         if (this._props.isContentActive()) {
-            const scale = this._props.NativeDimScaling?.() || 1;
+            const scale = this.nativeScaling();
             const styleFromLayout = styleFromLayoutString(this.Document, this._props, scale); // this converts any expressions in the format string to style props.  e.g., <FormattedTextBox height='{this._header_height}px' >
             const height = Number(styleFromLayout.height?.replace('px', ''));
             // prevent default if selected || child is active  but this doc isn't scrollable
@@ -2078,8 +2098,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
 
     render() {
         TraceMobx();
-        const scale = this._props.NativeDimScaling?.() || 1;
-        const rounded = StrCast(this.layoutDoc.layout_borderRounding) === '100%' ? '-rounded' : '';
+        const scale = this.nativeScaling();
+        const rounded = StrCast(this.layoutDoc._layout_borderRounding) === '100%' ? '-rounded' : '';
         setTimeout(() => !this._props.isContentActive() && FormattedTextBoxComment.textBox === this && FormattedTextBoxComment.Hide);
 
         const scrSize = (which: number, view = this._props.docViewPath().slice(-which)[0]) => 
@@ -2107,7 +2127,6 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
                               height: `${100 / scale}%`,
                           }),
                     transition: 'inherit',
-                    paddingBottom: this.tagsHeight,
                     // overflowY: this.layoutDoc._layout_autoHeight ? "hidden" : undefined,
                     color: this.fontColor,
                     fontSize: this.fontSize,
@@ -2140,7 +2159,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
                             this._scrollRef = r;
                         }}
                         style={{
-                            width: this.noSidebar ? '100%' : `calc(100% - ${this.layout_sidebarWidthPercent})`,
+                            width: this.noSidebar ? '100%' : `calc(100% - ${this.sidebarWidthPercent})`,
                             overflow: this.layoutDoc._createDocOnCR || this.layoutDoc._layout_hideScroll ? 'hidden' : this.layout_autoHeight ? 'visible' : undefined,
                         }}
                         onScroll={this.onScroll}
@@ -2160,7 +2179,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
                             }}
                         />
                     </div>
-                    {this.noSidebar || !this.SidebarShown || this.layout_sidebarWidthPercent === '0%' ? null : this.sidebarCollection}
+                    {this.noSidebar || !this.SidebarShown || this.sidebarWidthPercent === '0%' ? null : this.sidebarCollection}
                     {this.noSidebar || this.Document._layout_noSidebar || this.Document._createDocOnCR || this.layoutDoc._chromeHidden || this.Document.quiz ? null : this.sidebarHandle}
                     {this.audioHandle}
                     {this.layoutDoc._layout_enableAltContentUI && !this.layoutDoc._chromeHidden ? this.overlayAlternateIcon : null}