Spaces:

build-small-hackathon
/

tiny-army

Running

polats Claude Opus 4.8 (1M context) commited on 6 days ago

Commit

2a6b00d

1 Parent(s): f29c07a

Space: link shared sidebar.css unscoped via head (Gradio css_paths scopes selectors)

Gradio prefixes css_paths/css= selectors with .gradio-container .contain, which
breaks body.tac-collapsed and .gradio-container rules (the slide + content-push).
Inject the shared stylesheet as a plain <link> in head instead — applied
verbatim, identical to the React app's source.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Files changed (1) hide show

app.py +8 -4

app.py CHANGED Viewed

@@ -23,9 +23,14 @@ _manifest = json.load(open(os.path.join(WEB, "assets", "characters.json")))
 CHARACTERS = [(c["name"], c["slug"]) for p in _manifest["packs"] for c in p["characters"]]
 ANIMS = ["idle", "walk", "attack", "dmg", "die"]
-HEAD = ('<script type="module" src="/web/tiny.js"></script>'
         '<script src="/web/shell/sidebar.js"></script>')
-SIDEBAR_CSS = os.path.join(WEB, "shell", "sidebar.css")
 STAGE = "height:56vh;border:1px solid #20262e;border-radius:12px;overflow:hidden;background:#0b0e12"
@@ -97,8 +102,7 @@ fastapi_app.mount("/web", StaticFiles(directory=WEB), name="web")
 # NOTE: serve sprite assets at /sprites, NOT /assets — Gradio serves its own UI
 # bundle from /assets, and mounting there shadows it (breaks the whole UI).
 fastapi_app.mount("/sprites", StaticFiles(directory=os.path.join(WEB, "assets")), name="sprites")
-app = gr.mount_gradio_app(fastapi_app, demo, path="/", head=HEAD,
-                          css_paths=[SIDEBAR_CSS], theme=gr.themes.Soft())
 if __name__ == "__main__":

 CHARACTERS = [(c["name"], c["slug"]) for p in _manifest["packs"] for c in p["characters"]]
 ANIMS = ["idle", "walk", "attack", "dmg", "die"]
+# NOTE: link sidebar.css here (head) rather than via mount's css_paths — Gradio
+# auto-scopes css_paths/css= selectors with a `.gradio-container .contain` prefix,
+# which breaks rules that target <body> or .gradio-container itself (our slide +
+# content-push). A plain <link> is injected unscoped, so the shared file applies
+# verbatim — same stylesheet the React app uses.
+HEAD = ('<link rel="stylesheet" href="/web/shell/sidebar.css">'
+        '<script type="module" src="/web/tiny.js"></script>'
         '<script src="/web/shell/sidebar.js"></script>')
 STAGE = "height:56vh;border:1px solid #20262e;border-radius:12px;overflow:hidden;background:#0b0e12"
 # NOTE: serve sprite assets at /sprites, NOT /assets — Gradio serves its own UI
 # bundle from /assets, and mounting there shadows it (breaks the whole UI).
 fastapi_app.mount("/sprites", StaticFiles(directory=os.path.join(WEB, "assets")), name="sprites")
+app = gr.mount_gradio_app(fastapi_app, demo, path="/", head=HEAD, theme=gr.themes.Soft())
 if __name__ == "__main__":