How to add padding to WGLMakie figure with resize_to = :body

Specific Domains Visualization
1

when i use resize_to = :body when activating WGLMakie so that the figure fills the browser window no matter what the size, a DOM.div element i have at the bottom gets clipped. like this (“hi”) in the lower left:

Screenshot 2026-01-14 at 12.17.12 PM
Screenshot 2026-01-14 at 12.17.12 PM1332×1256 114 KB

is there a way to add padding so that it is fully visible? or somehow otherwise modify the code (see below) to make it work. this is on a mac, in a fresh temp environment, and using the latest versions of everything. thanks!

using Bonito, Sockets, WGLMakie

WGLMakie.activate!(; resize_to = :body)
app = App(threaded=true) do session::Session, request::Bonito.HTTP.Request
    fig = Figure()
    Box(fig[1, 1], color = (:red, 0.2), strokewidth = 0)
    status_wg = Observable(DOM.div("hi"))
    return DOM.div(fig, status_wg)
end
server = Bonito.Server(app, string(getipaddr()), 8080)

julia> versioninfo()
Julia Version 1.12.4
Commit 01a2eadb047 (2026-01-06 16:56 UTC)
Build Info:
  Official https://julialang.org release
Platform Info:
  OS: macOS (arm64-apple-darwin24.0.0)
  CPU: 12 × Apple M2 Max
  WORD_SIZE: 64
  LLVM: libLLVM-18.1.7 (ORCJIT, apple-m2)
  GC: Built with stock GC
Threads: 1 default, 1 interactive, 1 GC (on 8 virtual cores)
Environment:
  JULIA_PROJECT = @.
  JULIA_EDITOR = vi

(jl_pKDoQt) pkg> st
Status `~/.tmp/jl_pKDoQt/Project.toml`
  [824d6782] Bonito v4.2.0
  [276b4fcb] WGLMakie v0.13.8
  [6462fe0b] Sockets v1.11.0
2

You should put it into a div with padding and then use resize_to=:parent

3

thanks for the quick reply!

you mean like this?

using Bonito, Sockets, WGLMakie

WGLMakie.activate!(; resize_to = :parent)
app = App(threaded=true) do session::Session, request::Bonito.HTTP.Request
    fig = Figure()
    Box(fig[1, 1], color = (:red, 0.2), strokewidth = 0)
    status_wg = Observable(DOM.div("hi"))
    return DOM.div(fig, status_wg,
            style = Styles("padding-bottom" => "50px"))
end
server = Bonito.Server(app, string(getipaddr()), 8080)

i get really weird behavior. it starts out nicely padded, and then with every resize of the browser window the padding red box gets taller and taller eventually pushing the “hi” text way off the bottom of the screen.

4

same weird behavior occurs even without the padding. seems to be caused by :parent.