Apply Monokai Pro Ristretto theme and fix canvas scrollbar gutter

pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "textual-webterm"
-version = "0.5.1"
+version = "0.5.2"
 description = "Serve terminal sessions over the web"
 authors = ["Will McGugan <will@textualize.io>"]
 license = "MIT"

src/textual_webterm/static/js/terminal.ts

@@ -16,6 +16,30 @@ const DEFAULT_FONT_FAMILY =
 
 /** Predefined terminal themes */
 const THEMES: Record<string, ITheme> = {
+  // Monokai Pro Ristretto - default theme
+  monokai: {
+    background: "#2d2a2e",
+    foreground: "#fcfcfa",
+    cursor: "#fcfcfa",
+    cursorAccent: "#2d2a2e",
+    selection: "#5b595c",
+    black: "#403e41",
+    red: "#ff6188",
+    green: "#a9dc76",
+    yellow: "#ffd866",
+    blue: "#fc9867",
+    magenta: "#ab9df2",
+    cyan: "#78dce8",
+    white: "#fcfcfa",
+    brightBlack: "#727072",
+    brightRed: "#ff6188",
+    brightGreen: "#a9dc76",
+    brightYellow: "#ffd866",
+    brightBlue: "#fc9867",
+    brightMagenta: "#ab9df2",
+    brightCyan: "#78dce8",
+    brightWhite: "#fcfcfa",
+  },
   // Dark themes
   dark: {
     background: "#1e1e1e",
@@ -297,7 +321,7 @@ class WebTerminal {
       scrollback: config.scrollback ?? 1000,
       cursorBlink: true,
       cursorStyle: "block",
-      theme: config.theme ?? THEMES.dark,
+      theme: config.theme ?? THEMES.monokai,
       wasmPath,
     };
 

src/textual_webterm/static/monospace.css

@@ -13,8 +13,8 @@ We avoid external font fetching (e.g. Google Fonts) to keep local server self-co
 }
 
 html, body {
-  height: 100%;
-  width: 100%;
+  height: 100vh;
+  width: 100vw;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -22,6 +22,12 @@ html, body {
   font-family: var(--textual-webterm-mono);
 }
 
+/* Prevent scrollbar gutter space reservation */
+html {
+  scrollbar-gutter: auto;
+  overflow: hidden;
+}
+
 /* Terminal container - works with ghostty-web canvas renderer */
 .textual-terminal {
   width: 100%;