carddeck tweak to heuristic to keep Docs selected docs inset within window. tweak to layout of Docs to make arc apex based on grid Doc widths.

1 files changed, 6 insertions, 6 deletions

diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx
index 1952cc707..e95a6fb97 100644
--- a/src/client/views/collections/CollectionCardDeckView.tsx
+++ b/src/client/views/collections/CollectionCardDeckView.tsx
@@ -208,11 +208,12 @@ export class CollectionCardView extends CollectionSubView() {
     translateY = (amCards: number, index: number, realIndex: number) => {
         const evenOdd = amCards % 2;
         const apex = (amCards - evenOdd) / 2;
-        const stepMag = 200 / ((amCards - evenOdd) / 2) + Math.abs((apex - index) * 25);
+        const Magnitude = this.childPanelWidth() / 2; // 400
+        const stepMag = Magnitude / 2 / ((amCards - evenOdd) / 2) + Math.abs((apex - index) * 25);
 
         let rowOffset = 0;
         if (realIndex > this._maxRowCount - 1) {
-            rowOffset = 400 * ((realIndex - (realIndex % this._maxRowCount)) / this._maxRowCount);
+            rowOffset = Magnitude * ((realIndex - (realIndex % this._maxRowCount)) / this._maxRowCount);
         }
         if (evenOdd === 1 || index < apex - 1) {
             return Math.abs(stepMag * (apex - index)) - rowOffset;
@@ -475,9 +476,7 @@ export class CollectionCardView extends CollectionSubView() {
         const rowToCenterShift = this.numRows / 2 - rowIndex;
         if (isSelected) return rowToCenterShift * rowHeight - rowHeight / 2;
         if (amCards == 1) return 50 * this.fitContentScale;
-        // const trans = isHovered ? this.translateHover(realIndex) : 0;
-        const trans = 0;
-        return trans + this.translateY(amCards, calcRowIndex, realIndex);
+        return this.translateY(amCards, calcRowIndex, realIndex);
     };
 
     /**
@@ -638,7 +637,8 @@ export class CollectionCardView extends CollectionSubView() {
                 return (rowCenterIndex - indexInRow) * 100 - 50;
             };
             const aspect = NumCast(doc.height) / NumCast(doc.width, 1);
-            const vscale = ((this._props.PanelHeight() * .95) * this.fitContentScale) / (aspect * this.childPanelWidth());
+            const vscale = Math.min((this._props.PanelHeight() * 0.95 * this.fitContentScale) / (aspect * this.childPanelWidth()), 
+                                    (this._props.PanelHeight() - 80) / (aspect * (this._props.PanelWidth() / 10))); // prettier-ignore
             const hscale = this._maxRowCount / 2; // bcz: hack - the grid is divided evenly into maxRowCount cells, so the max scaling would be maxRowCount -- but making things that wide is ugly, so cap it off at half the window size
             return (
                 <div