Give search breadcrumbs a consistent row height

Query and room breadcrumbs reserved slightly different heights, and
rooms without a description collapsed further. Both now reserve the
space of a title and subtitle so every row lines up.
This commit is contained in:
Stefan Ceriu
2026-09-29 14:57:51 +03:00
parent a78e4f0c2a
commit 0de6231399
5 changed files with 36 additions and 20 deletions
@@ -307,17 +307,21 @@ private struct SearchScreenRoomCell: View {
HStack(spacing: 16) {
avatar
VStack(alignment: .leading, spacing: 2) {
Text(room.title)
.font(.compound.bodyLGSemibold)
.foregroundStyle(.compound.textPrimary)
.lineLimit(1)
ZStack(alignment: .leading) {
SearchScreenRowHeightPlaceholder()
if !room.description.isEmpty {
Text(room.description)
.font(.compound.bodyMD)
.foregroundStyle(.compound.textSecondary)
VStack(alignment: .leading, spacing: 2) {
Text(room.title)
.font(.compound.bodyLGSemibold)
.foregroundStyle(.compound.textPrimary)
.lineLimit(1)
if !room.description.isEmpty {
Text(room.description)
.font(.compound.bodyMD)
.foregroundStyle(.compound.textSecondary)
.lineLimit(1)
}
}
}
.frame(maxWidth: .infinity, alignment: .leading)
@@ -391,9 +395,7 @@ private struct SearchScreenQueryCell: View {
.accessibilityHidden(true)
ZStack(alignment: .leading) {
// Hidden text with 2 lines to match the height of the room rows, scaling with dynamic text.
Text(verbatim: " \n ")
.font(.compound.bodyLG)
SearchScreenRowHeightPlaceholder()
Text(query)
.font(.compound.bodyLG)
@@ -414,6 +416,20 @@ private struct SearchScreenQueryCell: View {
}
}
/// Reserves the height of a title and subtitle so every row matches, scaling with dynamic type.
private struct SearchScreenRowHeightPlaceholder: View {
var body: some View {
VStack(alignment: .leading, spacing: 2) {
Text(verbatim: " ")
.font(.compound.bodyLGSemibold)
Text(verbatim: " ")
.font(.compound.bodyMD)
}
.hidden()
.accessibilityHidden(true)
}
}
private struct SearchScreenRemoveBreadcrumbButton: View {
let action: () -> Void