I have a problem with the design of my episode list on mobile devices. The list has a fixed height, and I am using the line-clamp-2 property for the episode titles that exceed two lines.
While everything looks fine on my PC and even when using Dev Tools to simulate different device views, I encounter an issue when I view the page on my actual iPhone 7. The layout does not display as expected, even though it appeared correctly during development on my PC.
To style the episode items, I set a fixed height of 70px with 12px padding on the sides and 0.25rem padding on the top and bottom. I also tried various solutions, including applying overflow-hidden and line-clamp directly to the div element instead of the p tag, but the problem persists on mobile.
I am using TailwindCSS to style my React component. Here is a snippet of my code:
<div className="lg:h-[calc(100vh-60px)] overflow-y-scroll bg-[#222] h-[30vh] max-lg:mb-[20px]">
{listEpisode.map((item, i) => (
<Link
to={`episode-url`}
key={i}
className="w-full h-[70px] px-[12px] leading-normal
py-1 hover:text-white hover:opacity-80 hover:bg-white/20
duration-200 ease-in-out line-clamp-2 overflow-hidden
odd:bg-[#111111] even:bg-[#272727]"
>
<p className="inline after:whitespace-pre">
{item.title}
</p>
</Link>
))}
</div>
In Dev Tools on Chrome, the layout appears correctly when set to iPhone 6/7/8 viewport size (which matches my physical device). However, when viewing the page on Safari on my iPhone 7, the layout is not as expected:
https://i.sstatic.net/pUeJN.png
I am struggling to identify the cause of this issue and find a solution to fix it, especially since the design was working fine on my PC.