From ea37d02e37c2450d8fa0355eb580efde47682df4 Mon Sep 17 00:00:00 2001
From: Richard Tibbles <richard@learningequality.org>
Date: Sat, 18 Jul 2026 14:54:29 -0700
Subject: [PATCH 1/4] Add shared ViewerToolbar and EmbeddedReadCard components

ViewerToolbar is a reusable viewer chrome bar built on BaseToolbar, for
adoption across the content viewers. EmbeddedReadCard frames embedded
read previews in a bordered card. SafeHTML now wraps embedded
ContentViewers in a layout container so they render consistently within
prose.
---
 .../components/EmbeddedReadCard.vue           | 133 ++++++++++++++++++
 .../SafeHTML/__tests__/SafeHTML.spec.js       |  14 ++
 .../components/SafeHTML/index.js              |   4 +
 .../components/SafeHTML/style.scss            |   6 +
 .../components/ViewerToolbar.vue              | 109 ++++++++++++++
 .../__tests__/EmbeddedReadCard.spec.js        |  76 ++++++++++
 .../__tests__/ViewerToolbar.spec.js           |  62 ++++++++
 7 files changed, 404 insertions(+)
 create mode 100644 packages/kolibri-common/components/EmbeddedReadCard.vue
 create mode 100644 packages/kolibri-common/components/ViewerToolbar.vue
 create mode 100644 packages/kolibri-common/components/__tests__/EmbeddedReadCard.spec.js
 create mode 100644 packages/kolibri-common/components/__tests__/ViewerToolbar.spec.js

diff --git a/packages/kolibri-common/components/EmbeddedReadCard.vue b/packages/kolibri-common/components/EmbeddedReadCard.vue
new file mode 100644
index 00000000000..1f7ac6bb255
--- /dev/null
+++ b/packages/kolibri-common/components/EmbeddedReadCard.vue
@@ -0,0 +1,133 @@
+<template>
+
+  <!-- role, tabindex, aria-label and keyboard handlers are set together with
+       the click handler when active; the rule can't see through the ternary role -->
+  <!-- eslint-disable vuejs-accessibility/no-static-element-interactions -->
+  <div
+    :class="active ? 'embedded-read-card' : 'embedded-read-card-passthrough'"
+    :role="active ? 'button' : null"
+    :tabindex="active ? 0 : null"
+    :aria-label="active ? readLabel : null"
+    :style="active ? cardStyle : null"
+    @click="emitRead"
+    @keydown.enter="emitRead"
+    @keydown.space="onSpace"
+  >
+    <div
+      :class="active ? 'embedded-read-card-content' : 'embedded-read-card-content-passthrough'"
+      :inert="active"
+    >
+      <slot></slot>
+    </div>
+    <span
+      v-if="active"
+      class="embedded-read-card-pill"
+      :style="pillStyle"
+    >
+      {{ readLabel }}
+    </span>
+  </div>
+  <!-- eslint-enable vuejs-accessibility/no-static-element-interactions -->
+
+</template>
+
+
+<script>
+
+  import { computed } from 'vue';
+  import { themePalette, themeTokens } from 'kolibri-design-system/lib/styles/theme';
+  import { coreString } from 'kolibri/uiText/commonCoreStrings';
+
+  /**
+   * Wraps a content viewer so it renders as a clickable preview card on a
+   * mobile-embedded viewport. When `active` is true, the card displays a
+   * grey-bordered frame around the wrapped viewer with a "READ" pill at the
+   * bottom; tapping anywhere on the card emits `read` (used by the viewer to
+   * toggle fullscreen). When `active` is false, the wrapper is transparent
+   * (a bare block) and the wrapped content renders unchanged.
+   *
+   * The DOM structure stays stable between states so the slot content is
+   * never remounted on toggle.
+   *
+   * Content inside the card is clipped to the card's bounds and marked
+   * `inert`, so the entire card is a single target for pointer, keyboard and
+   * assistive technology alike.
+   */
+  export default {
+    name: 'EmbeddedReadCard',
+    setup(props, { emit }) {
+      const readLabel = computed(() => coreString('read'));
+      const cardStyle = computed(() => ({
+        backgroundColor: themePalette().grey.v_100,
+        border: `1px solid ${themeTokens().fineLine}`,
+        borderRadius: '4px',
+      }));
+      const pillStyle = computed(() => ({
+        backgroundColor: themeTokens().primary,
+        color: themeTokens().textInverted,
+      }));
+
+      function emitRead() {
+        if (props.active) emit('read');
+      }
+
+      function onSpace(event) {
+        if (!props.active) return;
+        event.preventDefault();
+        emit('read');
+      }
+
+      return { readLabel, cardStyle, pillStyle, emitRead, onSpace };
+    },
+    props: {
+      active: {
+        type: Boolean,
+        required: true,
+      },
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  .embedded-read-card {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 16px;
+    cursor: pointer;
+  }
+
+  // The root carries the consumer's class (e.g. `.content-viewer`), so it must
+  // stay a real box for that sizing to apply. Flex column, not block, so a taller
+  // viewer shrinks to a `max-height`-only consumer instead of overflowing it.
+  .embedded-read-card-passthrough {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .embedded-read-card-content-passthrough {
+    display: contents;
+  }
+
+  .embedded-read-card-content {
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+    // Pointer fallback for browsers without `inert`, which does this itself.
+    pointer-events: none;
+  }
+
+  .embedded-read-card-pill {
+    align-self: center;
+    padding: 8px 16px;
+    font-size: 0.875rem;
+    font-weight: bold;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    border-radius: 2px;
+  }
+
+</style>
diff --git a/packages/kolibri-common/components/SafeHTML/__tests__/SafeHTML.spec.js b/packages/kolibri-common/components/SafeHTML/__tests__/SafeHTML.spec.js
index 550d8d72025..27ad58e512e 100644
--- a/packages/kolibri-common/components/SafeHTML/__tests__/SafeHTML.spec.js
+++ b/packages/kolibri-common/components/SafeHTML/__tests__/SafeHTML.spec.js
@@ -377,6 +377,20 @@ describe('SafeHTML', () => {
       expect(container.querySelector('video')).not.toBeInTheDocument();
     });
 
+    it('wraps the ContentViewer in an embedded layout container', () => {
+      kolibri.canHandleElement = jest.fn().mockReturnValue(true);
+
+      const { container } = render(SafeHTML, {
+        props: {
+          html: '<video src="video.mp4"></video>',
+        },
+      });
+
+      expect(
+        container.querySelector('.embedded-content-viewer > [data-testid="content-viewer"]'),
+      ).toBeInTheDocument();
+    });
+
     it('renders original element when canHandleElement returns false', () => {
       kolibri.canHandleElement = jest.fn().mockReturnValue(false);
 
diff --git a/packages/kolibri-common/components/SafeHTML/index.js b/packages/kolibri-common/components/SafeHTML/index.js
index 22a6aac080c..7c90352f47d 100644
--- a/packages/kolibri-common/components/SafeHTML/index.js
+++ b/packages/kolibri-common/components/SafeHTML/index.js
@@ -162,6 +162,10 @@ export function createSafeHTML(customComponents = {}, { allowedOrigins } = {}) {
               },
               mapChildren(node.childNodes),
             );
+            // Wrap embedded ContentViewers in a layout container
+            if (component === 'ContentViewer') {
+              return h('div', { class: 'embedded-content-viewer' }, [childVNode]);
+            }
             return childVNode;
           }
 
diff --git a/packages/kolibri-common/components/SafeHTML/style.scss b/packages/kolibri-common/components/SafeHTML/style.scss
index 5c0b04ba676..84a1a452577 100644
--- a/packages/kolibri-common/components/SafeHTML/style.scss
+++ b/packages/kolibri-common/components/SafeHTML/style.scss
@@ -172,6 +172,12 @@ img.safe-html {
   opacity: 1;
 }
 
+.embedded-content-viewer {
+  max-width: 960px;
+  margin: 40px auto;
+  overflow: hidden;
+}
+
 math.safe-html {
   @include text-style(normal, 32px, 130%);
 
diff --git a/packages/kolibri-common/components/ViewerToolbar.vue b/packages/kolibri-common/components/ViewerToolbar.vue
new file mode 100644
index 00000000000..203b78a63fe
--- /dev/null
+++ b/packages/kolibri-common/components/ViewerToolbar.vue
@@ -0,0 +1,109 @@
+<template>
+
+  <BaseToolbar
+    class="viewer-toolbar"
+    :style="{ backgroundColor: $themePalette.grey.v_100 }"
+  >
+    <div class="toolbar-layout">
+      <div class="toolbar-left">
+        <slot name="left"></slot>
+      </div>
+      <div class="toolbar-center">
+        <slot name="center"></slot>
+      </div>
+      <KButtonGroup class="toolbar-right">
+        <slot name="right"></slot>
+        <KIconButton
+          :icon="isInFullscreen ? 'fullscreen_exit' : 'fullscreen'"
+          :ariaLabel="isInFullscreen ? exitFullscreen$() : enterFullscreen$()"
+          :tooltip="isInFullscreen ? exitFullscreen$() : enterFullscreen$()"
+          @click="$emit('toggleFullscreen')"
+        />
+      </KButtonGroup>
+    </div>
+  </BaseToolbar>
+
+</template>
+
+
+<script>
+
+  import { createTranslator } from 'kolibri/utils/i18n';
+  import BaseToolbar from 'kolibri-common/components/BaseToolbar';
+
+  export const viewerToolbarStrings = createTranslator('ViewerToolbar', {
+    exitFullscreen: {
+      message: 'Exit fullscreen',
+      context: 'Button tooltip to exit fullscreen view in a content viewer.',
+    },
+    enterFullscreen: {
+      message: 'Enter fullscreen',
+      context: 'Button tooltip to enter fullscreen view in a content viewer.',
+    },
+  });
+
+  export default {
+    name: 'ViewerToolbar',
+    components: {
+      BaseToolbar,
+    },
+    setup() {
+      const { exitFullscreen$, enterFullscreen$ } = viewerToolbarStrings;
+      return { exitFullscreen$, enterFullscreen$ };
+    },
+    props: {
+      isInFullscreen: {
+        type: Boolean,
+        required: true,
+      },
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  @import '~kolibri-design-system/lib/styles/definitions';
+
+  // Dimensions and elevation are scoped here rather than on the shared
+  // BaseToolbar, whose other consumer is sized for its own layout.
+  .base-toolbar.viewer-toolbar {
+    z-index: 1;
+    min-height: 48px;
+    padding: 0 16px;
+
+    @extend %dropshadow-2dp;
+  }
+
+  .toolbar-layout {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    justify-content: space-between;
+    min-height: inherit;
+  }
+
+  .toolbar-left {
+    display: flex;
+    flex-shrink: 0;
+    gap: 4px;
+    align-items: center;
+  }
+
+  .toolbar-center {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+  }
+
+  .toolbar-right {
+    display: flex;
+    flex-shrink: 0;
+    gap: 4px;
+    align-items: center;
+  }
+
+</style>
diff --git a/packages/kolibri-common/components/__tests__/EmbeddedReadCard.spec.js b/packages/kolibri-common/components/__tests__/EmbeddedReadCard.spec.js
new file mode 100644
index 00000000000..8e399d6d4c2
--- /dev/null
+++ b/packages/kolibri-common/components/__tests__/EmbeddedReadCard.spec.js
@@ -0,0 +1,76 @@
+import { fireEvent, render, screen } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import { coreString } from 'kolibri/uiText/commonCoreStrings';
+import EmbeddedReadCard from '../EmbeddedReadCard';
+
+function renderCard(props = {}) {
+  return render(EmbeddedReadCard, {
+    props: {
+      active: false,
+      ...props,
+    },
+    slots: {
+      default: '<span data-testid="viewer">Viewer</span>',
+    },
+  });
+}
+
+describe('EmbeddedReadCard', () => {
+  it('renders its slot content when inactive', () => {
+    renderCard();
+    screen.getByTestId('viewer');
+  });
+
+  it('renders its slot content when active', () => {
+    renderCard({ active: true });
+    screen.getByTestId('viewer');
+  });
+
+  it('exposes no button affordance when inactive', () => {
+    renderCard();
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+  });
+
+  it('exposes the card as a labelled button when active', () => {
+    renderCard({ active: true });
+    screen.getByRole('button', { name: coreString('read') });
+  });
+
+  it('emits read when the active card is clicked', async () => {
+    const { emitted } = renderCard({ active: true });
+    await userEvent.click(screen.getByRole('button', { name: coreString('read') }));
+    expect(emitted().read).toBeTruthy();
+  });
+
+  it('does not emit read when the inactive card is clicked', async () => {
+    const { container, emitted } = renderCard();
+    await fireEvent.click(container.firstChild);
+    expect(emitted().read).toBeUndefined();
+  });
+
+  it('emits read on enter and space when active', async () => {
+    const { emitted } = renderCard({ active: true });
+    const card = screen.getByRole('button', { name: coreString('read') });
+    card.focus();
+    await userEvent.keyboard('{enter}');
+    await userEvent.keyboard(' ');
+    expect(emitted().read).toHaveLength(2);
+  });
+
+  it('takes the wrapped content out of the tab order and a11y tree when active', () => {
+    renderCard({ active: true });
+    expect(screen.getByTestId('viewer').parentElement).toHaveAttribute('inert');
+  });
+
+  it('leaves the wrapped content interactive when inactive', () => {
+    renderCard();
+    expect(screen.getByTestId('viewer').parentElement).not.toHaveAttribute('inert');
+  });
+
+  it('does not emit read on enter or space when inactive', async () => {
+    const { container, emitted } = renderCard();
+    await fireEvent.keyDown(container.firstChild, { key: 'Enter' });
+    await fireEvent.keyDown(container.firstChild, { key: ' ' });
+    expect(emitted().read).toBeUndefined();
+  });
+});
diff --git a/packages/kolibri-common/components/__tests__/ViewerToolbar.spec.js b/packages/kolibri-common/components/__tests__/ViewerToolbar.spec.js
new file mode 100644
index 00000000000..24734a47b7c
--- /dev/null
+++ b/packages/kolibri-common/components/__tests__/ViewerToolbar.spec.js
@@ -0,0 +1,62 @@
+import { render, screen, within } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import ViewerToolbar, { viewerToolbarStrings } from '../ViewerToolbar';
+
+const { enterFullscreen$, exitFullscreen$ } = viewerToolbarStrings;
+
+function renderToolbar(props = {}, slots = {}) {
+  return render(ViewerToolbar, {
+    props: {
+      isInFullscreen: false,
+      ...props,
+    },
+    slots,
+  });
+}
+
+describe('ViewerToolbar', () => {
+  it('should mount', () => {
+    const { container } = renderToolbar();
+    expect(container.firstChild).toBeTruthy();
+  });
+
+  it('shows enter fullscreen button when not in fullscreen', () => {
+    renderToolbar({ isInFullscreen: false });
+    screen.getByRole('button', { name: enterFullscreen$() });
+  });
+
+  it('shows exit fullscreen button when in fullscreen', () => {
+    renderToolbar({ isInFullscreen: true });
+    screen.getByRole('button', { name: exitFullscreen$() });
+  });
+
+  it('emits toggleFullscreen when fullscreen button is clicked', async () => {
+    const { emitted } = renderToolbar();
+    await userEvent.click(screen.getByRole('button', { name: enterFullscreen$() }));
+    expect(emitted().toggleFullscreen).toBeTruthy();
+  });
+
+  it('renders left slot content', () => {
+    const { container } = renderToolbar(
+      {},
+      { left: '<span data-testid="left-content">Left</span>' },
+    );
+    within(container.querySelector('.toolbar-left')).getByTestId('left-content');
+  });
+
+  it('renders center slot content', () => {
+    const { container } = renderToolbar(
+      {},
+      { center: '<span data-testid="center-content">Center</span>' },
+    );
+    within(container.querySelector('.toolbar-center')).getByTestId('center-content');
+  });
+
+  it('renders right slot content', () => {
+    const { container } = renderToolbar(
+      {},
+      { right: '<span data-testid="right-content">Right</span>' },
+    );
+    within(container.querySelector('.toolbar-right')).getByTestId('right-content');
+  });
+});

From 18f1acf3d4998dc255a233dac4dd5b8c95a498e2 Mon Sep 17 00:00:00 2001
From: Richard Tibbles <richard@learningequality.org>
Date: Sat, 18 Jul 2026 14:54:46 -0700
Subject: [PATCH 2/4] Integrate shared viewer chrome across viewers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace the bespoke toolbars in the bloompub, epub, html5, and pdf
viewers with the shared ViewerToolbar, and adopt EmbeddedReadCard for
the embedded read preview in the epub and pdf viewers.

Four epub changes ride along:

- `BottomBar` absorbs the `0 40px` horizontal padding deleted from
  `EpubRendererIndex`'s scoped block — same-specificity scoped rules
  whose winner depended on bundle order. Vertical padding stays the
  child's `8px 0`.
- `TocButton`/`SettingsButton`/`SearchButton` drop `size="small"` to
  match the other toolbar buttons.
- The side bars lose their in-`FocusLock` toggle copies, so the top bar's
  toggles take the click; `handleMouseDown` now ignores events inside the
  top bar to stop close-then-reopen.
- `SearchSideBar`'s input swaps `@keyup.esc.stop` for
  `@keydown.esc.prevent`, so Esc closes the search side bar from the
  input as it already did for the others, without also firing the search
  field's native clear.
---
 .../frontend/views/BloomPubRendererIndex.vue  |  56 +--
 .../epub_viewer/frontend/views/BottomBar.vue  |   2 +-
 .../frontend/views/EpubRendererIndex.vue      | 370 +++++++++---------
 .../frontend/views/SearchButton.vue           |   1 -
 .../frontend/views/SearchSideBar.vue          |   3 +-
 .../frontend/views/SettingsButton.vue         |   1 -
 .../epub_viewer/frontend/views/TocButton.vue  |   1 -
 .../epub_viewer/frontend/views/TopBar.vue     | 104 ++---
 .../views/__tests__/SearchSideBar.spec.js     |  35 +-
 .../frontend/views/__tests__/TopBar.spec.js   |   5 +-
 .../frontend/views/Html5AppRendererIndex.vue  |  56 +--
 .../frontend/views/PdfRendererIndex.vue       | 365 +++++++++--------
 12 files changed, 468 insertions(+), 531 deletions(-)

diff --git a/kolibri/plugins/bloompub_viewer/frontend/views/BloomPubRendererIndex.vue b/kolibri/plugins/bloompub_viewer/frontend/views/BloomPubRendererIndex.vue
index 4d75bdaafd2..1e83607bdfd 100644
--- a/kolibri/plugins/bloompub_viewer/frontend/views/BloomPubRendererIndex.vue
+++ b/kolibri/plugins/bloompub_viewer/frontend/views/BloomPubRendererIndex.vue
@@ -6,28 +6,10 @@
     :style="{ width: iframeWidth }"
     @changeFullscreen="isInFullscreen = $event"
   >
-    <div
-      class="fullscreen-header"
-      :style="{ backgroundColor: $themePalette.grey.v_200 }"
-    >
-      <KButton
-        :primary="false"
-        appearance="flat-button"
-        @click="$refs.bloompubViewer.toggleFullscreen()"
-      >
-        <KIcon
-          v-if="isInFullscreen"
-          icon="fullscreen_exit"
-          class="fs-icon"
-        />
-        <KIcon
-          v-else
-          icon="fullscreen"
-          class="fs-icon"
-        />
-        {{ fullscreenText }}
-      </KButton>
-    </div>
+    <ViewerToolbar
+      :isInFullscreen="isInFullscreen"
+      @toggleFullscreen="$refs.bloompubViewer.toggleFullscreen()"
+    />
     <div
       class="iframe-container"
       :style="containerStyle"
@@ -59,15 +41,17 @@
   import urls from 'kolibri/urls';
   import { now } from 'kolibri/utils/serverClock';
   import CoreFullscreen from 'kolibri-common/components/CoreFullscreen';
+  import ViewerToolbar from 'kolibri-common/components/ViewerToolbar';
   import Sandbox from 'kolibri-sandbox';
   import useContentViewer from 'kolibri/composables/useContentViewer';
 
   const defaultContentHeight = '500px';
-  const frameTopbarHeight = '37px';
+  const frameTopbarHeight = '48px';
   export default {
     name: 'BloomPubRendererIndex',
     components: {
       CoreFullscreen,
+      ViewerToolbar,
     },
     setup(props, context) {
       const {
@@ -109,9 +93,6 @@
       iframeWidth() {
         return (this.options && this.options.width) || 'auto';
       },
-      fullscreenText() {
-        return this.isInFullscreen ? this.$tr('exitFullscreen') : this.$tr('enterFullscreen');
-      },
       userData() {
         return {
           userId: this.userId,
@@ -177,16 +158,6 @@
       this.$emit('stopTracking');
     },
     $trs: {
-      exitFullscreen: {
-        message: 'Exit fullscreen',
-        context:
-          "Learners can use the Esc key or the 'exit fullscreen' button to close the fullscreen view on an html5 app.",
-      },
-      enterFullscreen: {
-        message: 'Enter fullscreen',
-        context:
-          'Learners can use the full screen button in the upper right corner to open an html5 app in fullscreen view.\n',
-      },
       contentFrameTitle: {
         message: 'Content viewer',
         context: 'Accessible title for the iframe that displays the content',
@@ -200,18 +171,7 @@
 <style lang="scss" scoped>
 
   @import '~kolibri-design-system/lib/styles/definitions';
-  $frame-topbar-height: 37px;
-
-  .fullscreen-header {
-    text-align: right;
-  }
-
-  .fs-icon {
-    position: relative;
-    top: 8px;
-    width: 24px;
-    height: 24px;
-  }
+  $frame-topbar-height: 48px;
 
   .bloompub-viewer {
     position: relative;
diff --git a/kolibri/plugins/epub_viewer/frontend/views/BottomBar.vue b/kolibri/plugins/epub_viewer/frontend/views/BottomBar.vue
index dee4a2f4c2a..5f0a5381c1e 100644
--- a/kolibri/plugins/epub_viewer/frontend/views/BottomBar.vue
+++ b/kolibri/plugins/epub_viewer/frontend/views/BottomBar.vue
@@ -100,7 +100,7 @@
 
   .bottom-bar {
     height: 54px;
-    padding: 8px 8px 0;
+    padding: 8px 40px 0;
     overflow: hidden;
     text-align: center;
   }
diff --git a/kolibri/plugins/epub_viewer/frontend/views/EpubRendererIndex.vue b/kolibri/plugins/epub_viewer/frontend/views/EpubRendererIndex.vue
index 61b87557d9c..c3742753054 100644
--- a/kolibri/plugins/epub_viewer/frontend/views/EpubRendererIndex.vue
+++ b/kolibri/plugins/epub_viewer/frontend/views/EpubRendererIndex.vue
@@ -1,163 +1,157 @@
 <template>
 
-  <CoreFullscreen
-    ref="epubViewer"
-    class="epub-viewer"
-    :class="{ small: windowIsSmall, scrolled: scrolled }"
-    :style="epubViewerStyle"
-    @changeFullscreen="isInFullscreen = $event"
+  <EmbeddedReadCard
+    :active="mobileEmbedded"
+    @read="$refs.epubViewer.toggleFullscreen()"
   >
-    <LoadingError
-      v-if="errorLoading"
-      :loaded="loaded"
-    />
-
-    <LoadingScreen v-else-if="!loaded" />
-
-    <div
-      class="epub-viewer-content"
-      role="presentation"
-      :style="{ 'border-color': $themeTokens.fineLine }"
-      :dir="contentDirection"
-      @mousedown.stop="handleMouseDown"
-      @keyup.esc="closeSideBar"
+    <CoreFullscreen
+      ref="epubViewer"
+      class="epub-viewer"
+      :class="{ small: windowIsSmall, scrolled: scrolled, 'no-bottom-bar': mobileEmbedded }"
+      :style="epubViewerStyle"
+      @changeFullscreen="isInFullscreen = $event"
     >
+      <LoadingError
+        v-if="errorLoading"
+        :loaded="loaded"
+      />
+
+      <LoadingScreen v-else-if="!loaded" />
+
       <TopBar
+        v-if="!mobileEmbedded"
         ref="topBar"
         class="top-bar-component"
         :isInFullscreen="isInFullscreen"
-        :hideSearchButton="searchSideBarIsOpen"
         @tableOfContentsButtonClicked="handleTocToggle"
         @settingsButtonClicked="handleSettingToggle"
         @searchButtonClicked="handleSearchToggle"
         @fullscreenButtonClicked="$refs.epubViewer.toggleFullscreen()"
       />
 
-      <FocusLock
-        :disabled="!tocSideBarIsOpen"
-        :returnFocus="true"
-      >
-        <TocButton
-          v-if="tocSideBarIsOpen"
-          class="toc-button"
-          @click="handleTocToggle"
-        />
-
-        <TableOfContentsSideBar
-          v-show="tocSideBarIsOpen"
-          ref="tocSideBar"
-          :toc="toc"
-          :currentSection="currentSection"
-          class="side-bar side-bar-left"
-          @tocNavigation="handleTocNavigation"
-        />
-      </FocusLock>
-
-      <FocusLock
-        :disabled="!settingsSideBarIsOpen"
-        :returnFocus="false"
-      >
-        <SettingsButton
-          v-if="settingsSideBarIsOpen"
-          class="settings-button"
-          @click="handleSettingToggle"
-        />
-
-        <SettingsSideBar
-          v-show="settingsSideBarIsOpen"
-          ref="settingsSideBar"
-          class="side-bar side-bar-right"
-          :theme="theme"
-          :decreaseFontSizeDisabled="decreaseFontSizeDisabled"
-          :increaseFontSizeDisabled="increaseFontSizeDisabled"
-          @decreaseFontSize="handleChangeFontSize(-1)"
-          @increaseFontSize="handleChangeFontSize(+1)"
-          @setTheme="setTheme"
-          @closeSideBar="handleSettingToggle"
-        />
-      </FocusLock>
-
-      <FocusLock
-        :disabled="!searchSideBarIsOpen"
-        :returnFocus="false"
-      >
-        <SearchButton
-          v-if="searchSideBarIsOpen"
-          class="search-button"
-          @click="handleSearchToggle"
-        />
-
-        <SearchSideBar
-          v-show="searchSideBarIsOpen"
-          ref="searchSideBar"
-          class="side-bar side-bar-right"
-          :book="book"
-          @newSearchQuery="handleNewSearchQuery"
-          @navigateToSearchResult="handleNavigateToSearchResult"
-        />
-      </FocusLock>
-
       <div
-        class="navigation-and-epubjs"
-        :style="{ backgroundColor }"
+        class="epub-viewer-content"
+        role="presentation"
+        :style="{ 'border-color': $themeTokens.fineLine }"
+        :dir="contentDirection"
+        @mousedown.stop="handleMouseDown"
+        @keyup.esc="closeSideBar"
       >
-        <div class="column epubjs-navigation">
-          <NextButton
-            v-if="contentIsRtl"
-            v-show="!isAtEnd"
-            :disabled="!locationsAreReady"
-            :color="navigationButtonColor"
-            :isRtl="contentIsRtl"
-            :style="{ backgroundColor }"
-            @goToNextPage="goToNextPage"
+        <FocusLock
+          :disabled="!tocSideBarIsOpen"
+          :returnFocus="true"
+        >
+          <TableOfContentsSideBar
+            v-show="tocSideBarIsOpen"
+            ref="tocSideBar"
+            :toc="toc"
+            :currentSection="currentSection"
+            class="side-bar side-bar-left"
+            @tocNavigation="handleTocNavigation"
           />
-          <PreviousButton
-            v-else
-            v-show="!isAtStart"
-            :disabled="!locationsAreReady"
-            :color="navigationButtonColor"
-            :isRtl="contentIsRtl"
-            :style="{ backgroundColor }"
-            @goToPreviousPage="goToPreviousPage"
+        </FocusLock>
+
+        <FocusLock
+          :disabled="!settingsSideBarIsOpen"
+          :returnFocus="false"
+        >
+          <SettingsSideBar
+            v-show="settingsSideBarIsOpen"
+            ref="settingsSideBar"
+            class="side-bar side-bar-right"
+            :theme="theme"
+            :decreaseFontSizeDisabled="decreaseFontSizeDisabled"
+            :increaseFontSizeDisabled="increaseFontSizeDisabled"
+            @decreaseFontSize="handleChangeFontSize(-1)"
+            @increaseFontSize="handleChangeFontSize(+1)"
+            @setTheme="setTheme"
+            @closeSideBar="handleSettingToggle"
           />
-        </div>
+        </FocusLock>
+
+        <FocusLock
+          :disabled="!searchSideBarIsOpen"
+          :returnFocus="false"
+        >
+          <SearchSideBar
+            v-show="searchSideBarIsOpen"
+            ref="searchSideBar"
+            class="side-bar side-bar-right"
+            :book="book"
+            @newSearchQuery="handleNewSearchQuery"
+            @navigateToSearchResult="handleNavigateToSearchResult"
+          />
+        </FocusLock>
+
         <div
-          ref="epubjsContainer"
-          class="column epubjs-parent"
+          class="navigation-and-epubjs"
           :style="{ backgroundColor }"
-        ></div>
-        <div class="column epubjs-navigation">
-          <PreviousButton
-            v-if="contentIsRtl"
-            v-show="!isAtStart"
-            :disabled="!locationsAreReady"
-            :color="navigationButtonColor"
-            :isRtl="contentIsRtl"
+        >
+          <div
+            v-show="!mobileEmbedded"
+            class="column epubjs-navigation"
+          >
+            <NextButton
+              v-if="contentIsRtl"
+              v-show="!isAtEnd"
+              :disabled="!locationsAreReady"
+              :color="navigationButtonColor"
+              :isRtl="contentIsRtl"
+              :style="{ backgroundColor }"
+              @goToNextPage="goToNextPage"
+            />
+            <PreviousButton
+              v-else
+              v-show="!isAtStart"
+              :disabled="!locationsAreReady"
+              :color="navigationButtonColor"
+              :isRtl="contentIsRtl"
+              :style="{ backgroundColor }"
+              @goToPreviousPage="goToPreviousPage"
+            />
+          </div>
+          <div
+            ref="epubjsContainer"
+            class="column epubjs-parent"
             :style="{ backgroundColor }"
-            @goToPreviousPage="goToPreviousPage"
-          />
-          <NextButton
-            v-else
-            v-show="!isAtEnd"
-            :disabled="!locationsAreReady"
-            :color="navigationButtonColor"
-            :isRtl="contentIsRtl"
-            :style="{ backgroundColor }"
-            @goToNextPage="goToNextPage"
-          />
+          ></div>
+          <div
+            v-show="!mobileEmbedded"
+            class="column epubjs-navigation"
+          >
+            <PreviousButton
+              v-if="contentIsRtl"
+              v-show="!isAtStart"
+              :disabled="!locationsAreReady"
+              :color="navigationButtonColor"
+              :isRtl="contentIsRtl"
+              :style="{ backgroundColor }"
+              @goToPreviousPage="goToPreviousPage"
+            />
+            <NextButton
+              v-else
+              v-show="!isAtEnd"
+              :disabled="!locationsAreReady"
+              :color="navigationButtonColor"
+              :isRtl="contentIsRtl"
+              :style="{ backgroundColor }"
+              @goToNextPage="goToNextPage"
+            />
+          </div>
         </div>
-      </div>
 
-      <BottomBar
-        class="bottom-bar"
-        :locationsAreReady="locationsAreReady"
-        :heading="bottomBarHeading"
-        :sliderValue="sliderValue"
-        :sliderStep="sliderStep"
-        @sliderChanged="handleSliderChanged"
-      />
-    </div>
-  </CoreFullscreen>
+        <BottomBar
+          v-show="!mobileEmbedded"
+          class="bottom-bar"
+          :locationsAreReady="locationsAreReady"
+          :heading="bottomBarHeading"
+          :sliderValue="sliderValue"
+          :sliderStep="sliderStep"
+          @sliderChanged="handleSliderChanged"
+        />
+      </div>
+    </CoreFullscreen>
+  </EmbeddedReadCard>
 
 </template>
 
@@ -172,6 +166,7 @@
   import Lockr from 'lockr';
   import FocusLock from 'vue-focus-lock';
   import CoreFullscreen from 'kolibri-common/components/CoreFullscreen';
+  import EmbeddedReadCard from 'kolibri-common/components/EmbeddedReadCard';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import useContentViewer from 'kolibri/composables/useContentViewer';
   import { ref, computed } from 'vue';
@@ -185,9 +180,6 @@
   import BottomBar from './BottomBar';
   import PreviousButton from './PreviousButton';
   import NextButton from './NextButton';
-  import TocButton from './TocButton';
-  import SettingsButton from './SettingsButton';
-  import SearchButton from './SearchButton';
 
   import { THEMES, isDarkColor, DEFAULT_LINK_COLOR, resolveTheme } from './EpubConstants';
 
@@ -209,6 +201,7 @@
     name: 'EpubRendererIndex',
     components: {
       CoreFullscreen,
+      EmbeddedReadCard,
       TopBar,
       TableOfContentsSideBar,
       SettingsSideBar,
@@ -218,9 +211,6 @@
       PreviousButton,
       NextButton,
       FocusLock,
-      TocButton,
-      SettingsButton,
-      SearchButton,
       LoadingError,
     },
     setup(props, context) {
@@ -245,6 +235,7 @@
         contentDirection,
         contentIsRtl,
         reportLoadingError,
+        embedded,
       } = useContentViewer(context, { defaultDuration });
       return {
         windowIsSmall,
@@ -256,6 +247,7 @@
         contentDirection,
         contentIsRtl,
         reportLoadingError,
+        embedded,
       };
     },
     data() {
@@ -365,10 +357,25 @@
       searchSideBarIsOpen() {
         return this.sideBarOpen === SIDE_BARS.SEARCH;
       },
+      mobileEmbedded() {
+        return this.embedded && this.windowIsSmall && !this.isInFullscreen;
+      },
       epubViewerStyle() {
-        return {
+        const embeddedInline = this.embedded && !this.isInFullscreen;
+        const style = {
           backgroundColor: this.$themeTokens.surface,
         };
+        if (embeddedInline) {
+          style.height = '25vh';
+          if (!this.mobileEmbedded) {
+            // The mobile-embedded preview gets its card border from EmbeddedReadCard.
+            style.border = `1px solid ${this.$themeTokens.fineLine}`;
+          }
+          if (!this.windowIsSmall) {
+            style.minHeight = '400px';
+          }
+        }
+        return style;
       },
       navigationButtonColor() {
         // Choose arrow color from the actual background luminance so custom themes
@@ -403,7 +410,9 @@
           if (oldSideBar === SIDE_BARS.SEARCH) {
             this.clearMarks();
           }
-          if (!newSideBar) {
+          // Esc can close a side bar and exit fullscreen at once, which unmounts
+          // the top bar in the mobile embedded case before we return focus to it.
+          if (!newSideBar && this.$refs.topBar) {
             switch (oldSideBar) {
               case SIDE_BARS.TOC:
                 this.$refs.topBar.focusOnTocButton();
@@ -433,8 +442,7 @@
       this.visitedPages = this.savedVisitedPages || {};
     },
     beforeMount() {
-      global.ePub = Epub;
-      this.book = new Epub(this.epubURL);
+      this.book = new Epub(this.epubURL, { openAs: 'epub' });
       this.book.on(EVENTS.BOOK.OPEN_FAILED, err => {
         this.errorLoading = true;
         this.reportLoadingError(err);
@@ -525,9 +533,6 @@
       window.removeEventListener('mousedown', this.handleMouseDown, { passive: true });
       clearInterval(this.updateContentStateInterval);
     },
-    destroyed() {
-      delete global.ePub;
-    },
     methods: {
       updateProgress() {
         if (this.locations.length > 0) {
@@ -606,6 +611,11 @@
         }
       },
       handleMouseDown(event) {
+        // The top bar sits outside the content div that stops this event, so its
+        // toggles would close the side bar here and immediately reopen it on click.
+        if (this.$refs.topBar && this.$refs.topBar.$el.contains(event.target)) {
+          return;
+        }
         // This check is necessary because event listeners don't seem to be removed on beforeDestroy
         if (this.$refs.epubViewer) {
           let closeSideBar = false;
@@ -818,47 +828,39 @@
   @import '~kolibri-design-system/lib/styles/definitions';
   @import './EpubStyles';
 
-  $top-bar-height: 36px;
+  $top-bar-height: 48px;
   $bottom-bar-height: 54px;
   $navigation-button-small: 36px;
   $navigation-button-normal: 52px;
 
   .epub-viewer {
     position: relative;
-    // Counter-balance the padding to avoid unnecessary scroll
+    display: flex;
+    flex-direction: column;
     height: calc(100vh - 64px);
-    padding: 32px 24px;
     overflow: hidden;
     font-size: smaller;
     border-radius: $radius;
   }
 
-  .epub-viewer:fullscreen,
-  .epub-viewer.small:fullscreen {
-    padding: 0;
+  .top-bar-component {
+    flex-shrink: 0;
   }
 
   .epub-viewer-content {
     position: relative;
-    height: 100%;
+    flex: 1;
+    min-height: 0;
     overflow: hidden;
     border: solid 1px;
     border-radius: $radius;
   }
 
-  .top-bar-component {
-    position: absolute;
-    top: 0;
-    right: 0;
-    left: 0;
-    height: $top-bar-height;
-  }
-
   .side-bar {
     @extend %momentum-scroll;
 
     position: absolute;
-    top: $top-bar-height;
+    top: 0;
     bottom: $bottom-bar-height;
   }
 
@@ -870,34 +872,11 @@
     right: 0;
   }
 
-  .toc-button {
-    left: 3px;
-  }
-
-  .toc-button,
-  .settings-button,
-  .search-button {
-    position: absolute;
-    top: 2px;
-    z-index: 2;
-  }
-
-  .settings-button {
-    right: 67px;
-  }
-
-  .search-button {
-    // Positioned to be in the exact same spot as the TopBar's SearchButton,
-    // which is given opacity: 0 when this button is shown
-    right: 35px;
-  }
-
   .bottom-bar {
     position: absolute;
     right: 0;
     bottom: 0;
     left: 0;
-    padding: 0 40px;
   }
 
   .d-t {
@@ -916,7 +895,7 @@
     @extend %momentum-scroll;
 
     position: absolute;
-    top: $top-bar-height;
+    top: 0;
     right: 0;
     bottom: $bottom-bar-height;
     left: 0;
@@ -941,6 +920,17 @@
     left: 0;
   }
 
+  .epub-viewer.no-bottom-bar {
+    .side-bar,
+    .navigation-and-epubjs {
+      bottom: 0;
+    }
+
+    .navigation-and-epubjs {
+      max-height: none;
+    }
+  }
+
   .epub-viewer.small .epubjs-navigation {
     width: $navigation-button-small;
   }
diff --git a/kolibri/plugins/epub_viewer/frontend/views/SearchButton.vue b/kolibri/plugins/epub_viewer/frontend/views/SearchButton.vue
index db651ef23ad..2834a926951 100644
--- a/kolibri/plugins/epub_viewer/frontend/views/SearchButton.vue
+++ b/kolibri/plugins/epub_viewer/frontend/views/SearchButton.vue
@@ -4,7 +4,6 @@
     icon="search"
     :ariaLabel="$tr('toggleSearchSideBar')"
     data-testid="search button"
-    size="small"
     @click="$emit('click')"
   />
 
diff --git a/kolibri/plugins/epub_viewer/frontend/views/SearchSideBar.vue b/kolibri/plugins/epub_viewer/frontend/views/SearchSideBar.vue
index 703e3def63a..85262102327 100644
--- a/kolibri/plugins/epub_viewer/frontend/views/SearchSideBar.vue
+++ b/kolibri/plugins/epub_viewer/frontend/views/SearchSideBar.vue
@@ -6,13 +6,14 @@
       @submit.prevent="submitSearch"
     >
       <div class="d-tr">
+        <!-- Esc closes the side bar (ancestor keyup); suppress the native field clear. -->
         <input
           ref="searchInput"
           v-model.trim="searchQuery"
           class="d-tc search-input"
           type="search"
           :aria-label="$tr('enterSearchQuery')"
-          @keyup.esc.stop
+          @keydown.esc.prevent
         >
         <KIconButton
           icon="search"
diff --git a/kolibri/plugins/epub_viewer/frontend/views/SettingsButton.vue b/kolibri/plugins/epub_viewer/frontend/views/SettingsButton.vue
index 9a732dabd6a..7e4d4d82782 100644
--- a/kolibri/plugins/epub_viewer/frontend/views/SettingsButton.vue
+++ b/kolibri/plugins/epub_viewer/frontend/views/SettingsButton.vue
@@ -4,7 +4,6 @@
     icon="tune"
     :ariaLabel="$tr('toggleSettingsSideBar')"
     data-testid="settings button"
-    size="small"
     @click="$emit('click')"
   />
 
diff --git a/kolibri/plugins/epub_viewer/frontend/views/TocButton.vue b/kolibri/plugins/epub_viewer/frontend/views/TocButton.vue
index dccca98cf57..2f34cf8748b 100644
--- a/kolibri/plugins/epub_viewer/frontend/views/TocButton.vue
+++ b/kolibri/plugins/epub_viewer/frontend/views/TocButton.vue
@@ -4,7 +4,6 @@
     icon="list"
     :ariaLabel="$tr('toggleTocSideBar')"
     data-testid="toc button"
-    size="small"
     @click="$emit('click')"
   />
 
diff --git a/kolibri/plugins/epub_viewer/frontend/views/TopBar.vue b/kolibri/plugins/epub_viewer/frontend/views/TopBar.vue
index e066a27518c..96eda9dbc84 100644
--- a/kolibri/plugins/epub_viewer/frontend/views/TopBar.vue
+++ b/kolibri/plugins/epub_viewer/frontend/views/TopBar.vue
@@ -1,66 +1,42 @@
 <template>
 
-  <div
+  <ViewerToolbar
     class="top-bar"
-    :style="{ backgroundColor: $themePalette.grey.v_300 }"
+    :isInFullscreen="isInFullscreen"
+    @toggleFullscreen="$emit('fullscreenButtonClicked')"
   >
-    <KGrid class="top-bar-grid">
-      <KGridItem
-        :layout4="{ span: 1 }"
-        :layout8="{ span: 2 }"
-        :layout12="{ span: 3 }"
+    <template #left>
+      <TocButton
+        ref="tocButton"
+        @click="$emit('tableOfContentsButtonClicked')"
+      />
+    </template>
+    <template #center>
+      <h2
+        v-if="title"
+        class="top-bar-title"
       >
-        <TocButton
-          ref="tocButton"
-          @click="$emit('tableOfContentsButtonClicked')"
-        />
-      </KGridItem>
-      <KGridItem
-        :layout="{ alignment: 'center' }"
-        :layout4="{ span: 1 }"
-        :layout8="{ span: 4 }"
-        :layout12="{ span: 6 }"
-      >
-        <h2
-          v-if="title"
-          class="top-bar-title"
-        >
-          {{ title }}
-        </h2>
-      </KGridItem>
-      <KGridItem
-        :layout="{ alignment: 'right' }"
-        :layout4="{ span: 2 }"
-        :layout8="{ span: 2 }"
-        :layout12="{ span: 3 }"
-      >
-        <SettingsButton
-          ref="settingsButton"
-          @click="$emit('settingsButtonClicked')"
-        />
-
-        <SearchButton
-          ref="searchButton"
-          :class="{ invisible: $attrs.hideSearchButton }"
-          @click="$emit('searchButtonClicked')"
-        />
-
-        <KIconButton
-          ref="fullscreenButton"
-          :icon="isInFullscreen ? 'fullscreen_exit' : 'fullscreen'"
-          :ariaLabel="$tr('toggleFullscreen')"
-          size="small"
-          @click="$emit('fullscreenButtonClicked')"
-        />
-      </KGridItem>
-    </KGrid>
-  </div>
+        {{ title }}
+      </h2>
+    </template>
+    <template #right>
+      <SettingsButton
+        ref="settingsButton"
+        @click="$emit('settingsButtonClicked')"
+      />
+      <SearchButton
+        ref="searchButton"
+        @click="$emit('searchButtonClicked')"
+      />
+    </template>
+  </ViewerToolbar>
 
 </template>
 
 
 <script>
 
+  import ViewerToolbar from 'kolibri-common/components/ViewerToolbar';
   import TocButton from './TocButton';
   import SettingsButton from './SettingsButton';
   import SearchButton from './SearchButton';
@@ -68,6 +44,7 @@
   export default {
     name: 'TopBar',
     components: {
+      ViewerToolbar,
       TocButton,
       SettingsButton,
       SearchButton,
@@ -105,13 +82,6 @@
         this.$refs.searchButton.$el.focus();
       },
     },
-    $trs: {
-      toggleFullscreen: {
-        message: 'Toggle fullscreen',
-        context:
-          'Learners can use the fullscreen button in the upper right corner to open the ebook in fullscreen view.',
-      },
-    },
   };
 
 </script>
@@ -121,22 +91,6 @@
 
   @import './EpubStyles';
 
-  .invisible {
-    // When the SearchSideBar is shown, hide this SearchButton so it does not appear
-    // under the second SearchButton rendered inside EpubRendererIndex
-    opacity: 0;
-  }
-
-  .top-bar {
-    z-index: 1;
-  }
-
-  .top-bar-grid {
-    margin-top: 2px;
-    margin-right: 3px;
-    margin-left: 3px;
-  }
-
   .top-bar-title {
     @include truncate-text;
 
diff --git a/kolibri/plugins/epub_viewer/frontend/views/__tests__/SearchSideBar.spec.js b/kolibri/plugins/epub_viewer/frontend/views/__tests__/SearchSideBar.spec.js
index 6aa998426c0..afb073fd5c1 100644
--- a/kolibri/plugins/epub_viewer/frontend/views/__tests__/SearchSideBar.spec.js
+++ b/kolibri/plugins/epub_viewer/frontend/views/__tests__/SearchSideBar.spec.js
@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/vue';
+import { render, screen, fireEvent } from '@testing-library/vue';
 import { defineComponent, ref } from 'vue';
 import SearchSideBar from '../SearchSideBar';
 
@@ -50,4 +50,37 @@ describe('Search side bar', () => {
     const input = screen.getByRole('searchbox');
     expect(input).toHaveFocus();
   });
+
+  it('should let escape from the input reach the ancestor that closes the side bar', async () => {
+    const closeSideBar = jest.fn();
+    const Parent = defineComponent({
+      components: { SearchSideBar },
+      setup() {
+        // eslint-disable-next-line vue/no-unused-properties
+        return { closeSideBar };
+      },
+      template: ` <div @keyup.esc="closeSideBar">
+        <SearchSideBar :book="{}" />
+      </div> `,
+    });
+
+    render(Parent, { attachTo: document.body });
+
+    await fireEvent.keyUp(screen.getByRole('searchbox'), { key: 'Escape' });
+
+    expect(closeSideBar).toHaveBeenCalled();
+  });
+
+  it('should suppress the native search field clear on escape', () => {
+    renderComponent();
+
+    const event = new KeyboardEvent('keydown', {
+      key: 'Escape',
+      bubbles: true,
+      cancelable: true,
+    });
+    screen.getByRole('searchbox').dispatchEvent(event);
+
+    expect(event.defaultPrevented).toBe(true);
+  });
 });
diff --git a/kolibri/plugins/epub_viewer/frontend/views/__tests__/TopBar.spec.js b/kolibri/plugins/epub_viewer/frontend/views/__tests__/TopBar.spec.js
index 9a1aa26dd4f..8d612d3219f 100644
--- a/kolibri/plugins/epub_viewer/frontend/views/__tests__/TopBar.spec.js
+++ b/kolibri/plugins/epub_viewer/frontend/views/__tests__/TopBar.spec.js
@@ -1,14 +1,15 @@
 import { render, screen, fireEvent } from '@testing-library/vue';
 import { createTranslator } from 'kolibri/utils/i18n';
+import { viewerToolbarStrings } from 'kolibri-common/components/ViewerToolbar';
 import TopBar from '../TopBar';
 import TocButton from '../TocButton';
 import SettingsButton from '../SettingsButton';
 import SearchButton from '../SearchButton';
 
+const { enterFullscreen$ } = viewerToolbarStrings;
 const { toggleTocSideBar$ } = createTranslator(TocButton.name, TocButton.$trs);
 const { toggleSettingsSideBar$ } = createTranslator(SettingsButton.name, SettingsButton.$trs);
 const { toggleSearchSideBar$ } = createTranslator(SearchButton.name, SearchButton.$trs);
-const { toggleFullscreen$ } = createTranslator(TopBar.name, TopBar.$trs);
 
 function renderTopBar(props = {}) {
   return render(TopBar, {
@@ -85,7 +86,7 @@ describe('Top bar', () => {
   it('emits event when fullscreen button is clicked', async () => {
     const { emitted } = renderTopBar();
 
-    await fireEvent.click(screen.getByRole('button', { name: toggleFullscreen$() }));
+    await fireEvent.click(screen.getByRole('button', { name: enterFullscreen$() }));
 
     expect(emitted().fullscreenButtonClicked).toBeTruthy();
   });
diff --git a/kolibri/plugins/html5_viewer/frontend/views/Html5AppRendererIndex.vue b/kolibri/plugins/html5_viewer/frontend/views/Html5AppRendererIndex.vue
index b3de5732743..bcae0ed4fa7 100644
--- a/kolibri/plugins/html5_viewer/frontend/views/Html5AppRendererIndex.vue
+++ b/kolibri/plugins/html5_viewer/frontend/views/Html5AppRendererIndex.vue
@@ -6,28 +6,10 @@
     :style="{ width: iframeWidth }"
     @changeFullscreen="isInFullscreen = $event"
   >
-    <div
-      class="fullscreen-header"
-      :style="{ backgroundColor: $themePalette.grey.v_200 }"
-    >
-      <KButton
-        :primary="false"
-        appearance="flat-button"
-        @click="$refs.html5Viewer.toggleFullscreen()"
-      >
-        <KIcon
-          v-if="isInFullscreen"
-          icon="fullscreen_exit"
-          class="fs-icon"
-        />
-        <KIcon
-          v-else
-          icon="fullscreen"
-          class="fs-icon"
-        />
-        {{ fullscreenText }}
-      </KButton>
-    </div>
+    <ViewerToolbar
+      :isInFullscreen="isInFullscreen"
+      @toggleFullscreen="$refs.html5Viewer.toggleFullscreen()"
+    />
     <div
       class="iframe-container"
       :style="containerStyle"
@@ -59,15 +41,17 @@
   import urls from 'kolibri/urls';
   import { now } from 'kolibri/utils/serverClock';
   import CoreFullscreen from 'kolibri-common/components/CoreFullscreen';
+  import ViewerToolbar from 'kolibri-common/components/ViewerToolbar';
   import Sandbox from 'kolibri-sandbox';
   import useContentViewer from 'kolibri/composables/useContentViewer';
 
   const defaultContentHeight = '500px';
-  const frameTopbarHeight = '37px';
+  const frameTopbarHeight = '48px';
   export default {
     name: 'Html5AppRendererIndex',
     components: {
       CoreFullscreen,
+      ViewerToolbar,
     },
     setup(props, context) {
       const {
@@ -111,9 +95,6 @@
       iframeWidth() {
         return (this.options && this.options.width) || 'auto';
       },
-      fullscreenText() {
-        return this.isInFullscreen ? this.$tr('exitFullscreen') : this.$tr('enterFullscreen');
-      },
       userData() {
         return {
           userId: this.userId,
@@ -216,16 +197,6 @@
       },
     },
     $trs: {
-      exitFullscreen: {
-        message: 'Exit fullscreen',
-        context:
-          "Learners can use the Esc key or the 'exit fullscreen' button to close the fullscreen view on an html5 app.",
-      },
-      enterFullscreen: {
-        message: 'Enter fullscreen',
-        context:
-          'Learners can use the full screen button in the upper right corner to open an html5 app in fullscreen view.\n',
-      },
       contentFrameTitle: {
         message: 'Content viewer',
         context: 'Accessible title for the iframe that displays the content',
@@ -239,18 +210,7 @@
 <style lang="scss" scoped>
 
   @import '~kolibri-design-system/lib/styles/definitions';
-  $frame-topbar-height: 37px;
-
-  .fullscreen-header {
-    text-align: right;
-  }
-
-  .fs-icon {
-    position: relative;
-    top: 8px;
-    width: 24px;
-    height: 24px;
-  }
+  $frame-topbar-height: 48px;
 
   .html5-viewer {
     position: relative;
diff --git a/kolibri/plugins/pdf_viewer/frontend/views/PdfRendererIndex.vue b/kolibri/plugins/pdf_viewer/frontend/views/PdfRendererIndex.vue
index d91bba360b1..7a150de89d1 100644
--- a/kolibri/plugins/pdf_viewer/frontend/views/PdfRendererIndex.vue
+++ b/kolibri/plugins/pdf_viewer/frontend/views/PdfRendererIndex.vue
@@ -1,122 +1,121 @@
 <template>
 
-  <CoreFullscreen
-    ref="pdfViewer"
-    class="pdf-viewer"
-    :class="{
-      'pdf-controls-open': showControls,
-      'pdf-full-screen': isInFullscreen,
-      'pdf-embedded': embedded,
-      'pdf-mobile-embedded': mobileEmbedded,
-    }"
-    :style="{ backgroundColor: $themeTokens.text }"
-    @changeFullscreen="isInFullscreen = $event"
+  <EmbeddedReadCard
+    :active="mobileEmbedded"
+    @read="$refs.pdfViewer.toggleFullscreen()"
   >
-    <KLinearLoader
-      v-if="documentLoading || firstPageHeight === null"
-      class="progress-bar"
-      :delay="false"
-      :type="loadingProgress > 0 ? 'determinate' : 'indeterminate'"
-      :progress="loadingProgress * 100"
-    />
-
-    <template v-else>
-      <transition name="slide">
-        <div
-          class="fullscreen-header pdf-controls-container"
-          :style="{ backgroundColor: $themePalette.grey.v_200 }"
+    <CoreFullscreen
+      ref="pdfViewer"
+      class="pdf-viewer"
+      :class="{
+        'pdf-controls-open': showControls,
+        'pdf-full-screen': isInFullscreen,
+        'pdf-embedded': embeddedInline,
+        'pdf-mobile-embedded': mobileEmbedded,
+      }"
+      :style="pdfViewerStyle"
+      @changeFullscreen="isInFullscreen = $event"
+    >
+      <KLinearLoader
+        v-if="documentLoading || firstPageHeight === null"
+        class="progress-bar"
+        :delay="false"
+        :type="loadingProgress > 0 ? 'determinate' : 'indeterminate'"
+        :progress="loadingProgress * 100"
+      />
+
+      <template v-else>
+        <transition
+          v-if="!mobileEmbedded"
+          name="slide"
         >
-          <div>
-            <KIconButton
-              v-if="outline && outline.length > 0"
-              class="controls"
-              :ariaLabel="coreString('bookmarksLabel')"
-              :tooltip="coreString('bookmarksLabel')"
-              aria-controls="sidebar-container"
-              icon="menu"
-              @click="toggleSideBar"
-            />
-          </div>
-          <div>
-            <KIconButton
-              class="button-zoom-in controls"
-              :ariaLabel="coreString('zoomIn')"
-              aria-controls="pdf-container"
-              icon="add"
-              @click="zoomIn"
-            />
-            <KIconButton
-              class="button-zoom-out controls"
-              :ariaLabel="coreString('zoomOut')"
-              aria-controls="pdf-container"
-              icon="remove"
-              @click="zoomOut"
-            />
-            <KButton
-              class="fullscreen-button"
-              :primary="false"
-              appearance="flat-button"
-              :icon="isInFullscreen ? 'fullscreen_exit' : 'fullscreen'"
-              @click="$refs.pdfViewer.toggleFullscreen()"
-            >
-              {{ fullscreenText }}
-            </KButton>
-          </div>
-        </div>
-      </transition>
-      <KGrid
-        class="full-height-container"
-        gutter="0"
-      >
-        <KGridItem
-          v-if="showSideBar"
-          class="full-height-container"
-          :layout8="{ span: 2 }"
-          :layout12="{ span: 3 }"
-        >
-          <SideBar
-            id="sidebar-container"
-            class="scroller-height"
-            :style="{ position: 'sticky', top: 0 }"
-            :outline="outline || []"
-            :goToDestination="goToDestination"
-            :focusDestPage="focusDestPage"
-          />
-        </KGridItem>
-        <KGridItem
-          ref="pdfContainer"
-          class="full-height-container"
-          :layout8="{ span: showSideBar ? 6 : 8 }"
-          :layout12="{ span: showSideBar ? 9 : 12 }"
-        >
-          <RecyclableScroller
-            id="pdf-container"
-            ref="recycleList"
-            :items="pdfPages"
-            :buffer="itemHeight * 2"
-            :emitUpdate="true"
-            class="pdf-container scroller-height"
-            keyField="index"
-            @update="handleUpdate"
+          <ViewerToolbar
+            class="pdf-controls-container"
+            :isInFullscreen="isInFullscreen"
+            @toggleFullscreen="$refs.pdfViewer.toggleFullscreen()"
           >
-            <template #default="{ item }">
-              <PdfPage
-                :key="item.index"
-                :pageNum="item.index + 1"
-                :pdfPage="pdfPages[item.index].page"
-                :pageReady="pdfPages[item.index].resolved"
-                :firstPageHeight="firstPageHeight || 0"
-                :firstPageWidth="firstPageWidth || 0"
-                :scale="scale || 1"
-                :totalPages="pdfPages.length"
-                :eventBus="eventBus"
+            <template #left>
+              <KIconButton
+                v-if="outline && outline.length > 0"
+                :ariaLabel="coreString('bookmarksLabel')"
+                :tooltip="coreString('bookmarksLabel')"
+                aria-controls="sidebar-container"
+                icon="menu"
+                @click="toggleSideBar"
               />
             </template>
-          </RecyclableScroller>
-        </KGridItem>
-      </KGrid>
-    </template>
-  </CoreFullscreen>
+            <template #right>
+              <KIconButton
+                class="button-zoom-in"
+                :ariaLabel="coreString('zoomIn')"
+                aria-controls="pdf-container"
+                icon="add"
+                @click="zoomIn"
+              />
+              <KIconButton
+                class="button-zoom-out"
+                :ariaLabel="coreString('zoomOut')"
+                aria-controls="pdf-container"
+                icon="remove"
+                @click="zoomOut"
+              />
+            </template>
+          </ViewerToolbar>
+        </transition>
+        <KGrid
+          class="full-height-container"
+          gutter="0"
+        >
+          <KGridItem
+            v-if="showSideBar"
+            class="full-height-container"
+            :layout8="{ span: 2 }"
+            :layout12="{ span: 3 }"
+          >
+            <SideBar
+              id="sidebar-container"
+              class="scroller-height"
+              :style="{ position: 'sticky', top: 0 }"
+              :outline="outline || []"
+              :goToDestination="goToDestination"
+              :focusDestPage="focusDestPage"
+            />
+          </KGridItem>
+          <KGridItem
+            ref="pdfContainer"
+            class="full-height-container"
+            :layout8="{ span: showSideBar ? 6 : 8 }"
+            :layout12="{ span: showSideBar ? 9 : 12 }"
+          >
+            <RecyclableScroller
+              id="pdf-container"
+              ref="recycleList"
+              :items="pdfPages"
+              :buffer="itemHeight * 2"
+              :emitUpdate="true"
+              class="pdf-container scroller-height"
+              keyField="index"
+              @update="handleUpdate"
+            >
+              <template #default="{ item }">
+                <PdfPage
+                  :key="item.index"
+                  :pageNum="item.index + 1"
+                  :pdfPage="pdfPages[item.index].page"
+                  :pageReady="pdfPages[item.index].resolved"
+                  :firstPageHeight="firstPageHeight || 0"
+                  :firstPageWidth="firstPageWidth || 0"
+                  :scale="scale || 1"
+                  :totalPages="pdfPages.length"
+                  :eventBus="eventBus"
+                />
+              </template>
+            </RecyclableScroller>
+          </KGridItem>
+        </KGrid>
+      </template>
+    </CoreFullscreen>
+  </EmbeddedReadCard>
 
 </template>
 
@@ -133,6 +132,8 @@
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import CoreFullscreen from 'kolibri-common/components/CoreFullscreen';
+  import EmbeddedReadCard from 'kolibri-common/components/EmbeddedReadCard';
+  import ViewerToolbar from 'kolibri-common/components/ViewerToolbar';
   import useContentViewer from 'kolibri/composables/useContentViewer';
   import { ref, computed } from 'vue';
   import '../utils/domPolyfills';
@@ -153,7 +154,9 @@
       SideBar,
       PdfPage,
       CoreFullscreen,
+      EmbeddedReadCard,
       RecyclableScroller,
+      ViewerToolbar,
     },
     mixins: [commonCoreStrings],
     setup(props, context) {
@@ -202,6 +205,26 @@
       outline: null,
     }),
     computed: {
+      // Fullscreen reached from an embedded PDF should look like standalone fullscreen.
+      embeddedInline() {
+        return this.embedded && !this.isInFullscreen;
+      },
+      mobileEmbedded() {
+        return this.embeddedInline && this.windowIsSmall;
+      },
+      pdfViewerStyle() {
+        const style = {
+          backgroundColor: this.embeddedInline ? this.$themeTokens.surface : this.$themeTokens.text,
+        };
+        if (this.embeddedInline && !this.mobileEmbedded) {
+          // The mobile-embedded preview gets its card border from EmbeddedReadCard.
+          style.border = `1px solid ${this.$themeTokens.fineLine}`;
+          if (!this.windowIsSmall) {
+            style.minHeight = '400px';
+          }
+        }
+        return style;
+      },
       // Returns whether or not the current device is iOS.
       // Probably not perfect, but worked in testing.
       iOS() {
@@ -235,9 +258,6 @@
           this.visitedPages = value;
         },
       },
-      fullscreenText() {
-        return this.isInFullscreen ? this.$tr('exitFullscreen') : this.$tr('enterFullscreen');
-      },
       debouncedShowVisiblePages() {
         // So as not to share debounced functions between instances of the same component
         // and also to allow access to the cancel method of the debounced function
@@ -246,6 +266,10 @@
         return debounce(this.showVisiblePages, renderDebounceTime);
       },
       screenSizeMultiplier() {
+        if (this.mobileEmbedded) {
+          // Shrink the rendered pages so the preview fits within the card.
+          return 1.2;
+        }
         if (this.windowIsLarge) {
           return 1.25;
         }
@@ -256,7 +280,23 @@
       },
     },
     watch: {
+      mobileEmbedded() {
+        // screenSizeMultiplier depends on mobileEmbedded; re-derive scale so
+        // pages re-render at the appropriate size when entering/leaving the
+        // preview state.
+        this.$nextTick(() => {
+          if (this.firstPageWidth) {
+            this.scale = this.viewerWidth() / (this.firstPageWidth * this.screenSizeMultiplier);
+          }
+        });
+      },
       recycleListIsMounted(newVal) {
+        // Re-fit now the scroller exists; deferred until it applies its classes.
+        if (newVal === true && this.firstPageWidth) {
+          this.$nextTick(() => {
+            this.scale = this.viewerWidth() / (this.firstPageWidth * this.screenSizeMultiplier);
+          });
+        }
         // On iOS pinch zooming always targets the document no matter what.
         // meta viewport attrs for `user-scalable` are ignored in iOS because
         // Apple considered it an a11y issue not to. So pinch-zooming on iOS
@@ -281,11 +321,9 @@
       },
       showSideBar() {
         this.$nextTick(() => {
-          if (!this.$refs.pdfContainer || !this.$refs.pdfContainer.$el) {
-            return;
+          if (this.firstPageWidth) {
+            this.scale = this.viewerWidth() / (this.firstPageWidth * this.screenSizeMultiplier);
           }
-          const containerWidth = this.$refs.pdfContainer.$el.clientWidth;
-          this.scale = containerWidth / (this.firstPageWidth * this.screenSizeMultiplier);
         });
       },
     },
@@ -323,7 +361,7 @@
           const viewPort = firstPage.getViewport({ scale: 1 });
           this.firstPageHeight = viewPort.height;
           this.firstPageWidth = viewPort.width;
-          this.scale = this.$el.clientWidth / (this.firstPageWidth * this.screenSizeMultiplier);
+          this.scale = this.viewerWidth() / (this.firstPageWidth * this.screenSizeMultiplier);
 
           // init pdfPages array
           // ensuring that firstPageToRender is resolved so that we do not refetch the page
@@ -340,7 +378,7 @@
 
           const outline = await pdfDocument.getOutline();
           this.outline = outline;
-          this.showSideBar = outline && outline.length > 0 && this.windowIsLarge; // Remove if other tabs are already implemented
+          this.showSideBar = outline && outline.length > 0 && this.windowIsLarge && !this.embedded; // Remove if other tabs are already implemented
           // Reduce the scale slightly if we are showing the sidebar
           // at first load.
           this.scale = this.showSideBar ? 0.75 * this.scale : this.scale;
@@ -462,6 +500,14 @@
           this.showPage(i);
         }
       },
+      // The scroller is the box pages lay out in; before it exists, fall back to
+      // the viewer (never `this.$el`, which is the card wrapper, not the viewer).
+      viewerWidth() {
+        if (this.$refs.recycleList && this.$refs.recycleList.$el) {
+          return this.$refs.recycleList.$el.clientWidth;
+        }
+        return this.$refs.pdfViewer ? this.$refs.pdfViewer.$el.clientWidth : 0;
+      },
       zoomIn() {
         this.setScale(Math.min(scaleIncrement * 20, this.scale + scaleIncrement));
       },
@@ -673,18 +719,6 @@
         });
       },
     },
-    $trs: {
-      exitFullscreen: {
-        message: 'Exit fullscreen',
-        context:
-          "Learners can use the Esc key or the 'exit fullscreen' button to close the fullscreen view on the PDF Viewer.",
-      },
-      enterFullscreen: {
-        message: 'Enter fullscreen',
-        context:
-          'Learners can use the full screen button in the upper right corner to open a PDF in fullscreen view.',
-      },
-    },
   };
 
 </script>
@@ -693,38 +727,30 @@
 <style lang="scss" scoped>
 
   @import '~kolibri-design-system/lib/styles/definitions';
-  $controls-height: 40px;
+  $controls-height: 48px;
 
   .pdf-viewer {
     @extend %momentum-scroll;
     @extend %dropshadow-2dp;
 
     position: relative;
+    // No `flex: 1` — its `flex-basis: 0` would beat `.pdf-embedded`'s height.
+    height: 100%;
+    min-height: 0;
     overflow-y: hidden;
   }
 
+  // Stable gutter, else the fit is measured before the scrollbar it causes.
   .pdf-container {
     position: relative;
     overflow-y: auto;
+    scrollbar-gutter: stable;
   }
 
   .scroller-height {
     height: calc(100% - #{$controls-height});
   }
 
-  .controls {
-    position: relative;
-    z-index: 0; // Hide icons with transition
-    margin: 0 4px;
-  }
-
-  .pdf-controls-container {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 8px;
-  }
-
   .progress-bar {
     top: 50%;
     max-width: 200px;
@@ -737,20 +763,6 @@
     }
   }
 
-  .fullscreen-button {
-    margin: 0;
-
-    svg {
-      position: relative;
-      top: 8px;
-    }
-  }
-
-  .fullscreen-header {
-    display: flex;
-    height: $controls-height;
-  }
-
   .slide-enter-active {
     @extend %md-accelerate-func;
 
@@ -765,7 +777,7 @@
 
   .slide-enter,
   .slide-leave-to {
-    transform: translateY(-40px);
+    transform: translateY(-56px);
   }
 
   .full-height-container {
@@ -776,6 +788,35 @@
     height: 100%;
   }
 
+  .pdf-embedded {
+    height: 25vh;
+
+    .scroller-height {
+      height: calc(100% - #{$controls-height});
+    }
+
+    /deep/ .pdf-page {
+      margin: 2px auto;
+    }
+  }
+
+  // No toolbar in the card, so the pages get its full height.
+  .pdf-embedded.pdf-mobile-embedded {
+    .scroller-height {
+      height: 100%;
+    }
+
+    .pdf-container,
+    /deep/ .vue-recycle-scroller-item-wrapper {
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+  }
+
   /deep/ .resize-observer {
     position: absolute;
     top: 0;

From 4e07cee9e7e8fa3c36cbe9bb644e7db6fe6bf102 Mon Sep 17 00:00:00 2001
From: Richard Tibbles <richard@learningequality.org>
Date: Fri, 24 Jul 2026 16:49:37 -0700
Subject: [PATCH 3/4] Move table styles into SafeHtmlTable

The component's scoped `margin: 1em 0` outranked the global
`.table-container` full-bleed, zeroing its negative margin but keeping the
+32px width, so every table overhung its container by 16px. SafeHtmlTable
is the sole renderer of the element; the two margin intents are merged.
---
 .../components/SafeHTML/SafeHtmlTable.vue     | 44 ++++++++++++++++++-
 .../components/SafeHTML/style.scss            | 44 +------------------
 2 files changed, 44 insertions(+), 44 deletions(-)

diff --git a/packages/kolibri-common/components/SafeHTML/SafeHtmlTable.vue b/packages/kolibri-common/components/SafeHTML/SafeHtmlTable.vue
index 136eaf3e716..b2647cbfaeb 100644
--- a/packages/kolibri-common/components/SafeHTML/SafeHtmlTable.vue
+++ b/packages/kolibri-common/components/SafeHTML/SafeHtmlTable.vue
@@ -3,6 +3,7 @@
   <div
     class="table-container"
     data-testid="table-container"
+    :style="{ '--table-focus-outline': $themeTokens.focusOutline }"
   >
     <table
       class="safe-html"
@@ -99,9 +100,50 @@
 
 <style scoped>
 
+  /* Negative margins cancel the extra width, so wide tables scroll full-bleed. */
   .table-container {
-    margin: 1em 0;
+    width: calc(100% + 32px);
+    padding: 0 16px;
+    margin: 1em -16px;
     overflow-x: auto;
   }
 
+  .table-container:focus-visible {
+    outline: 3px solid var(--table-focus-outline) !important;
+    outline-offset: -3px !important;
+  }
+
+  table.safe-html {
+    min-width: 640px;
+    margin: 16px auto;
+    font-size: 16px;
+    table-layout: fixed;
+    border-collapse: collapse;
+  }
+
+  /* Slot content carries the parent's scope id, not this component's. */
+  /deep/ caption.safe-html {
+    margin: 0 auto 12px;
+    font-weight: 600;
+  }
+
+  /deep/ caption.safe-html.small-window {
+    text-align: start;
+  }
+
+  /deep/ thead.safe-html {
+    font-weight: 600;
+  }
+
+  /deep/ th.safe-html {
+    font-weight: 600;
+    text-align: left;
+  }
+
+  /deep/ th.safe-html,
+  /deep/ td.safe-html {
+    min-width: 200px;
+    padding: 16px;
+  }
+
 </style>
diff --git a/packages/kolibri-common/components/SafeHTML/style.scss b/packages/kolibri-common/components/SafeHTML/style.scss
index 84a1a452577..e8bd4f42a06 100644
--- a/packages/kolibri-common/components/SafeHTML/style.scss
+++ b/packages/kolibri-common/components/SafeHTML/style.scss
@@ -87,49 +87,7 @@ b.safe-html {
   @include text-style(bold);
 }
 
-.table-container {
-  width: calc(100% + 32px);
-  padding: 0 16px;
-  margin-left: -16px;
-  overflow-x: auto;
-}
-
-.table-container:focus-visible {
-  outline: 3px solid rgb(51, 172, 245) !important;
-  outline-offset: -3px !important;
-}
-
-table.safe-html {
-  min-width: 640px;
-  margin: 16px auto;
-  font-size: 16px;
-  table-layout: fixed;
-  border-collapse: collapse;
-}
-
-caption.safe-html {
-  margin: 0 auto 12px;
-  font-weight: 600;
-}
-
-caption.safe-html.small-window {
-  text-align: start;
-}
-
-thead.safe-html {
-  font-weight: 600;
-}
-
-th.safe-html {
-  font-weight: 600;
-  text-align: left;
-}
-
-th.safe-html,
-td.safe-html {
-  min-width: 200px;
-  padding: 16px;
-}
+// Table styles live in SafeHtmlTable, which renders them.
 
 .image-container {
   display: flex;

From a3fa1c6be0bce91c600aafbbb021d96cde36d936 Mon Sep 17 00:00:00 2001
From: Richard Tibbles <richard@learningequality.org>
Date: Mon, 27 Jul 2026 16:30:39 -0700
Subject: [PATCH 4/4] Enable the safe_html5_viewer plugin by default

KPUB_ZIP content has no renderer otherwise.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WAmANyoPp3rQdCNRdQt4k6
---
 kolibri/utils/build_config/default_plugins.py             | 1 +
 packages/kolibri/components/internal/filePresetStrings.js | 1 +
 2 files changed, 2 insertions(+)

diff --git a/kolibri/utils/build_config/default_plugins.py b/kolibri/utils/build_config/default_plugins.py
index ebab842e670..d2bea70f2f4 100644
--- a/kolibri/utils/build_config/default_plugins.py
+++ b/kolibri/utils/build_config/default_plugins.py
@@ -8,6 +8,7 @@
     "kolibri.plugins.learn",
     "kolibri.plugins.media_player",
     "kolibri.plugins.pdf_viewer",
+    "kolibri.plugins.safe_html5_viewer",
     "kolibri.plugins.perseus_viewer",
     "kolibri.plugins.qti_viewer",
     "kolibri.plugins.setup_wizard",
diff --git a/packages/kolibri/components/internal/filePresetStrings.js b/packages/kolibri/components/internal/filePresetStrings.js
index f3daeedfc6a..5b83464c37e 100644
--- a/packages/kolibri/components/internal/filePresetStrings.js
+++ b/packages/kolibri/components/internal/filePresetStrings.js
@@ -24,6 +24,7 @@ const filePresetStrings = {
   slideshow_manifest: 'Slideshow ({fileSize})',
   slideshow_image: 'Slideshow image ({fileSize})',
   bloompub: 'Bloom Pub Document ({fileSize})',
+  kpub: 'Kolibri Article ({fileSize})',
 };
 
 const filePresetTranslator = createTranslator('FilePresetStrings', filePresetStrings);