Add 5px margin around StatusBar and BottomBar to avoid macOS corner clipping

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>

internal/editor/state.go

@@ -25,24 +25,27 @@ func NewState(screenWidth, screenHeight unit.Dp) *State {
 // EditorLayout computes regions for the editor page.
 // It takes screen dimensions and returns []Element.
 func EditorLayout(screenWidth, screenHeight unit.Dp) []ui.Element {
+	// Margin to avoid clipping on macOS round corners
+	margin := unit.Dp(5)
+
 	// Compute StatusBar region
 	// Line 1: filename (24 DP)
 	// Line 2: icons (24 DP)
 	statusBarHeight := unit.Dp(48)
 	statusBarRegion := ui.Region{
-		X: 0,
-		Y: 0,
-		W: screenWidth,
+		X: margin,
+		Y: margin,
+		W: screenWidth - margin*2,
 		H: statusBarHeight,
 	}
 
 	// Compute BottomBar region (fixed height, at bottom of screen)
 	bottomBarHeight := unit.Dp(24)
-	bottomBarY := screenHeight - bottomBarHeight
+	bottomBarY := screenHeight - margin - bottomBarHeight
 	bottomBarRegion := ui.Region{
-		X: 0,
+		X: margin,
 		Y: bottomBarY,
-		W: screenWidth,
+		W: screenWidth - margin*2,
 		H: bottomBarHeight,
 	}
 

internal/ui/render.go

@@ -146,25 +146,22 @@ func (r *Renderer) drawBottomBar(gtx layout.Context, bb BottomBar) {
 	}.Push(gtx.Ops)
 
 	// Left: Cursor position
-	{
-		cursorX := reg.X + unit.Dp(8)
-		op.Offset(image.Point{X: int(cursorX), Y: int(reg.Y)}).Push(gtx.Ops).Pop()
-		material.Label(th, r.theme.FontSize, bb.CursorPos).Layout(gtx)
-	}
+	cursorX := reg.X + unit.Dp(8)
+	call1 := op.Offset(image.Point{X: int(cursorX), Y: int(reg.Y)}).Push(gtx.Ops)
+	material.Label(th, r.theme.FontSize, bb.CursorPos).Layout(gtx)
+	call1.Pop()
 
 	// Center: Byte position
-	{
-		byteX := reg.X + reg.W/2 - unit.Dp(60) // approximate center
-		op.Offset(image.Point{X: int(byteX), Y: int(reg.Y)}).Push(gtx.Ops).Pop()
-		material.Label(th, r.theme.FontSize, bb.BytePos).Layout(gtx)
-	}
+	byteX := reg.X + reg.W/2 - unit.Dp(60) // approximate center
+	call2 := op.Offset(image.Point{X: int(byteX), Y: int(reg.Y)}).Push(gtx.Ops)
+	material.Label(th, r.theme.FontSize, bb.BytePos).Layout(gtx)
+	call2.Pop()
 
 	// Right: Word wrap button
-	{
-		wordWrapX := reg.X + reg.W - unit.Dp(120)
-		op.Offset(image.Point{X: int(wordWrapX), Y: int(reg.Y)}).Push(gtx.Ops).Pop()
-		material.Label(th, r.theme.FontSize, "[Word Wrap: "+boolToString(bb.WordWrap)+"]").Layout(gtx)
-	}
+	wordWrapX := reg.X + reg.W - unit.Dp(120)
+	call3 := op.Offset(image.Point{X: int(wordWrapX), Y: int(reg.Y)}).Push(gtx.Ops)
+	material.Label(th, r.theme.FontSize, "[Word Wrap: "+boolToString(bb.WordWrap)+"]").Layout(gtx)
+	call3.Pop()
 
 	c.Pop()
 }