From a7f2d8c475e1504c0e95ac73f483bfad6b03accc Mon Sep 17 00:00:00 2001 From: Marquis Kurt Date: Thu, 26 Feb 2026 20:30:00 -0500 Subject: [PATCH] Fix icon alignments, clipping in sidebar On macOS Tahoe, room icons don't quite behave as expected compared to older macOS releases. When no room icon can be loaded, the system icon is terribly misaligned as it is too small to fit the space it's given. When a room icon is found, it takes the full space, getting clipped in the process. I'm not entirely sure what the cause of the issue is, given that I haven't seen this behavior in other apps, but I suspect there's an issue with image sizing parameters internally. To work around this, I've made some minor modifications to the sidebar entry. First, system icons are now centered inside an invisible rounded rectangle to make sure it lines up correctly in the space given. Likewise, the image inside the label is given a frame, constraining its size to 22 points. To allow this to respect Dynamic Type features, this value is recorded as a ScaledMetric value, meaning it should adjust when the Dynamic Type rules are adjusted. Signed-off-by: Marquis Kurt --- MactrixLibrary/Sources/UI/Sidebar/RoomRow.swift | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/MactrixLibrary/Sources/UI/Sidebar/RoomRow.swift b/MactrixLibrary/Sources/UI/Sidebar/RoomRow.swift index cf13f17..0e5fe08 100644 --- a/MactrixLibrary/Sources/UI/Sidebar/RoomRow.swift +++ b/MactrixLibrary/Sources/UI/Sidebar/RoomRow.swift @@ -43,6 +43,7 @@ public struct RoomRow: View { @State private var joining: Bool = false @State private var error: Error? = nil @State private var isErrorVisible: Bool = false + @ScaledMetric(relativeTo: .body) private var roomAvatarSize: CGFloat = 22.0 public init(title: String, avatarUrl: String?, roomInfo: RoomInfo?, imageLoader: ImageLoader?, joinRoom: (() async throws -> Void)?) { self.title = title @@ -71,8 +72,13 @@ public struct RoomRow: View { }, icon: { UI.AvatarImage(avatarUrl: avatarUrl, imageLoader: imageLoader) { - Image(systemName: placeholderImageName) + RoundedRectangle(cornerRadius: 4) + .fill(.clear) + .overlay { + Image(systemName: placeholderImageName) + } } + .frame(width: roomAvatarSize, height: roomAvatarSize) .clipShape(RoundedRectangle(cornerRadius: 4)) } )