fix(cards): clear model-card min-width on the item element itself

This commit is contained in:
Will Miao
2026-08-07 16:09:51 +08:00
parent 381cd710a2
commit ac7707d0f6
3 changed files with 45 additions and 6 deletions

View File

@@ -533,10 +533,15 @@ export class MasonryScroller {
element.style.width = `${pos.width}px`;
element.style.height = `${pos.height}px`;
// Remove max-width constraint from model-card to allow dynamic sizing
const modelCard = element.querySelector('.model-card');
// Remove max-width/min-width constraints from the model-card to allow
// dynamic sizing. The card is either the item element itself (e.g.
// RecipeCard returns the .model-card root) or a descendant (ModelCard).
const modelCard = element.classList.contains('model-card')
? element
: element.querySelector('.model-card');
if (modelCard) {
modelCard.style.maxWidth = 'none';
modelCard.style.minWidth = '0';
}
return element;

View File

@@ -483,10 +483,18 @@ export class VirtualScroller {
element.style.width = `${this.itemWidth}px`;
element.style.height = `${this.itemHeight}px`;
// Remove max-width constraint from model-card to allow dynamic sizing
const modelCard = element.querySelector('.model-card');
// Remove max-width/min-width constraints from the model-card to allow
// dynamic sizing. The card is either the item element itself (e.g.
// RecipeCard returns the .model-card root) or a descendant (ModelCard).
// Without this, the CSS min-width of 200px forces compact-density cards
// wider than their allocated column, and the last column gets clipped
// by the grid's overflow-x: hidden.
const modelCard = element.classList.contains('model-card')
? element
: element.querySelector('.model-card');
if (modelCard) {
modelCard.style.maxWidth = 'none';
modelCard.style.minWidth = '0';
}
return element;