Fix: ensure ProductItem photo always is square and simplify classes

[vallimmateus]

ProductItem sempre quadrada

Quando as páginas de produtos por categoria era exibida numa tela com largura um pouco maior o ProductItem fixava a altura em 170px, como mostra o print abaixo:

Para resolver este problema, utilizei a classe "aspect-square" que produz o código CSS abaixo e garante que a div que envolve a foto seja sempre quadrada, sendo seu tamanho manipulado pelo mínimo de largura de 156px ou então pelo seu parent (no caso de um parent com grid, ele estica para o máximo de largura)

.aspect-square {
    aspect-ratio: 1 / 1;
}

Simplificação do reticências [só uma dica]

Notei que você utilizou 3 classes para adicionar as reticências no nome do ProductItem, porém existe a classe "truncate" do TailwindCSS que realiza todas as 3 de uma só vez, simplificando o código.

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[felipemotarocha]

Muito bom o seu PR, meu mano! Não conhecia essas classes do Tailwind, achei muito massa. Consegue resolver os conflitos?

[vallimmateus]

Resolvi todos os conflitos e adicionei mais duas modificações.

Simplificação dos {{objectFit: "contain"}}

Dentro do TailwindCSS também existe uma classe pra isso, a "object-contain". Fiz as modificações para o projeto trabalhar inteiramente com o TailwindCSS e não causar muita confusão incluindo alguns styles.

.object-contain {
    object-fit: contain;
}

Garantir que o ProductItem dentro do ProductList é fixo

Com as mudanças da live de ontem (quarta-feira), o ProductItem não estava mais fazendo o resize automaticamente por conta da tag <Link> que incluímos nele. Pra fazer isso eu utilizei a função cn() que o próprio shadcn-ui adiciona no arquivo @/lib/utils. Ela retorna uma união entre o twMerge e o clsx. Com ela defini a largura para cada ProductItem dentro do .map() do ProductList.