webui: add missing codicon font reference to mobile app shell
The mobile diff view uses sketch-monaco-view component which requires
the codicon font for Monaco editor icons. Added the same @font-face
declaration that exists in sketch-app-shell.css to mobile-app-shell.css.
This ensures Monaco editor icons display properly in the mobile interface
when viewing diffs, fixing missing codicon glyphs that would otherwise
appear as empty squares or missing characters.
The font-face declaration must be in global CSS rather than component-
scoped styles due to Chrome's shadow DOM font loading limitations.
Co-Authored-By: sketch <hello@sketch.dev>
Change-ID: secee77cd7912efd9k
diff --git a/webui/src/mobile-app-shell.css b/webui/src/mobile-app-shell.css
index 9196b31..a229ef0 100644
--- a/webui/src/mobile-app-shell.css
+++ b/webui/src/mobile-app-shell.css
@@ -21,6 +21,19 @@
min-height: -webkit-fill-available;
}
+/*
+ * Import Monaco editor's Codicon font - this is critical for icons
+ * IMPORTANT: This font-face declaration MUST remain in global CSS.
+ * Chrome does not apply @font-face rules properly when they're inside shadow DOM.
+ * Do not move this to the sketch-monaco-view component despite it being used there.
+ */
+@font-face {
+ font-family: "codicon";
+ font-display: block;
+ src: url("./monaco/min/vs/base/browser/ui/codicons/codicon/codicon.ttf")
+ format("truetype");
+}
+
/* Mobile viewport optimizations */
@media screen and (max-width: 768px) {
html {