Fixing CardView Gallery layout card overlap and container resizing (#2739)

* replacing gallery card min width with 0

width of card should be determined by the gallery layout calculated divs. Min width matches v2.

* fixing case where cards disappear when Gallery CardView width is resized to 0

turns out the row height calculatons are messed up because the total weight of the row becomes 0 giving up a NaN height from dividing by 0. This in turn breaks the visible height and y values propagated throughout the OverscanManager, Virtualizer, etc. This stops the Cards from properly reappearing when resizing the Gallery CardView back to widths greater than 0.

Co-authored-by: Devon Govett <[email protected]>

Author: LFDanLu

packages/@adobe/spectrum-css-temp/components/card/index.css

@@ -717,7 +717,7 @@ user-provided
   .spectrum-Card-grid:after {
     z-index: 2;
   }
-  min-inline-size: var(--spectrum-card-quiet-min-size);
+  min-inline-size: 0;
 
   .spectrum-Card-grid {
     block-size: 100%;

packages/@react-spectrum/card/src/GalleryLayout.tsx

@@ -138,105 +138,107 @@ export class GalleryLayout<T> extends BaseLayout<T> {
     let y = this.margin;
     let availableWidth = visibleWidth - this.margin * 2;
 
-    // Compute aspect ratios for all of the items, and the total width if all items were on in a single row.
-    let ratios = [];
-    let totalWidth = 0;
-    let minRatio = this.minItemSize.width / this.minItemSize.height;
-    let maxRatio = availableWidth / this.minItemSize.height;
-
-    for (let node of this.collection) {
-      let ratio = node.props.width / node.props.height;
-      if (ratio < minRatio) {
-        ratio = minRatio;
-      } else if (ratio > maxRatio && ratio !== minRatio) {
-        ratio = maxRatio;
+    // If avaliable width is not greater than 0, skip node layout calculations
+    if (availableWidth > 0) {
+      // Compute aspect ratios for all of the items, and the total width if all items were on in a single row.
+      let ratios = [];
+      let totalWidth = 0;
+      let minRatio = this.minItemSize.width / this.minItemSize.height;
+      let maxRatio = availableWidth / this.minItemSize.height;
+
+      for (let node of this.collection) {
+        let ratio = node.props.width / node.props.height;
+        if (ratio < minRatio) {
+          ratio = minRatio;
+        } else if (ratio > maxRatio && ratio !== minRatio) {
+          ratio = maxRatio;
+        }
+
+        let itemWidth = ratio * this.minItemSize.height;
+        ratios.push(ratio);
+        totalWidth += itemWidth;
       }
 
-      let itemWidth = ratio * this.minItemSize.height;
-      ratios.push(ratio);
-      totalWidth += itemWidth;
-    }
+      totalWidth += this.itemSpacing.width * (this.collection.size - 1);
 
-    totalWidth += this.itemSpacing.width * (this.collection.size - 1);
+      // Determine how many rows we'll need, and partition the items into rows
+      // using the aspect ratios as weights.
+      let rows = Math.max(1, Math.ceil(totalWidth / availableWidth));
+      // if the available width can't hold two items, then every item will get its own row
+      // this leads to a faster run through linear partition and more dependable output for small row widths
+      if (availableWidth <= (this.minItemSize.width * 2) + (this.itemPadding * 2)) {
+        rows = this.collection.size;
+      }
 
-    // Determine how many rows we'll need, and partition the items into rows
-    // using the aspect ratios as weights.
-    let rows = Math.max(1, Math.ceil(totalWidth / availableWidth));
-    // if the available width can't hold two items, then every item will get its own row
-    // this leads to a faster run through linear partition and more dependable output for small row widths
-    if (availableWidth <= (this.minItemSize.width * 2) + (this.itemPadding * 2)) {
-      rows = this.collection.size;
-    }
+      let weightedRatios = ratios.map(ratio => ratio < this.threshold ? ratio + (0.5 * (1 / ratio)) : ratio);
+      let partition = linearPartition(weightedRatios, rows);
 
-    let weightedRatios = ratios.map(ratio => ratio < this.threshold ? ratio + (0.5 * (1 / ratio)) : ratio);
-    let partition = linearPartition(weightedRatios, rows);
+      let index = 0;
+      for (let row of partition) {
+        // Compute the total weight for this row
+        let totalWeight = 0;
+        for (let j = index; j < index + row.length; j++) {
+          totalWeight += ratios[j];
+        }
 
-    let index = 0;
-    for (let row of partition) {
-      // Compute the total weight for this row
-      let totalWeight = 0;
-      for (let j = index; j < index + row.length; j++) {
-        totalWeight += ratios[j];
-      }
+        // Determine the row height based on the total available width and weight of this row.
+        let bestRowHeight = (availableWidth - (row.length - 1) * this.itemSpacing.width) / totalWeight;
 
-      // Determine the row height based on the total available width and weight of this row.
-      let bestRowHeight = (availableWidth - (row.length - 1) * this.itemSpacing.width) / totalWeight;
+        // if this is the last row and the row height is >2x the ideal row height, then cap to the ideal height
+        // probably doing this because if the last row has one extremely tall image, then the row becomes huge
+        // though that can happen anywhere if a row has lots of tall images... so i'm not sure why this one matters
+        if (row === partition[partition.length - 1] && bestRowHeight > this.idealRowHeight * 2) {
+          bestRowHeight = this.idealRowHeight;
+        }
+        let itemHeight = Math.round(bestRowHeight) + this.itemPadding;
+        let x = this.margin;
+
+        // if any items are going to end up too small, add a bit of width to them and subtract it from wider objects
+        let widths = [];
+        for (let j = index; j < index + row.length; j++) {
+          let width = Math.round(bestRowHeight * ratios[j]);
+          widths.push([j - index, width]);
+        }
+        this._distributeWidths(widths);
+
+        // Create items for this row.
+        for (let j = index; j < index + row.length; j++) {
+          let node = this.collection.rows[j];
+          let itemWidth = Math.max(widths[j - index][1], this.minItemSize.width);
+          let rect = new Rect(x, y, itemWidth, itemHeight);
+          let layoutInfo = new LayoutInfo(node.type, node.key, rect);
+          layoutInfo.allowOverflow = true;
+          this.layoutInfos.set(node.key, layoutInfo);
+          x += itemWidth + this.itemSpacing.width;
+        }
 
-      // if this is the last row and the row height is >2x the ideal row height, then cap to the ideal height
-      // probably doing this because if the last row has one extremely tall image, then the row becomes huge
-      // though that can happen anywhere if a row has lots of tall images... so i'm not sure why this one matters
-      if (row === partition[partition.length - 1] && bestRowHeight > this.idealRowHeight * 2) {
-        bestRowHeight = this.idealRowHeight;
-      }
-      let itemHeight = Math.round(bestRowHeight) + this.itemPadding;
-      let x = this.margin;
-
-      // if any items are going to end up too small, add a bit of width to them and subtract it from wider objects
-      let widths = [];
-      for (let j = index; j < index + row.length; j++) {
-        let width = Math.round(bestRowHeight * ratios[j]);
-        widths.push([j - index, width]);
-      }
-      this._distributeWidths(widths);
-
-      // Create items for this row.
-      for (let j = index; j < index + row.length; j++) {
-        let node = this.collection.rows[j];
-        let itemWidth = Math.max(widths[j - index][1], this.minItemSize.width);
-        let rect = new Rect(x, y, itemWidth, itemHeight);
-        let layoutInfo = new LayoutInfo(node.type, node.key, rect);
-        layoutInfo.allowOverflow = true;
-        this.layoutInfos.set(node.key, layoutInfo);
-        x += itemWidth + this.itemSpacing.width;
+        y += itemHeight + this.itemSpacing.height;
+        index += row.length;
       }
 
-      y += itemHeight + this.itemSpacing.height;
-      index += row.length;
-    }
+      if (this.isLoading) {
+        let loaderY = y;
+        let loaderHeight = 60;
+        // If there aren't any items, make loader take all avaliable room and remove margin from y calculation
+        // so it doesn't scroll
+        if (this.collection.size === 0) {
+          loaderY = 0;
+          loaderHeight = visibleHeight || 60;
+        }
 
-    if (this.isLoading) {
-      let loaderY = y;
-      let loaderHeight = 60;
-      // If there aren't any items, make loader take all avaliable room and remove margin from y calculation
-      // so it doesn't scroll
-      if (this.collection.size === 0) {
-        loaderY = 0;
-        loaderHeight = visibleHeight || 60;
+        let rect = new Rect(0, loaderY, visibleWidth, loaderHeight);
+        let loader = new LayoutInfo('loader', 'loader', rect);
+        this.layoutInfos.set('loader', loader);
+        y = loader.rect.maxY;
       }
 
-      let rect = new Rect(0, loaderY, visibleWidth, loaderHeight);
-      let loader = new LayoutInfo('loader', 'loader', rect);
-      this.layoutInfos.set('loader', loader);
-      y = loader.rect.maxY;
-    }
-
-    if (this.collection.size === 0 && !this.isLoading) {
-      let rect = new Rect(0, 0, visibleWidth, visibleHeight);
-      let placeholder = new LayoutInfo('placeholder', 'placeholder', rect);
-      this.layoutInfos.set('placeholder', placeholder);
-      y = placeholder.rect.maxY;
+      if (this.collection.size === 0 && !this.isLoading) {
+        let rect = new Rect(0, 0, visibleWidth, visibleHeight);
+        let placeholder = new LayoutInfo('placeholder', 'placeholder', rect);
+        this.layoutInfos.set('placeholder', placeholder);
+        y = placeholder.rect.maxY;
+      }
     }
-
     this.contentSize = new Size(visibleWidth, y);
   }
 }