diff --git a/ui/keyboard/emoji/renderer.js b/ui/keyboard/emoji/renderer.js
index a06cbc0..012b6c0 100644
--- a/ui/keyboard/emoji/renderer.js
+++ b/ui/keyboard/emoji/renderer.js
@@ -52,8 +52,13 @@ export function renderEmoji(container, categories, callbacks) {
 
   const tabs = [];
   for (const category of categories) {
-    if (category.emoji.length === 0) continue;
+    if (category.emoji.length === 0) {
+      continue;
+    }
 
+    // A <button> like the grid keys (.emoji-key): Servo centers and sizes the
+    // emoji glyph correctly in a <button>, but renders it small and bottom-left
+    // in a <div>, even with the same flex/text-align centering.
     const tab = document.createElement("button");
     tab.className = "emoji-tab";
     tab.textContent = category.icon;
@@ -71,7 +76,7 @@ export function renderEmoji(container, categories, callbacks) {
   // Backspace button
   const bsTab = document.createElement("div");
   bsTab.className = "emoji-tab backspace";
-  bsTab.textContent = "\u232b";
+  bsTab.textContent = "\u21e6";
   bar.appendChild(bsTab);
 
   wrapper.appendChild(bar);
@@ -94,7 +99,7 @@ export function renderEmoji(container, categories, callbacks) {
       }
     },
     {
-      root: gridContainer,
+      root: null,
       rootMargin: "0px 0px -80% 0px",
       threshold: 0,
     },
diff --git a/ui/keyboard/index.css b/ui/keyboard/index.css
index 5f375d4..8aa8ba5 100644
--- a/ui/keyboard/index.css
+++ b/ui/keyboard/index.css
@@ -86,7 +86,6 @@ body {
   border: none;
   border-radius: 8px;
   color: var(--kb-text);
-  font-family: var(--font-family-base);
   font-size: var(--font-size-lg);
   font-weight: 500;
   cursor: pointer;
@@ -166,23 +165,37 @@ body {
 
 /* --- Emoji keyboard --- */
 
+/*
+ * The keyboard is an embedded <webview>, and Servo can only touch-pan an
+ * embedded webview's root scroll node: a scroll gesture's point is in the
+ * webview's local coordinates and never hit-tests the shared scene, so a
+ * nested overflow:scroll container is never resolved (scrolling falls back to
+ * scroll_root_pipeline in webview_renderer.rs). So in emoji mode we let the
+ * document grow past the 220px keyboard viewport and scroll the root itself,
+ * with the category bar pinned to the bottom.
+ */
+body.emoji-mode {
+  display: block;
+  height: auto;
+  min-height: 100%;
+  padding: 0;
+  scrollbar-width: thin;
+  scrollbar-color: var(--kb-key) transparent;
+}
+
+body.emoji-mode .keyboard {
+  display: block;
+  height: auto;
+}
+
 .emoji-keyboard {
-  display: flex;
-  flex-direction: column;
   max-width: 600px;
   width: 100%;
-  flex: 1;
-  min-height: 0;
-  overflow: hidden;
+  margin: 0 auto;
 }
 
 .emoji-grid-container {
-  flex: 1;
-  min-height: 0;
-  overflow: scroll;
-  padding: 0 4px;
-  scrollbar-width: thin;
-  scrollbar-color: var(--kb-key) transparent;
+  padding: 0 4px 60px;
 }
 
 .emoji-category-header {
@@ -197,7 +210,8 @@ body {
   gap: 2px;
 }
 
-.emoji-key {
+.emoji-key,
+.emoji-tab {
   height: 36px;
   background: none;
   border: none;
@@ -216,38 +230,33 @@ body {
 }
 
 .emoji-category-bar {
-  display: flex;
+  position: sticky;
+  bottom: 0;
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
   gap: 2px;
   padding: var(--spacing-xs);
   border-top: 1px solid var(--kb-separator);
   align-items: center;
+  background: var(--kb-bg);
+  z-index: 1;
 }
 
 .emoji-tab {
-  flex: 1;
-  height: 30px;
-  background: none;
-  border: none;
-  border-radius: 6px;
-  font-size: var(--font-size-lg);
-  color: var(--kb-text);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  opacity: 0.5;
-  transition: opacity 0.15s var(--ease-out);
+  width: 30px;
+  margin: 0 auto;
+  transition: background-color 0.15s var(--ease-out);
 }
 
 .emoji-tab.active {
-  opacity: 1;
   background: var(--kb-key);
 }
 
 .emoji-tab.abc,
 .emoji-tab.backspace {
   transition: background-color 0.05s var(--ease-out);
+  /* text labels, not emoji: keep them at a readable label size, not 2xl */
   font-size: var(--font-size-lg);
   font-weight: var(--font-weight-bold);
 }
diff --git a/ui/keyboard/index.js b/ui/keyboard/index.js
index 33f0fe9..d36fdd5 100644
--- a/ui/keyboard/index.js
+++ b/ui/keyboard/index.js
@@ -125,6 +125,7 @@ function setInputType(inputType) {
 
 function enterEmojiMode() {
   mode = "emoji";
+  document.body.classList.add("emoji-mode");
   emojiCleanup = renderEmoji(container, emojiCategories, {
     onEmoji: (emoji) => keyboardAPI.sendCharacter(emoji),
     onClose: () => exitEmojiMode(),
@@ -137,6 +138,7 @@ function exitEmojiMode() {
     emojiCleanup();
     emojiCleanup = null;
   }
+  document.body.classList.remove("emoji-mode");
   mode = "text";
   render();
 }
diff --git a/ui/keyboard/layouts/shared.js b/ui/keyboard/layouts/shared.js
index 7802720..a244a6b 100644
--- a/ui/keyboard/layouts/shared.js
+++ b/ui/keyboard/layouts/shared.js
@@ -27,7 +27,7 @@ export const SHIFT_FROM_CAPS = {
 };
 
 export const BACKSPACE = {
-  label: "\u232b",
+  label: "\u21e6",
   action: "backspace",
   key: "Backspace",
   code: "Backspace",