Wrap list tags onto two lines instead of scrolling
At the scaled-up type a horizontal tag strip clipped its third chip mid-word, and a fade only made the clipping prettier. Tags now wrap: you see whole tags or none. SwiftUI has no wrapping stack, so this adds a small FlowLayout capped at maxRows. Subviews past the cap are placed off-screen at zero size rather than left unplaced — a Layout that declines to place a subview gets it laid out at the origin instead of dropped, which would have stacked the leftover tags on top of the first row. Verified by temporarily forcing maxRows to 1: the overflow disappears cleanly, with no ghost chips. Worth knowing: the cap does discard tags on real data. The heaviest bookmarks carry five linkding tags plus AI tags, and two rows hold about four chips at this size, so the tail is hidden rather than truncated. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01JgLHztZGaEHvS3KNeGQmRM
This commit is contained in:
co-authored by
Claude Opus 5
parent
cdbec4aaf8
commit
0b8b9fe512
@@ -110,37 +110,25 @@ struct LibraryListRow: View {
|
||||
}
|
||||
}
|
||||
|
||||
/// Tags wrap onto up to two lines rather than scrolling sideways. At the
|
||||
/// scaled-up type a horizontal strip clipped its third chip mid-word, which
|
||||
/// read as broken text; wrapping shows whole tags or none.
|
||||
private var tagRow: some View {
|
||||
ScrollView(.horizontal, showsIndicators: false) {
|
||||
HStack(spacing: 5) {
|
||||
ForEach(effectiveTags, id: \.self) { tag in
|
||||
Text(tag)
|
||||
.font(.system(size: 15, design: .monospaced))
|
||||
.foregroundStyle(Paper.ink.opacity(0.55))
|
||||
.padding(.horizontal, 8)
|
||||
.padding(.vertical, 3)
|
||||
.overlay(
|
||||
RoundedRectangle(cornerRadius: 4)
|
||||
.stroke(Paper.rule.opacity(0.6), lineWidth: 0.6)
|
||||
)
|
||||
}
|
||||
FlowLayout(spacing: 5, lineSpacing: 5, maxRows: 2) {
|
||||
ForEach(effectiveTags, id: \.self) { tag in
|
||||
Text(tag)
|
||||
.font(.system(size: 15, design: .monospaced))
|
||||
.foregroundStyle(Paper.ink.opacity(0.55))
|
||||
.lineLimit(1)
|
||||
.padding(.horizontal, 8)
|
||||
.padding(.vertical, 3)
|
||||
.overlay(
|
||||
RoundedRectangle(cornerRadius: 4)
|
||||
.stroke(Paper.rule.opacity(0.6), lineWidth: 0.6)
|
||||
)
|
||||
}
|
||||
.padding(.vertical, 1)
|
||||
}
|
||||
.scrollBounceBehavior(.basedOnSize)
|
||||
// Without this the strip clips a tag mid-word at the trailing edge and
|
||||
// reads as broken text rather than as something you can scroll.
|
||||
.mask(
|
||||
LinearGradient(
|
||||
stops: [
|
||||
.init(color: .black, location: 0),
|
||||
.init(color: .black, location: 0.9),
|
||||
.init(color: .clear, location: 1),
|
||||
],
|
||||
startPoint: .leading,
|
||||
endPoint: .trailing
|
||||
)
|
||||
)
|
||||
.padding(.top, 1)
|
||||
}
|
||||
|
||||
/// Excerpt shown under the title: prefer the AI summary (italic), else the
|
||||
|
||||
Reference in New Issue
Block a user