Skip to content

Configurable tab title font size #90

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
austinywang merged 2 commits into from
Apr 7, 2026
Merged

Configurable tab title font size #90

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0aa5957
feat: configurable tab title font size
austinywang Apr 7, 2026
d1576ed
fix: scale tab accessory slots with tab title font
austinywang Apr 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion Sources/Bonsplit/Internal/Views/TabDragPreview.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ struct TabDragPreview: View {
}

Text(tab.title)
.font(.system(size: TabBarMetrics.titleFontSize))
.font(.system(size: appearance.tabTitleFontSize))
.lineLimit(1)
.foregroundStyle(TabBarColors.activeText(for: appearance))
}
Expand Down
31 changes: 20 additions & 11 deletions Sources/Bonsplit/Internal/Views/TabItemView.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ struct TabItemView: View {
.onChange(of: tab.icon) { _ in updateGlobeFallback() }

Text(tab.title)
.font(.system(size: TabBarMetrics.titleFontSize))
.font(.system(size: appearance.tabTitleFontSize))
Copy link
Copy Markdown

@greptile-apps greptile-apps bot Apr 7, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Missing lower-bound guard on primary title font

The zoom indicator and shortcut hint already protect against a sub-8 pt size via max(8, appearance.tabTitleFontSize - 2), but the main tab title text uses appearance.tabTitleFontSize directly. A caller who passes 0 or a very small value will silently render invisible tab titles while the secondary elements are clamped. Applying the same floor keeps behaviour consistent across all three callers.

Suggested change
.font(.system(size: appearance.tabTitleFontSize))
.font(.system(size: max(8, appearance.tabTitleFontSize)))

.lineLimit(1)
.foregroundStyle(
isSelected
Expand All @@ -133,13 +133,13 @@ struct TabItemView: View {
onZoomToggle()
} label: {
Image(systemName: "arrow.up.left.and.arrow.down.right")
.font(.system(size: max(8, TabBarMetrics.titleFontSize - 2), weight: .semibold))
.font(.system(size: accessoryFontSize, weight: .semibold))
.foregroundStyle(
isZoomHovered
? TabBarColors.activeText(for: appearance)
: TabBarColors.inactiveText(for: appearance)
)
.frame(width: TabBarMetrics.closeButtonSize, height: TabBarMetrics.closeButtonSize)
.frame(width: accessorySlotSize, height: accessorySlotSize)
.background(
Circle()
.fill(
Expand Down Expand Up @@ -217,14 +217,23 @@ struct TabItemView: View {

private var shortcutHintSlotWidth: CGFloat {
guard let label = shortcutHintLabel else {
return TabBarMetrics.closeButtonSize
return accessorySlotSize
}
let positiveDebugInset = max(0, CGFloat(TabControlShortcutHintDebugSettings.clamped(controlShortcutHintXOffset))) + 2
return max(TabBarMetrics.closeButtonSize, shortcutHintWidth(for: label) + positiveDebugInset)
return max(accessorySlotSize, shortcutHintWidth(for: label) + positiveDebugInset)
}

private var accessoryFontSize: CGFloat {
max(8, appearance.tabTitleFontSize - 2)
}

private var accessorySlotSize: CGFloat {
// Keep accessory affordances readable when the tab title font is increased.
min(TabBarMetrics.tabHeight, max(TabBarMetrics.closeButtonSize, ceil(accessoryFontSize + 4)))
}

private func shortcutHintWidth(for label: String) -> CGFloat {
let font = NSFont.systemFont(ofSize: max(8, TabBarMetrics.titleFontSize - 2), weight: .semibold)
let font = NSFont.systemFont(ofSize: accessoryFontSize, weight: .semibold)
let textWidth = (label as NSString).size(withAttributes: [.font: font]).width
return ceil(textWidth) + 8
}
Expand All @@ -234,7 +243,7 @@ struct TabItemView: View {
ZStack(alignment: .center) {
if let shortcutHintLabel {
Text(shortcutHintLabel)
.font(.system(size: max(8, TabBarMetrics.titleFontSize - 2), weight: .semibold, design: .rounded))
.font(.system(size: accessoryFontSize, weight: .semibold, design: .rounded))
.monospacedDigit()
.lineLimit(1)
.fixedSize(horizontal: true, vertical: false)
Expand Down Expand Up @@ -266,7 +275,7 @@ struct TabItemView: View {
.opacity(showsShortcutHint ? 0 : 1)
.allowsHitTesting(!showsShortcutHint)
}
.frame(width: shortcutHintSlotWidth, height: TabBarMetrics.closeButtonSize, alignment: .center)
.frame(width: shortcutHintSlotWidth, height: accessorySlotSize, alignment: .center)
.animation(.easeInOut(duration: 0.14), value: showsShortcutHint)
}

Expand Down Expand Up @@ -478,7 +487,7 @@ struct TabItemView: View {
Image(systemName: "pin.fill")
.font(.system(size: TabBarMetrics.closeIconSize, weight: .semibold))
.foregroundStyle(TabBarColors.inactiveText(for: appearance))
.frame(width: TabBarMetrics.closeButtonSize, height: TabBarMetrics.closeButtonSize)
.frame(width: accessorySlotSize, height: accessorySlotSize)
.saturation(saturation)
}
} else if isSelected || isHovered || isCloseHovered {
Expand All @@ -493,7 +502,7 @@ struct TabItemView: View {
? TabBarColors.activeText(for: appearance)
: TabBarColors.inactiveText(for: appearance)
)
.frame(width: TabBarMetrics.closeButtonSize, height: TabBarMetrics.closeButtonSize)
.frame(width: accessorySlotSize, height: accessorySlotSize)
.background(
Circle()
.fill(
Expand All @@ -510,7 +519,7 @@ struct TabItemView: View {
.saturation(saturation)
}
}
.frame(width: TabBarMetrics.closeButtonSize, height: TabBarMetrics.closeButtonSize)
.frame(width: accessorySlotSize, height: accessorySlotSize)
.animation(.easeInOut(duration: TabBarMetrics.hoverDuration), value: isHovered)
.animation(.easeInOut(duration: TabBarMetrics.hoverDuration), value: isCloseHovered)
}
Expand Down
9 changes: 8 additions & 1 deletion Sources/Bonsplit/Public/BonsplitConfiguration.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,9 @@ extension BonsplitConfiguration {
/// Maximum width of a tab
public var tabMaxWidth: CGFloat

/// Font size for tab titles in the surface tab bar
public var tabTitleFontSize: CGFloat

/// Spacing between tabs
public var tabSpacing: CGFloat

Expand Down Expand Up @@ -198,13 +201,15 @@ extension BonsplitConfiguration {
public static let compact = Appearance(
tabBarHeight: 28,
tabMinWidth: 100,
tabMaxWidth: 160
tabMaxWidth: 160,
tabTitleFontSize: 11
)

public static let spacious = Appearance(
tabBarHeight: 38,
tabMinWidth: 160,
tabMaxWidth: 280,
tabTitleFontSize: 11,
tabSpacing: 2
)

Expand All @@ -214,6 +219,7 @@ extension BonsplitConfiguration {
tabBarHeight: CGFloat = 33,
tabMinWidth: CGFloat = 140,
tabMaxWidth: CGFloat = 220,
tabTitleFontSize: CGFloat = 11,
tabSpacing: CGFloat = 0,
minimumPaneWidth: CGFloat = 100,
minimumPaneHeight: CGFloat = 100,
Expand All @@ -228,6 +234,7 @@ extension BonsplitConfiguration {
self.tabBarHeight = tabBarHeight
self.tabMinWidth = tabMinWidth
self.tabMaxWidth = tabMaxWidth
self.tabTitleFontSize = tabTitleFontSize
self.tabSpacing = tabSpacing
self.minimumPaneWidth = minimumPaneWidth
self.minimumPaneHeight = minimumPaneHeight
Expand Down
Loading