fix(audio): cap the cover card's width so it cannot overflow on wide screens

On a column wider than 400dp (the SM-T220), fillMaxWidth().heightIn(max = 400.dp)
.aspectRatio(1f) had no square that satisfied both constraints, so aspectRatio drew a
full-width square inside a 400dp-tall slot and the overflow covered the author row and
the note text above and the reaction row below. Capping the width keeps the cover a
square of at most 400dp.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Vitor Pamplona
2026-10-01 14:36:33 -04:00
co-authored by Claude Opus 5.5
parent b9e0a8ecbc
commit 391e371259
@@ -36,10 +36,10 @@ import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.widthIn
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.MaterialTheme
@@ -240,11 +240,14 @@ fun AudioCoverCard(
overlay: @Composable BoxScope.() -> Unit = {},
) {
val bars = rememberBars(info)
// Cap the WIDTH, not the height: with a full width wider than the cap (a tablet), a height cap
// left aspectRatio drawing a full-width square inside a 400dp-tall slot, and the overflow
// spilled over the author row above and the reaction row below.
Box(
modifier =
modifier
.widthIn(max = 400.dp)
.fillMaxWidth()
.heightIn(max = 400.dp)
.aspectRatio(1f)
.clip(RoundedCornerShape(16.dp))
.clickableWithoutRipple(onClick),