fixed treeViews again to make room for hover buttons properly. fixed copying text from pdf to highlight copied regions without always displaying anchor.

4 files changed, 21 insertions, 11 deletions

diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss
index 3785b7d61..273b08247 100644
--- a/src/client/views/collections/CollectionTreeView.scss
+++ b/src/client/views/collections/CollectionTreeView.scss
@@ -67,7 +67,8 @@
     font-style: italic;
     font-size: 8pt;
     margin-left: 3px;
-    display: none;
+    opacity: 0;
+    pointer-events: none;
 }
 
 .collectionTreeView-contents {
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 0ff89c5a7..1a265af4a 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -115,7 +115,7 @@ export class CollectionTreeView extends CollectionSubView<Partial<collectionTree
             const titleHeight = !this._titleRef ? this.marginTop() : Number(getComputedStyle(this._titleRef).height.replace('px', ''));
             const bodyHeight = Array.from(this.refList).reduce((p, r) => p + Number(getComputedStyle(r).height.replace('px', '')), this.marginBot()) + 6;
             this.layoutDoc._autoHeightMargins = bodyHeight;
-            this.props.setHeight?.(bodyHeight + titleHeight);
+            !this.props.dontRegisterView && this.props.setHeight?.(bodyHeight + titleHeight);
         }
     };
     unobserveHeight = (ref: any) => {
diff --git a/src/client/views/collections/TreeView.scss b/src/client/views/collections/TreeView.scss
index 83fee013a..7eab03e1d 100644
--- a/src/client/views/collections/TreeView.scss
+++ b/src/client/views/collections/TreeView.scss
@@ -173,7 +173,8 @@
 
 .treeView-header:hover {
     .collectionTreeView-keyHeader {
-        display: inherit;
+        opacity: unset;
+        pointer-events: unset;
     }
 
     .treeView-openRight {
diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx
index ac8562d5a..13cf64558 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -416,7 +416,6 @@ export class TreeView extends React.Component<TreeViewProps> {
             })()
         );
     };
-
     @computed get expandedField() {
         const ids: { [key: string]: string } = {};
         const rows: JSX.Element[] = [];
@@ -428,6 +427,8 @@ export class TreeView extends React.Component<TreeViewProps> {
             const contents = doc[key];
             let contentElement: (JSX.Element | null)[] | JSX.Element = [];
 
+            let leftOffset = observable({ width: 0 });
+            const expandedWidth = () => this.props.panelWidth() - leftOffset.width;
             if (contents instanceof Doc || (Cast(contents, listSpec(Doc)) && Cast(contents, listSpec(Doc))!.length && Cast(contents, listSpec(Doc))![0] instanceof Doc)) {
                 const remDoc = (doc: Doc | Doc[]) => this.remove(doc, key);
                 const localAdd = (doc: Doc, addBefore?: Doc, before?: boolean) => {
@@ -452,7 +453,7 @@ export class TreeView extends React.Component<TreeViewProps> {
                     this.titleStyleProvider,
                     this.props.ScreenToLocalTransform,
                     this.props.isContentActive,
-                    this.props.panelWidth,
+                    expandedWidth,
                     this.props.renderDepth,
                     this.props.treeViewHideHeaderFields,
                     [...this.props.renderedIds, doc[Id]],
@@ -483,15 +484,21 @@ export class TreeView extends React.Component<TreeViewProps> {
                 );
             }
             rows.push(
-                <div style={{ display: 'flex' }} key={key}>
-                    <span style={{ fontWeight: 'bold' }}>{key + ':'}</span>
-                    &nbsp;
+                <div style={{ display: 'flex', overflow: 'auto' }} key={key}>
+                    <span
+                        ref={action((r: any) => {
+                            if (r) leftOffset.width = r.getBoundingClientRect().width;
+                        })}
+                        style={{ fontWeight: 'bold' }}>
+                        {key + ':'}
+                        &nbsp;
+                    </span>
                     {contentElement}
                 </div>
             );
         }
         rows.push(
-            <div style={{ display: 'flex' }} key={'newKeyValue'}>
+            <div style={{ display: 'flex', overflow: 'auto' }} key={'newKeyValue'}>
                 <EditableView
                     key="editableView"
                     contents={'+key:value'}
@@ -692,6 +699,7 @@ export class TreeView extends React.Component<TreeViewProps> {
         this.treeViewOpen = true;
     };
 
+    @observable headerEleWidth = 0;
     @computed get headerElements() {
         return this.props.treeViewHideHeaderFields() || this.doc.treeViewHideHeaderFields ? null : (
             <>
@@ -822,7 +830,7 @@ export class TreeView extends React.Component<TreeViewProps> {
         }
         return false;
     };
-    titleWidth = () => Math.max(20, Math.min(this.props.treeView.truncateTitleWidth(), this.props.panelWidth())) / (this.props.treeView.props.NativeDimScaling?.() || 1) - 3 * treeBulletWidth();
+    titleWidth = () => Math.max(20, Math.min(this.props.treeView.truncateTitleWidth(), this.props.panelWidth())) / (this.props.treeView.props.NativeDimScaling?.() || 1) - this.headerEleWidth - treeBulletWidth();
 
     return18 = () => 18;
     /**
@@ -923,7 +931,7 @@ export class TreeView extends React.Component<TreeViewProps> {
                     }}>
                     {view}
                 </div>
-                <div className="treeView-rightButtons">
+                <div className="treeView-rightButtons" ref={action((r: any) => r && (this.headerEleWidth = r.getBoundingClientRect().width))}>
                     {buttons} {/* hide and lock buttons */}
                     {this.headerElements}
                 </div>