fix: preserve responsive image proportions

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.2.1 - 2026-07-22
+
+- Preserve the intrinsic aspect ratio of embedded images when their recorded
+  display width is reduced to fit the reader, including linked images.
+- Allow the page reader to scroll when its Toolbox grid area is constrained.
+
 ## 0.2.0 - 2026-07-22
 
 - Open unfragmented FSSHTTPB package-store `.one` sections through the same

README.md

@@ -9,7 +9,7 @@ It is also an independent application in the add·ideas Toolbox contract. The
 source uses the Toolbox SDK shell and manifest, builds with Vite `base: './'`,
 and is delivered to Toolbox Portal as a checksummed static ZIP.
 
-## What version 0.2.0 supports
+## What version 0.2.1 supports
 
 - Desktop revision-store and unfragmented FSSHTTPB package-store `.one`
   sections from the tested producer families.
@@ -80,7 +80,7 @@ supplied through the SDK's `?toolbox=` context mechanism. The app uses the SDK
 
 ```sh
 npm run release:artifact
-(cd release && sha256sum -c onenote-tools-0.2.0.sha256)
+(cd release && sha256sum -c onenote-tools-0.2.1.sha256)
 ```
 
 The ZIP root contains the built static app and manifest plus the changelog,

SOURCE.md

@@ -1,8 +1,8 @@
 # Corresponding source
 
-The corresponding source for OneNote Tools 0.2.0 is the `v0.2.0` tag:
+The corresponding source for OneNote Tools 0.2.1 is the `v0.2.1` tag:
 
-https://git.add-ideas.de/zemion/onenote-tools/src/tag/v0.2.0
+https://git.add-ideas.de/zemion/onenote-tools/src/tag/v0.2.1
 
 Build the release from that tag with Node.js 22 or newer:
 

docs/FORMAT_SUPPORT.md

@@ -1,6 +1,6 @@
 # Format support
 
-## Version 0.2.0 support matrix
+## Version 0.2.1 support matrix
 
 | Input or feature                 | Status               | Tested evidence and boundary                                                                         |
 | -------------------------------- | -------------------- | ---------------------------------------------------------------------------------------------------- |

docs/REFERENCE_IMPLEMENTATIONS.md

@@ -1,6 +1,6 @@
 # Specifications and pinned references
 
-Version 0.2.0 records these immutable implementation revisions:
+Version 0.2.1 records these immutable implementation revisions:
 
 | Repository                                                                                                             | Exact revision                             | Use                                                                                           |
 | ---------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | --------------------------------------------------------------------------------------------- |

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "onenote-tools",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "onenote-tools",
-      "version": "0.2.0",
+      "version": "0.2.1",
       "license": "MPL-2.0 AND LGPL-2.1-only",
       "dependencies": {
         "@add-ideas/toolbox-contract": "0.1.1",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "onenote-tools",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "A local-first browser reader and exporter for OneNote files.",
   "license": "MPL-2.0 AND LGPL-2.1-only",
   "private": true,

public/toolbox-app.json

@@ -40,5 +40,5 @@
     "repository": "https://git.add-ideas.de/zemion/onenote-tools",
     "license": "MPL-2.0 AND LGPL-2.1-only"
   },
-  "version": "0.2.0"
+  "version": "0.2.1"
 }

src/components/PageReader.test.tsx

@@ -59,6 +59,9 @@ const page: OneNotePageDto = {
       id: 'image-1',
       resourceId: 'resource-image',
       altText: 'Embedded diagram',
+      pictureWidth: 8,
+      pictureHeight: 4,
+      href: 'https://example.com/diagram',
       isBackground: false,
       layout: {},
     },
@@ -141,6 +144,13 @@ describe('PageReader structured content', () => {
         screen.getByRole('img', { name: 'Embedded diagram' })
       ).toHaveAttribute('src', 'blob:local-image')
     );
+    expect(screen.getByRole('img', { name: 'Embedded diagram' })).toHaveStyle({
+      width: '384px',
+      height: 'auto',
+    });
+    expect(
+      screen.getByRole('link', { name: 'Embedded diagram' })
+    ).toHaveAttribute('href', 'https://example.com/diagram');
   });
 
   it('downloads an attachment only after an explicit user action', async () => {

src/components/PageReader.tsx

@@ -400,7 +400,9 @@ function ImageView({
         alt={image.altText ?? image.filename ?? ''}
         style={{
           width: halfInches(image.pictureWidth),
-          height: halfInches(image.pictureHeight),
+          // A fixed height would remain unchanged when max-width scales a
+          // large image down, distorting its aspect ratio.
+          height: 'auto',
         }}
       />
     ) : (

src/styles.css

@@ -333,6 +333,8 @@ p {
 
 .page-reader {
   min-width: 0;
+  min-height: 0;
+  overflow: auto;
   padding: clamp(1.4rem, 4vw, 3rem);
   background: #fff;
 }
@@ -453,9 +455,15 @@ p {
   display: block;
   max-width: 100%;
   height: auto;
+  object-fit: contain;
   border-radius: 0.3rem;
 }
 
+.onenote-image > a {
+  display: block;
+  max-width: 100%;
+}
+
 .onenote-image figcaption {
   max-width: 40rem;
   color: #716675;

src/version.ts

@@ -1 +1 @@
-export const APP_VERSION = '0.2.0';
+export const APP_VERSION = '0.2.1';