fixed doc decorations for carousel docs.

2 files changed, 13 insertions, 6 deletions

diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx
index 61a74dd7a..c080ba27e 100644
--- a/src/client/views/collections/CollectionCarousel3DView.tsx
+++ b/src/client/views/collections/CollectionCarousel3DView.tsx
@@ -75,21 +75,27 @@ export class CollectionCarousel3DView extends CollectionSubView() {
                       ? false
                       : undefined
     );
-    contentScreenToLocalXf = () => this._props.ScreenToLocalTransform().scale(this._props.NativeDimScaling?.() || 1);
+    contentScreenToLocalXf = () => this._props.ScreenToLocalTransform().translate(0, (-(Number(CAROUSEL3D_TOP) / 100) * this._props.PanelHeight()) / this.nativeScaling());
     childScreenLeftToLocal = () =>
         this.contentScreenToLocalXf()
-            .translate(-(this.panelWidth() - this.panelWidth() * this.sideScale) / 2, -(this.panelHeight() - this.panelHeight() * this.sideScale) / 2 - (Number(CAROUSEL3D_TOP) / 100) * this._props.PanelHeight())
+            .translate(
+                (-this.panelWidth() * (1 - this.sideScale)) / 2, //
+                (-this.panelHeight() * (1 - this.sideScale)) / 2
+            )
             .scale(1 / this.sideScale);
     childScreenRightToLocal = () =>
         this.contentScreenToLocalXf()
-            .translate(-2 * this.panelWidth() - (this.panelWidth() - this.panelWidth() * this.sideScale) / 2, -(this.panelHeight() - this.panelHeight() * this.sideScale) / 2 - (Number(CAROUSEL3D_TOP) / 100) * this._props.PanelHeight())
+            .translate(
+                -2 * this.panelWidth() - (this.panelWidth() * (1 - this.sideScale)) / 2, //
+                (-this.panelHeight() * (1 - this.sideScale)) / 2
+            )
             .scale(1 / this.sideScale);
     childCenterScreenToLocal = () =>
         this.contentScreenToLocalXf()
             .translate(
                 -this.panelWidth() + ((this.centerScale - 1) * this.panelWidth()) / 2, // Focused Doc is shifted right by 1/3 panel width then left by increased size percent of center * 1/2 * panel width / 3
-                -((Number(CAROUSEL3D_TOP) / 100) * this._props.PanelHeight()) + ((this.centerScale - 1) * this.panelHeight()) / 2
-            ) // top is top margin % of panelHeight - increased size percent of center * panelHeight / 2
+                ((this.centerScale - 1) * this.panelHeight()) / 2
+            )
             .scale(1 / this.centerScale);
 
     focus = (anchor: Doc, options: FocusViewOptions): Opt<number> => {
diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx
index 9952863d7..0c059f729 100644
--- a/src/client/views/collections/CollectionSubView.tsx
+++ b/src/client/views/collections/CollectionSubView.tsx
@@ -531,6 +531,7 @@ export function CollectionSubView<X>() {
         };
 
         protected _sideBtnWidth = 35;
+        protected _sideBtnMaxPanelPct = 0.15;
         @observable _filterFunc: ((doc: Doc) => boolean) | undefined = undefined;
         /**
          * How much the content of the collection is being scaled based on its nesting and its fit-to-width settings
@@ -541,7 +542,7 @@ export function CollectionSubView<X>() {
          * This takes the desired screen space size and converts into collection coordinates.  It then returns the smaller of the converted
          * size or a fraction of the collection view.
          */
-        @computed get maxWidgetSize() { return Math.min(this._sideBtnWidth * this.contentScaling, (this._props.fitWidth?.(this.Document) && this._props.PanelWidth() > NumCast(this.layoutDoc._width)? 1:  0.25) * NumCast(this.layoutDoc.width, 1));  } // prettier-ignore
+        @computed get maxWidgetSize() { return Math.min(this._sideBtnWidth * this.contentScaling, (this._props.fitWidth?.(this.Document) && this._props.PanelWidth() > NumCast(this.layoutDoc._width)? 1: this._sideBtnMaxPanelPct) * NumCast(this.layoutDoc.width, 1));  } // prettier-ignore
         /**
          * This computes a scale factor for UI elements so that they shrink and grow as the collection does in screen space.
          * Note, the scale factor does not allow for elements to grow larger than their native screen space size.