ui: Fix background color of exit node status. (#75)

Prior to https://github.com/tailscale/tailscale-android/pull/73/,
the exit node status pane was set to a background color using:
    paint.Fill(gtx.Ops, bg)

paint.Fill() is documented to fill the entire clipped area.
It assumes that one has already applied a clip area... but
no clip area had been set in this code path.

As far as I can tell, that this worked prior to pull #73
was a bug, something had a side-effect of setting a clipping
rectangle.

We updated to the head of the Gio repo, which apparently fixed
that bug. After pull #73, the paint.Fill() painted the entire
app window.

Fix this using a stacked layout. A color filled widget is the
lower layer, and will expand to the size of the widget sitting
atop of it.

Fixes https://github.com/tailscale/tailscale/issues/6873

Signed-off-by: Denton Gentry <dgentry@tailscale.com>

Signed-off-by: Denton Gentry <dgentry@tailscale.com>

cmd/tailscale/ui.go

@@ -668,35 +668,48 @@ func (ui *UI) layoutExitStatus(gtx layout.Context, state *BackendState) layout.D
 		text = "Using exit node"
 		bg = rgb(0x338b51)
 	}
-	paint.Fill(gtx.Ops, bg)
 	return material.Clickable(gtx, &ui.openExitDialog, func(gtx C) D {
 		gtx.Constraints.Min.X = gtx.Constraints.Max.X
-		return layout.Inset{
+		return layout.Stack{}.Layout(gtx,
-			Top:    unit.Dp(12),
+			layout.Expanded(func(gtx layout.Context) layout.Dimensions {
-			Bottom: unit.Dp(12),
+				sz := image.Point{
-			Right:  unit.Dp(24),
+					X: gtx.Constraints.Min.X,
-			Left:   unit.Dp(24),
+					Y: gtx.Constraints.Min.Y,
-		}.Layout(gtx, func(gtx C) D {
+				}
-			return layout.Flex{Alignment: layout.Middle}.Layout(gtx,
+				defer clip.Rect(image.Rectangle{Max: sz}).Push(gtx.Ops).Pop()
-				layout.Flexed(1, func(gtx C) D {
+				paint.ColorOp{Color: bg}.Add(gtx.Ops)
-					return layout.Flex{Axis: layout.Vertical}.Layout(gtx,
+				paint.PaintOp{}.Add(gtx.Ops)
-						layout.Rigid(func(gtx C) D {
+				return layout.Dimensions{Size: sz}
-							lbl := material.Body2(ui.theme, text)
+			}),
-							lbl.Color = rgb(white)
+			layout.Stacked(func(gtx layout.Context) layout.Dimensions {
-							return lbl.Layout(gtx)
+				return layout.Inset{
+					Top:    unit.Dp(12),
+					Bottom: unit.Dp(12),
+					Right:  unit.Dp(24),
+					Left:   unit.Dp(24),
+				}.Layout(gtx, func(gtx C) D {
+					return layout.Flex{Alignment: layout.Middle}.Layout(gtx,
+						layout.Flexed(1, func(gtx C) D {
+							return layout.Flex{Axis: layout.Vertical}.Layout(gtx,
+								layout.Rigid(func(gtx C) D {
+									lbl := material.Body2(ui.theme, text)
+									lbl.Color = rgb(white)
+									return lbl.Layout(gtx)
+								}),
+								layout.Rigid(func(gtx C) D {
+									node := material.Body2(ui.theme, state.Exit.Label)
+									node.Color = argb(0x88ffffff)
+									return node.Layout(gtx)
+								}),
+							)
 						}),
 						layout.Rigid(func(gtx C) D {
-							node := material.Body2(ui.theme, state.Exit.Label)
+							return ui.icons.exitStatus.Layout(gtx, rgb(white))
-							node.Color = argb(0x88ffffff)
-							return node.Layout(gtx)
 						}),
 					)
-				}),
+				})
-				layout.Rigid(func(gtx C) D {
+			}),
-					return ui.icons.exitStatus.Layout(gtx, rgb(white))
+		)
-				}),
-			)
-		})
 	})
 }