I've designed an 'Album' (React) component to showcase album artwork, name, and release date in a card-like format. This component consists of two divs - one for the photo and the other for text. Each artist's discography displays multiple album components with varying album names.
Although the album artwork remains consistent in size, the length of album names differs. When rendering numerous album components, the cards ended up being uneven sizes due to varying name lengths. In order to achieve a uniform appearance across all rows, I used 'flex' and 'flex-shrink-0' properties to maintain consistent card sizing.
While this solution resolved the sizing issue, it introduced a new problem - longer album names now overflow into adjacent components. Applying 'overflow-hidden' to the parent div contained the overflow, but ideally, I want the text to dynamically shrink to fit within the uniform album size.
Despite exploring Tailwind's documentation for a resolution, I have not found a suitable solution yet. Attempts with 'object-contain' and 'break-normal' did not yield results. It appears that 'flex-shrink-0' may be preventing text from shrinking, as my initial intention was to restrict the container div from shrinking rather than the text itself. Removing 'flex-shrink-0' might enable me to utilize these solutions for text resizing, but then I would face the original sizing inconsistency...
In essence, my question is: Is it feasible to have uniformly sized cards with dynamically adjusted text content within them? Can I implement dynamic text sizing within a div that has 'flex-shrink-0'? Ideally, using Tailwind CSS?
Below is the code snippet for my Album component:
import React from "react";
export const Album = (props: any) => {
return (
<div className="max-w-xs rounded overflow-hidden shadow-lg m-auto transform transition duration-300 hover:scale-110">
<div className="object-fill">
<a
href={props.album.external_urls.spotify}
target="_blank"
rel="noreferrer"
>
<img alt={"Album Cover"} src={props.album.images[1].url} />
</a>
</div>
<div className="flex">
<div className="px-6 py-4 flex-shrink-0">
<div className="font-bold text-purple-500 text-lg mb-2">
{props.album.name}
</div>
<div className="font-bold text-black-500 text-md mb-2">
{props.album.release_date.replaceAll("-", "/")}
</div>
</div>
</div>
</div>
);
};
Illustration demonstrating the text sizing challenge with multiple albums