From 91326d3970461b56bae9ef81450df99b5237edfc Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Tue, 7 Apr 2026 23:50:40 +0200
Subject: [PATCH 1/4] fixes small image display and fixes X button placement

---
 .../web-forms/src/assets/styles/style.scss    |  2 +-
 .../common/media/MediaBlockBase.vue           |  4 ++--
 .../form-elements/upload/UploadControl.vue    | 20 +++++++++++++++++--
 3 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/packages/web-forms/src/assets/styles/style.scss b/packages/web-forms/src/assets/styles/style.scss
index 5ba31c4e3..aee34ff7d 100644
--- a/packages/web-forms/src/assets/styles/style.scss
+++ b/packages/web-forms/src/assets/styles/style.scss
@@ -54,7 +54,7 @@
 	--odk-max-form-width: 900px;
 
 	--odk-max-image-height: 300px;
-	--odk-image-container-size: 300px;
+	--odk-media-container-size: 300px;
 
 	--odk-spacing-s: 5px;
 	--odk-spacing-m: 10px;
diff --git a/packages/web-forms/src/components/common/media/MediaBlockBase.vue b/packages/web-forms/src/components/common/media/MediaBlockBase.vue
index c91361367..e20812a74 100644
--- a/packages/web-forms/src/components/common/media/MediaBlockBase.vue
+++ b/packages/web-forms/src/components/common/media/MediaBlockBase.vue
@@ -126,7 +126,7 @@ watchEffect(() => {
 	}
 
 	&.small-fixed {
-		max-width: var(--odk-image-container-size);
+		max-width: var(--odk-media-container-size);
 	}
 
 	&.fit-content {
@@ -134,7 +134,7 @@ watchEffect(() => {
 	}
 
 	&.broken-file {
-		max-width: var(--odk-image-container-size);
+		max-width: var(--odk-media-container-size);
 
 		img {
 			max-width: 90%;
diff --git a/packages/web-forms/src/components/form-elements/upload/UploadControl.vue b/packages/web-forms/src/components/form-elements/upload/UploadControl.vue
index 113c6a137..bbc315883 100644
--- a/packages/web-forms/src/components/form-elements/upload/UploadControl.vue
+++ b/packages/web-forms/src/components/form-elements/upload/UploadControl.vue
@@ -181,7 +181,13 @@ const onDrop = (event: DragEvent) => {
 					<template v-else>
 						<UploadFilePreview :file-name="fileName" />
 					</template>
-					<Button v-if="!isDisabled" severity="secondary" outlined class="clear-button" @click="clearValue">
+					<Button
+						v-if="!isDisabled"
+						:class="{ 'over-preview': fileType === 'image' || fileType === 'video' }"
+						severity="secondary"
+						outlined
+						class="clear-button"
+						@click="clearValue">
 						<IconSVG name="mdiClose" variant="muted" size="sm" />
 					</Button>
 				</div>
@@ -232,13 +238,23 @@ const onDrop = (event: DragEvent) => {
 }
 
 .upload-content {
+	width: fit-content;
+	min-width: min(100%, var(--odk-media-container-size));
 	display: flex;
 	align-items: center;
 	gap: var(--odk-spacing-l);
+	position: relative;
 
-	button {
+	button.clear-button:not(.over-preview) {
 		align-self: flex-start;
 	}
+
+	button.clear-button.over-preview {
+		position: absolute;
+		top: var(--odk-spacing-m);
+		right: var(--odk-spacing-m);
+		background: var(--odk-base-background-color);
+	}
 }
 
 .drag-and-drop {

From 413a35d007b390907fed54dfa03dae359fd276c3 Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Wed, 8 Apr 2026 20:27:40 +0200
Subject: [PATCH 2/4] changeset

---
 .changeset/purple-rabbits-cover.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/purple-rabbits-cover.md

diff --git a/.changeset/purple-rabbits-cover.md b/.changeset/purple-rabbits-cover.md
new file mode 100644
index 000000000..659ad4211
--- /dev/null
+++ b/.changeset/purple-rabbits-cover.md
@@ -0,0 +1,5 @@
+---
+'@getodk/web-forms': patch
+---
+
+Adjust the display of small images and the placement of the clear button

From 5cddf888e1c4bec2b7f26952782006268758249f Mon Sep 17 00:00:00 2001
From: Jennifer Q <66472237+latin-panda@users.noreply.github.com>
Date: Wed, 8 Apr 2026 20:38:36 +0200
Subject: [PATCH 3/4] changeset

---
 .changeset/purple-rabbits-cover.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/purple-rabbits-cover.md b/.changeset/purple-rabbits-cover.md
index 659ad4211..f40d287a3 100644
--- a/.changeset/purple-rabbits-cover.md
+++ b/.changeset/purple-rabbits-cover.md
@@ -2,4 +2,4 @@
 '@getodk/web-forms': patch
 ---
 
-Adjust the display of small images and the placement of the clear button
+Adjust the position of the media preview clear button.

From 1410b97d00d77b6baadd798c88e2a1071112253f Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Thu, 9 Apr 2026 10:26:55 +0200
Subject: [PATCH 4/4] fixes video in portrait

---
 .../form-elements/upload/UploadVideoPreview.vue     | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/web-forms/src/components/form-elements/upload/UploadVideoPreview.vue b/packages/web-forms/src/components/form-elements/upload/UploadVideoPreview.vue
index 6461e1b9a..ca83e1cef 100644
--- a/packages/web-forms/src/components/form-elements/upload/UploadVideoPreview.vue
+++ b/packages/web-forms/src/components/form-elements/upload/UploadVideoPreview.vue
@@ -20,15 +20,22 @@ watchEffect(() => {
 </script>
 
 <template>
-	<div v-if="mediaUrl">
+	<div v-if="mediaUrl" class="video-container">
 		<video controls :src="mediaUrl" />
 	</div>
 </template>
 
 <style scoped lang="scss">
-video {
+.video-container {
+	background: var(--odk-muted-background-color);
 	width: 100%;
-	max-height: var(--odk-max-image-height);
+	justify-content: center;
 	border-radius: var(--odk-radius);
+
+	video {
+		width: 100%;
+		max-height: var(--odk-max-image-height);
+		border-radius: var(--odk-radius);
+	}
 }
 </style>