From 205fdacf9807be2691e13e1d9d04d6b98620391a Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Wed, 15 Jan 2025 13:03:59 -0500
Subject: fixed so that users are sentt to dropbox to authorized uploads once,
 and then a refresh token is used afterwards.  fixed up some collection views
 to work better with the tagsView.  fixed grid view to show entire image. 
 tweaked notetaking view to work better with tags, but it's incomplete.

---
 src/client/views/collections/CollectionStackingView.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

(limited to 'src/client/views/collections/CollectionStackingView.tsx')

diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index 1ac0b6d70..a57256424 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -146,7 +146,17 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
             // assuming we need to get rowSpan because we might be dealing with many columns. Grid gap makes sense if multiple columns
             const rowSpan = Math.ceil((this.getDocHeight(d)() + this.gridGap) / this.gridGap);
             // just getting the style
-            const style = this.isStackingView ? { margin: undefined, transition: this.getDocTransition(d)(), width: this.columnWidth, marginTop: i ? this.gridGap : 0, height: this.getDocHeight(d)() } : { gridRowEnd: `span ${rowSpan}` };
+            const style = this.isStackingView
+                ? {
+                      //
+                      margin: undefined,
+                      transition: this.getDocTransition(d)(),
+                      width: this.columnWidth,
+                      marginTop: i ? this.gridGap : 0,
+                      height: this.getDocHeight(d)(),
+                      zIndex: DocumentView.getFirstDocumentView(d)?.IsSelected ? 1000 : 0,
+                  }
+                : { gridRowEnd: `span ${rowSpan}`, zIndex: DocumentView.getFirstDocumentView(d)?.IsSelected ? 1000 : 0 };
             // So we're choosing whether we're going to render a column or a masonry doc
             return (
                 <div className={`collectionStackingView-${this.isStackingView ? 'columnDoc' : 'masonryDoc'}`} key={d[Id]} style={style}>
@@ -344,6 +354,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
                 dontRegisterView={BoolCast(this.layoutDoc.childDontRegisterViews, this._props.dontRegisterView)} // used to be true if DataDoc existed, but template textboxes won't layout_autoHeight resize if dontRegisterView is set, but they need to.
                 rootSelected={this.rootSelected}
                 showTitle={this._props.childlayout_showTitle}
+                showTags={BoolCast(this.layoutDoc.showChildTags) || BoolCast(this.Document._layout_showTags)}
                 dragAction={(this.layoutDoc.childDragAction ?? this._props.childDragAction) as dropActionType}
                 onClickScript={this.onChildClickHandler}
                 onDoubleClickScript={this.onChildDoubleClickHandler}
-- 
cgit v1.2.3-70-g09d2


From cfccfd0639dff68e47862fb8e78d75b0a1b287a1 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Thu, 27 Feb 2025 10:44:09 -0500
Subject: fixed column dragging and yMargin in masonry view. made columns
 always fit width of  masonry

---
 .../views/collections/CollectionStackingView.scss  |  8 ++-
 .../views/collections/CollectionStackingView.tsx   | 68 +++++++++++++---------
 2 files changed, 48 insertions(+), 28 deletions(-)

(limited to 'src/client/views/collections/CollectionStackingView.tsx')

diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss
index 5237bdffb..565536623 100644
--- a/src/client/views/collections/CollectionStackingView.scss
+++ b/src/client/views/collections/CollectionStackingView.scss
@@ -121,11 +121,15 @@
     }
 
     .collectionStackingView-columnDragger {
-        width: 15;
-        height: 15;
+        width: 28;
+        height: 28;
         position: absolute;
         margin-left: -5;
         z-index: 10;
+        > svg {
+            width: 100%;
+            height: 100%;
+        }
     }
 
     // Documents in stacking view
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index a57256424..0a25882ff 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -110,7 +110,9 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
     }
     // columnWidth handles the margin on the left and right side of the documents
     @computed get columnWidth() {
-        return Math.min(this._props.PanelWidth() - 2 * this.xMargin, this.isStackingView ? Number.MAX_VALUE : this.layoutDoc._columnWidth === -1 ? this._props.PanelWidth() - 2 * this.xMargin : NumCast(this.layoutDoc._columnWidth, 250));
+        const availableWidth = this._props.PanelWidth() - 2 * this.xMargin;
+        const cwid = availableWidth / NumCast(this.Document._layout_columnCount, 1);
+        return Math.min(availableWidth, this.isStackingView ? Number.MAX_VALUE : cwid - this.gridGap);
     }
 
     @computed get NodeWidth() {
@@ -221,6 +223,9 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
         return fields;
     }
 
+    setAutoHeight = () => this._props.setHeight?.(this.headerMargin + (this.isStackingView ? Math.max(...this._refList.map(DivHeight)) : 2 * this.yMargin + this._refList.reduce((p, r) => p + DivHeight(r), 0)));
+    observer = new ResizeObserver(this.setAutoHeight);
+
     componentDidMount() {
         super.componentDidMount?.();
         this._props.setContentViewBox?.(this);
@@ -232,10 +237,21 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
                 this.dataDoc['_' + this.fieldKey + '_columnHeaders'] = new List();
             }
         );
+        // reset section headers when a new filter is inputted
+        this._disposers.width = reaction(
+            () => [this._props.PanelWidth() - 2 * this.xMargin, NumCast(this.Document._layout_columnWidth, 250)],
+            ([pw, cw]) => {
+                if (!this.isStackingView) {
+                    this.layoutDoc._layout_columnCount = Math.round(pw / cw);
+                }
+            }
+        );
+
         this._disposers.autoHeight = reaction(
-            () => this.layoutDoc._layout_autoHeight,
-            layoutAutoHeight => layoutAutoHeight && this._props.setHeight?.(this.headerMargin + (this.isStackingView ? Math.max(...this._refList.map(DivHeight)) : this._refList.reduce((p, r) => p + DivHeight(r), 0)))
+            () => [this.layoutDoc._layout_autoHeight, this.yMargin],
+            ([autoH]) => autoH && this.setAutoHeight()
         );
+
         this._disposers.refList = reaction(
             () => ({ refList: this._refList.slice(), autoHeight: this.layoutDoc._layout_autoHeight && !DocumentView.LightboxContains(this.DocumentView?.()) }),
             ({ refList, autoHeight }) => {
@@ -435,8 +451,8 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
         );
     };
     @action
-    onDividerMove = (e: PointerEvent, down: number[], delta: number[]) => {
-        this.layoutDoc._columnWidth = Math.max(10, this.columnWidth + delta[0]);
+    onDividerMove = (e: PointerEvent) => {
+        this.Document._layout_columnWidth = Math.max(10, this.ScreenToLocalBoxXf().transformPoint(e.clientX, 0)[0] - this.xMargin);
         return false;
     };
 
@@ -446,7 +462,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
                 className="collectionStackingView-columnDragger"
                 onPointerDown={this.columnDividerDown}
                 ref={this._draggerRef}
-                style={{ cursor: this._cursor, color: SettingsManager.userColor, left: `${this.columnWidth + this.xMargin}px`, top: `${Math.max(0, this.yMargin - 9)}px` }}>
+                style={{ cursor: this._cursor, color: SettingsManager.userColor, left: `${NumCast(this.Document._layout_columnWidth) + this.xMargin}px` }}>
                 <FontAwesomeIcon icon="arrows-alt-h" />
             </div>
         );
@@ -590,24 +606,26 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
         }
         const rows = () => (!this.isStackingView ? 1 : Math.max(1, Math.min(docList.length, Math.floor((this._props.PanelWidth() - 2 * this.xMargin) / (this.columnWidth + this.gridGap)))));
         return (
-            <CollectionMasonryViewFieldRow
-                showHandle={first}
-                Document={this.Document}
-                chromeHidden={this.chromeHidden}
-                pivotField={this.pivotField}
-                refList={this._refList}
-                key={heading ? heading.heading : ''}
-                rows={rows}
-                headings={this.headings}
-                heading={heading ? heading.heading : ''}
-                headingObject={heading}
-                docList={docList}
-                parent={this}
-                type={type}
-                createDropTarget={this.createDashEventsTarget}
-                screenToLocalTransform={this.ScreenToLocalBoxXf}
-                setDocHeight={this.setDocHeight}
-            />
+            <div style={{ top: this.yMargin }}>
+                <CollectionMasonryViewFieldRow
+                    showHandle={first}
+                    Document={this.Document}
+                    chromeHidden={this.chromeHidden}
+                    pivotField={this.pivotField}
+                    refList={this._refList}
+                    key={heading ? heading.heading : ''}
+                    rows={rows}
+                    headings={this.headings}
+                    heading={heading ? heading.heading : ''}
+                    headingObject={heading}
+                    docList={docList}
+                    parent={this}
+                    type={type}
+                    createDropTarget={this.createDashEventsTarget}
+                    screenToLocalTransform={this.ScreenToLocalBoxXf}
+                    setDocHeight={this.setDocHeight}
+                />
+            </div>
         );
     };
 
@@ -699,8 +717,6 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
         return this._props.isContentActive() === false ? 'none' : undefined;
     }
 
-    observer = new ResizeObserver(() => this._props.setHeight?.(this.headerMargin + (this.isStackingView ? Math.max(...this._refList.map(DivHeight)) : this._refList.reduce((p, r) => p + DivHeight(r), 0))));
-
     onPassiveWheel = (e: WheelEvent) => e.stopPropagation();
     render() {
         TraceMobx();
-- 
cgit v1.2.3-70-g09d2


From bcf3b005d55ec851374049f4c188d96ffc7a7c8b Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Thu, 27 Feb 2025 14:46:20 -0500
Subject: prevent tagsview from appeqring in spreadsheet.  set default fill
 color only if nothing is selected.  place column divider at top of
 stacking/card views.  move card view flashcard view to top left independent
 of margin settings.

---
 .../views/collections/CollectionCardDeckView.tsx   |   5 +-
 .../collections/CollectionMasonryViewFieldRow.tsx  |   1 -
 .../views/collections/CollectionStackingView.scss  | 194 ++++++++++-----------
 .../views/collections/CollectionStackingView.tsx   |  45 ++---
 src/client/views/global/globalScripts.ts           |   2 +-
 src/client/views/nodes/DocumentView.tsx            |   2 +-
 6 files changed, 125 insertions(+), 124 deletions(-)

(limited to 'src/client/views/collections/CollectionStackingView.tsx')

diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx
index 94f85d429..756b37f99 100644
--- a/src/client/views/collections/CollectionCardDeckView.tsx
+++ b/src/client/views/collections/CollectionCardDeckView.tsx
@@ -540,11 +540,10 @@ export class CollectionCardView extends CollectionSubView() {
                             height: `${100 / this.nativeScaling / fitContentScale}%`,
                             width: `${100 / this.nativeScaling / fitContentScale}%`,
                             transform: `scale(${this.nativeScaling * fitContentScale})`,
-                        }}>
-                        {this.flashCardUI(this.curDoc, this.docViewProps, this.answered)}
-                    </div>
+                        }}></div>
                 </div>
 
+                {this.flashCardUI(this.curDoc, this.docViewProps, this.answered)}
                 <div
                     className="collectionCardView-cardSizeDragger"
                     onPointerDown={this.cardSizerDown}
diff --git a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
index 710c00841..a0d5f9f70 100644
--- a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
+++ b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
@@ -258,7 +258,6 @@ export class CollectionMasonryViewFieldRow extends ObservableReactComponent<CMVF
         const stackPad = showChrome ? `0px ${this._props.parent.xMargin}px` : `${this._props.parent.yMargin}px ${this._props.parent.xMargin}px 0px ${this._props.parent.xMargin}px `;
         return this.collapsed ? null : (
             <div style={{ position: 'relative' }}>
-                {this._props.showHandle && this._props.parent._props.isContentActive() ? this._props.parent.columnDragger : null}
                 {showChrome ? (
                     <div
                         className="collectionStackingView-addDocumentButton"
diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss
index 565536623..05ac52ff9 100644
--- a/src/client/views/collections/CollectionStackingView.scss
+++ b/src/client/views/collections/CollectionStackingView.scss
@@ -12,123 +12,123 @@
     position: relative;
     height: 100%;
     width: 100%;
-}
-
-// TODO:glr Turn this into a seperate class
-.documentButtonMenu {
-    position: relative;
-    height: fit-content;
-    border-bottom: global.$standard-border;
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    align-items: center;
-    align-content: center;
-    padding: 5px 0 5px 0;
 
-    .documentExplanation {
-        width: 90%;
-        margin: 5px;
-        font-size: 11px;
-        color: global.$medium-blue;
-        padding: 10px;
-        border-radius: 5px;
-        border: solid 0.5px global.$medium-blue;
+    .collectionStackingView-columnDragger {
+        width: 28;
+        height: 28;
+        position: absolute;
+        margin-left: -5;
+        z-index: 10;
+        > svg {
+            width: 100%;
+            height: 100%;
+        }
     }
-}
 
-.collectionStackingView,
-.collectionMasonryView {
-    height: 100%;
-    width: 100%;
-    position: absolute;
-    top: 0;
-    overflow-y: auto;
-    overflow-x: hidden;
-    flex-wrap: wrap;
-    transition: top 0.5s;
-
-    > div {
+    // TODO:glr Turn this into a seperate class
+    .documentButtonMenu {
         position: relative;
-        display: block;
-    }
-
-    .collectionStackingViewFieldColumn {
+        height: fit-content;
+        border-bottom: global.$standard-border;
         display: flex;
+        justify-content: center;
         flex-direction: column;
+        align-items: center;
+        align-content: center;
+        padding: 5px 0 5px 0;
+
+        .documentExplanation {
+            width: 90%;
+            margin: 5px;
+            font-size: 11px;
+            color: global.$medium-blue;
+            padding: 10px;
+            border-radius: 5px;
+            border: solid 0.5px global.$medium-blue;
+        }
     }
 
-    .collectionSchemaView-previewDoc {
+    .collectionStackingView,
+    .collectionMasonryView {
         height: 100%;
+        width: 100%;
         position: absolute;
-    }
+        top: 0;
+        overflow-y: auto;
+        overflow-x: hidden;
+        flex-wrap: wrap;
+        transition: top 0.5s;
 
-    .collectionStackingView-docView-container {
-        width: 45%;
-        margin: 5% 2.5%;
-        padding-left: 2.5%;
-        height: auto;
-    }
+        > div {
+            position: relative;
+            display: block;
+        }
 
-    .collectionStackingView-flexCont {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        align-items: center;
-    }
+        .collectionStackingViewFieldColumn {
+            display: flex;
+            flex-direction: column;
+        }
 
-    .collectionStackingView-masonrySingle,
-    .collectionStackingView-masonryGrid {
-        width: 100%;
-        display: grid;
-        top: 0;
-        left: 0;
-    }
+        .collectionSchemaView-previewDoc {
+            height: 100%;
+            position: absolute;
+        }
 
-    .collectionStackingView-masonrySingle {
-        height: 100%;
-        position: absolute;
-    }
+        .collectionStackingView-docView-container {
+            width: 45%;
+            margin: 5% 2.5%;
+            padding-left: 2.5%;
+            height: auto;
+        }
 
-    .collectionStackingView-masonryGrid {
-        margin: auto;
-        height: max-content;
-        position: relative;
-        grid-auto-rows: 0px;
-    }
+        .collectionStackingView-flexCont {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            align-items: center;
+        }
 
-    .collectionStackingView-masonrySingle {
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        display: flex;
-        flex-direction: column;
-        top: 0;
-        left: 0;
-        width: 100%;
-        position: absolute;
-    }
+        .collectionStackingView-masonrySingle,
+        .collectionStackingView-masonryGrid {
+            width: 100%;
+            display: grid;
+            top: 0;
+            left: 0;
+        }
 
-    .collectionStackingView-description {
-        font-size: 100%;
-        margin-bottom: 1vw;
-        padding: 10px;
-        height: 2vw;
-        width: 100%;
-        font-family: global.$sans-serif;
-        background: global.$dark-gray;
-        color: global.$white;
-    }
+        .collectionStackingView-masonrySingle {
+            height: 100%;
+            position: absolute;
+        }
 
-    .collectionStackingView-columnDragger {
-        width: 28;
-        height: 28;
-        position: absolute;
-        margin-left: -5;
-        z-index: 10;
-        > svg {
+        .collectionStackingView-masonryGrid {
+            margin: auto;
+            height: max-content;
+            position: relative;
+            grid-auto-rows: 0px;
+        }
+
+        .collectionStackingView-masonrySingle {
             width: 100%;
             height: 100%;
+            position: absolute;
+            display: flex;
+            flex-direction: column;
+            top: 0;
+            left: 0;
+            width: 100%;
+            position: absolute;
+        }
+
+        .collectionStackingView-description {
+            font-size: 100%;
+            margin-bottom: 1vw;
+            padding: 10px;
+            height: 2vw;
+            width: 100%;
+            font-family: global.$sans-serif;
+            background: global.$dark-gray;
+            color: global.$white;
         }
     }
 
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index 0a25882ff..e8fa8b01e 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -452,7 +452,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
     };
     @action
     onDividerMove = (e: PointerEvent) => {
-        this.Document._layout_columnWidth = Math.max(10, this.ScreenToLocalBoxXf().transformPoint(e.clientX, 0)[0] - this.xMargin);
+        this.Document._layout_columnWidth = Math.max(10, (this._props.DocumentView?.().screenToViewTransform().transformPoint(e.clientX, 0)[0] ?? 0) - this.xMargin);
         return false;
     };
 
@@ -606,26 +606,29 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
         }
         const rows = () => (!this.isStackingView ? 1 : Math.max(1, Math.min(docList.length, Math.floor((this._props.PanelWidth() - 2 * this.xMargin) / (this.columnWidth + this.gridGap)))));
         return (
-            <div style={{ top: this.yMargin }}>
-                <CollectionMasonryViewFieldRow
-                    showHandle={first}
-                    Document={this.Document}
-                    chromeHidden={this.chromeHidden}
-                    pivotField={this.pivotField}
-                    refList={this._refList}
-                    key={heading ? heading.heading : ''}
-                    rows={rows}
-                    headings={this.headings}
-                    heading={heading ? heading.heading : ''}
-                    headingObject={heading}
-                    docList={docList}
-                    parent={this}
-                    type={type}
-                    createDropTarget={this.createDashEventsTarget}
-                    screenToLocalTransform={this.ScreenToLocalBoxXf}
-                    setDocHeight={this.setDocHeight}
-                />
-            </div>
+            <>
+                {this._props.isContentActive() && !this.isStackingView ? this.columnDragger : null}
+                <div style={{ top: this.yMargin }}>
+                    <CollectionMasonryViewFieldRow
+                        showHandle={first}
+                        Document={this.Document}
+                        chromeHidden={this.chromeHidden}
+                        pivotField={this.pivotField}
+                        refList={this._refList}
+                        key={heading ? heading.heading : ''}
+                        rows={rows}
+                        headings={this.headings}
+                        heading={heading ? heading.heading : ''}
+                        headingObject={heading}
+                        docList={docList}
+                        parent={this}
+                        type={type}
+                        createDropTarget={this.createDashEventsTarget}
+                        screenToLocalTransform={this.ScreenToLocalBoxXf}
+                        setDocHeight={this.setDocHeight}
+                    />
+                </div>
+            </>
         );
     };
 
diff --git a/src/client/views/global/globalScripts.ts b/src/client/views/global/globalScripts.ts
index b455f76e4..835c28daa 100644
--- a/src/client/views/global/globalScripts.ts
+++ b/src/client/views/global/globalScripts.ts
@@ -127,7 +127,7 @@ ScriptingGlobals.add(function setBackgroundColor(color?: string, checkResult?: b
             const contentFrameNumber = Cast(selView.Document?._currentFrame, 'number', layoutFrameNumber ?? null); // frame number that content is at which determines what content is displayed
             return CollectionFreeFormDocumentView.getStringValues(selView?.Document, contentFrameNumber)[fieldKey] || defaultFill();
         }
-        setDefaultFill(color ?? 'transparent');
+        !selectedViews.length && setDefaultFill(color ?? 'transparent');
         selectedViews.forEach(dv => {
             const fieldKey = dv.Document._layout_isSvg ? 'fillColor' : 'backgroundColor';
             const layoutFrameNumber = Cast(dv.containerViewPath?.().lastElement()?.Document?._currentFrame, 'number'); // frame number that container is at which determines layout frame values
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index b40ead03a..5f5dd1210 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -780,7 +780,7 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
                             transform: `scale(${this.uiBtnScaling})`,
                             bottom: Number.isNaN(this.maxWidgetSize) ? undefined : this.maxWidgetSize,
                         }}>
-                        {this._props.DocumentView?.() ? <TagsView Views={[this._props.DocumentView?.()]} /> : null}
+                        {this._props.DocumentView?.() && !this._props.docViewPath().slice(-2)[0].ComponentView?.isUnstyledView?.() ? <TagsView Views={[this._props.DocumentView?.()]} /> : null}
                     </div>
                 ) : (
                     <>
-- 
cgit v1.2.3-70-g09d2


From 2838b8d98ab88df974fd52ba96cf5046d99298cb Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Thu, 27 Feb 2025 16:05:35 -0500
Subject: fixed passive wheel prevention on document.root.  fixed key waring on
 masonry view.

---
 src/client/views/Main.tsx                               | 2 +-
 src/client/views/collections/CollectionStackingView.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

(limited to 'src/client/views/collections/CollectionStackingView.tsx')

diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 3c1da88cc..f02677d95 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -87,7 +87,7 @@ FieldLoader.ServerLoadStatus = { requested: 0, retrieved: 0, message: 'cache' };
     await CurrentUserUtils.loadUserDocument(info);
     setTimeout(() => {
         // prevent zooming browser
-        document.getElementById('root')!.addEventListener('wheel', event => event.ctrlKey && event.preventDefault(), { capture: true, passive: true });
+        document.getElementById('root')!.addEventListener('wheel', event => event.ctrlKey && event.preventDefault(), true);
         const startload = (document as unknown as { startLoad: number }).startLoad; // see index.html in deploy/
         const loading = Date.now() - (startload ? Number(startload) : Date.now() - 3000);
         const d = new Date();
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index e8fa8b01e..f06e0b551 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -606,7 +606,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
         }
         const rows = () => (!this.isStackingView ? 1 : Math.max(1, Math.min(docList.length, Math.floor((this._props.PanelWidth() - 2 * this.xMargin) / (this.columnWidth + this.gridGap)))));
         return (
-            <>
+            <div key={(heading?.heading ?? '') + 'head'}>
                 {this._props.isContentActive() && !this.isStackingView ? this.columnDragger : null}
                 <div style={{ top: this.yMargin }}>
                     <CollectionMasonryViewFieldRow
@@ -628,7 +628,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
                         setDocHeight={this.setDocHeight}
                     />
                 </div>
-            </>
+            </div>
         );
     };
 
-- 
cgit v1.2.3-70-g09d2