fix(viewer): align content of old version in viewer version comparison

The source viewer in the "compare side by side" view in Viewer app
doesn't have a menubar, so it needs a margin-top to align both versions
vertically.

Signed-off-by: Jonas <jonas@freesources.org>

Author: mejo-

playwright/e2e/versions.spec.ts

@@ -62,6 +62,15 @@ test.describe('Versions with distant timestamps', () => {
 		const current = page.locator('.ProseMirror[contenteditable="true"]')
 		await expect(oldVersion.getByRole('heading', { name: 'V1' })).toBeVisible()
 		await expect(current.getByRole('heading', { name: 'V3' })).toBeVisible()
+
+		// Test that version contents are vertically aligned
+		const oldBox = await oldVersion
+			.getByRole('heading', { name: 'V1' })
+			.boundingBox()
+		const currentBox = await oldVersion
+			.getByRole('heading', { name: 'V3' })
+			.boundingBox()
+		expect(Math.abs(oldBox!.y - currentBox!.y)).toBeLessThan(5)
 	})
 })
 

src/components/ViewerComponent.vue

@@ -146,6 +146,13 @@ body .toastify.dialogs {
 	margin-top: calc(45px + var(--default-clickable-area));
 }
 
+.viewer--split .source-viewer .editor__content-wrapper {
+	// Account for missing menubar for old version in version comparison
+	margin-top: calc(
+		var(--default-clickable-area) + 2 * var(--default-grid-baseline)
+	);
+}
+
 .viewer[data-handler='text'] .modal-wrapper .modal-container {
 	bottom: 0;
 }