Fix DrawOnlyWidget rendering problems

context.go

@@ -54,6 +54,9 @@ type Context struct {
 	screenWidth  int
 	screenHeight int
 
+	// inLayoutCallback is true during a widget layout callback to block nested widgets.
+	inLayoutCallback bool
+
 	err error
 }
 

draw.go

@@ -106,7 +106,7 @@ func (c *Context) draw(screen *ebiten.Image) {
 	for cmd := range c.commands() {
 		switch cmd.typ {
 		case commandRect:
-			vector.DrawFilledRect(
+			vector.FillRect(
 				target,
 				float32(cmd.rect.rect.Min.X*scale),
 				float32(cmd.rect.rect.Min.Y*scale),
@@ -205,6 +205,15 @@ func (c *Context) drawIcon(icon icon, rect image.Rectangle, color color.Color) {
 // DrawOnlyWidget adds a widget that only draws the given function without user interaction.
 func (c *Context) DrawOnlyWidget(f func(screen *ebiten.Image)) {
 	_ = c.wrapEventHandlerAndError(func() (EventHandler, error) {
+		// If we're inside a layout callback like GridCell we just draw instead of putting it in a nested widget
+		if c.inLayoutCallback {
+			c.setClip(c.clipRect())
+			defer c.setClip(unclippedRect)
+			cmd := c.appendCommand(commandDraw)
+			cmd.draw.f = f
+			return nil, nil
+		}
+
 		_, _ = c.widget(widgetID{}, 0, nil, nil, func(bounds image.Rectangle) {
 			c.setClip(c.clipRect())
 			defer c.setClip(unclippedRect)

widget.go

@@ -139,7 +139,9 @@ func (c *Context) widget(id widgetID, opt option, layout func(bounds image.Recta
 				err = err2
 			}
 		}()
+		c.inLayoutCallback = true
 		layout(bounds)
+		c.inLayoutCallback = false
 	}
 
 	wasFocused := c.handleInputForWidget(id, bounds, opt)
@@ -148,7 +150,7 @@ func (c *Context) widget(id widgetID, opt option, layout func(bounds image.Recta
 		e = handleInput(bounds, wasFocused)
 	}
 	// Handling input is still needed even if the widget is out of bounds, especially for Header.
-	if !c.currentContainer().layout.BodyBounds.Overlaps(bounds) {
+	if !c.clipRect().Overlaps(bounds) {
 		return e, nil
 	}