diff --git a/TheNoiseClock/Views/Clock/Components/TimeDisplayView.swift b/TheNoiseClock/Views/Clock/Components/TimeDisplayView.swift index 64ac668..ec068f6 100644 --- a/TheNoiseClock/Views/Clock/Components/TimeDisplayView.swift +++ b/TheNoiseClock/Views/Clock/Components/TimeDisplayView.swift @@ -114,7 +114,7 @@ struct TimeDisplayView: View { ) // Calculate consistent sizes for layout - let digitHeight = measureText("8", font: digitUIFont).height // Use 8 as reference height + let _ = measureText("8", font: digitUIFont).height // Use 8 as reference height // Calculate the width of "88" for consistent sizing let testFont = FontUtils.customUIFont( @@ -125,19 +125,20 @@ struct TimeDisplayView: View { ) let _ = calculateMaxTextWidth(font: testFont) - // Calculate width for a single digit (using "8" as the widest) + // Calculate width and height for a single digit (using "8" as the reference) let singleDigitWidth = calculateMaxTextWidth(font: testFont, text: "8") + let singleDigitHeight = calculateMaxTextHeight(font: testFont, text: "8") - // All time segments use the same fixed width to prevent shifting - let hourSize = CGSize(width: singleDigitWidth * 2, height: digitHeight) - let minuteSize = CGSize(width: singleDigitWidth * 2, height: digitHeight) - let secondsSize = showSeconds ? CGSize(width: singleDigitWidth * 2, height: digitHeight) : .zero + // All time segments use the same fixed width and height to prevent shifting + let hourSize = CGSize(width: singleDigitWidth * 2, height: singleDigitHeight) + let minuteSize = CGSize(width: singleDigitWidth * 2, height: singleDigitHeight) + let secondsSize = showSeconds ? CGSize(width: singleDigitWidth * 2, height: singleDigitHeight) : .zero let ampmSize = showAMPM ? measureText(ampmText, font: ampmUIFont) : .zero - // Separators - reasonable spacing + // Separators - reasonable spacing with extra padding in landscape let dotDiameter = baseFontSize * 0.20 - let hSpacing = baseFontSize * 0.18 - let vSpacing = baseFontSize * 0.22 + let hSpacing = portrait ? baseFontSize * 0.18 : baseFontSize * 0.25 // More spacing in landscape + let vSpacing = portrait ? baseFontSize * 0.22 : baseFontSize * 0.30 // More spacing in landscape let horizontalSepSize = CGSize(width: dotDiameter * 2 + hSpacing, height: dotDiameter) let verticalSepSize = CGSize(width: dotDiameter, height: dotDiameter * 2 + vSpacing) @@ -191,7 +192,7 @@ struct TimeDisplayView: View { } } } else { - HStack(spacing: 0) { + HStack(spacing: baseFontSize * 0.035) { TimeSegment(text: hour, fontSize: baseFontSize, opacity: clockOpacity, digitColor: digitColor, glowIntensity: glowIntensity, fontFamily: fontFamily, fontWeight: fontWeight, fontDesign: fontDesign) if showAMPM { TimeSegment(text: ampmText, fontSize: ampmFontSize, opacity: clockOpacity, digitColor: digitColor, glowIntensity: glowIntensity, fontFamily: fontFamily, fontWeight: fontWeight, fontDesign: fontDesign) @@ -291,6 +292,13 @@ struct TimeDisplayView: View { let size = (text as NSString).size(withAttributes: attributes) return size.width } + + // Calculate height of text for the given font - this ensures consistent height + private func calculateMaxTextHeight(font: UIFont, text: String = "8") -> CGFloat { + let attributes = [NSAttributedString.Key.font: font] + let size = (text as NSString).size(withAttributes: attributes) + return size.height + } private struct TimeSegment: View { let text: String @@ -311,6 +319,7 @@ struct TimeDisplayView: View { design: fontDesign ) let singleDigitWidth = calculateMaxTextWidth(font: font, text: "8") + let singleDigitHeight = calculateMaxTextHeight(font: font, text: "8") let totalWidth = singleDigitWidth * CGFloat(text.count) HStack(spacing: 0) { @@ -324,7 +333,8 @@ struct TimeDisplayView: View { fontFamily: fontFamily, fontWeight: fontWeight, fontDesign: fontDesign, - digitWidth: singleDigitWidth + digitWidth: singleDigitWidth, + digitHeight: singleDigitHeight ) } } @@ -350,6 +360,7 @@ struct TimeDisplayView: View { let fontWeight: String let fontDesign: String let digitWidth: CGFloat + let digitHeight: CGFloat var body: some View { ZStack { @@ -375,8 +386,8 @@ struct TimeDisplayView: View { .opacity(opacity) .multilineTextAlignment(.center) } - .frame(width: digitWidth, alignment: .center) - .fixedSize(horizontal: false, vertical: true) + .frame(width: digitWidth, height: digitHeight, alignment: .center) + .fixedSize(horizontal: false, vertical: false) .lineLimit(1) .allowsTightening(false) .multilineTextAlignment(.center)