getodk · latin-panda · Mar 20, 2026 · Mar 16, 2026 · Mar 16, 2026 · Mar 16, 2026
diff --git a/.changeset/puny-teams-show.md b/.changeset/puny-teams-show.md
@@ -0,0 +1,5 @@
+---
+'@getodk/web-forms': patch
+---
+
+Changed the map tooltips to a dialog that explains the actions.
diff --git a/packages/web-forms/e2e/page-objects/controls/MapControl.ts b/packages/web-forms/e2e/page-objects/controls/MapControl.ts
@@ -95,21 +95,21 @@ export class MapControl {
 	}
 
 	async zoomToFitAll(mapComponent: Locator) {
-		const button = mapComponent.locator('button[title="Zoom to fit"]');
+		const button = mapComponent.locator('button.zoom-fit-all');
 		await expect(button).toBeVisible();
 		await button.click();
 	}
 
 	async centerCurrentLocation(mapComponent: Locator) {
-		const button = mapComponent.locator('button[title="Zoom to current location"]');
+		const button = mapComponent.locator('button.zoom-current-location');
 		await expect(button).toBeVisible();
 		await button.click();
 		// Wait for the current location icon to appear on the map.
 		await this.page.waitForTimeout(this.ANIMATION_TIME);
 	}
 
 	async toggleFullScreen(mapComponent: Locator) {
-		const button = mapComponent.locator('button[title="Full Screen"]');
+		const button = mapComponent.locator('button.fullscreen');
 		await expect(button).toBeVisible();
 		await button.click();
 	}

diff --git a/...ll-question-types.test.ts-snapshots/geopoint-maps-current-location-chromium.png b/...ll-question-types.test.ts-snapshots/geopoint-maps-current-location-chromium.png
diff --git a/...all-question-types.test.ts-snapshots/geopoint-maps-current-location-firefox.png b/...all-question-types.test.ts-snapshots/geopoint-maps-current-location-firefox.png
diff --git a/.../all-question-types.test.ts-snapshots/geopoint-maps-current-location-webkit.png b/.../all-question-types.test.ts-snapshots/geopoint-maps-current-location-webkit.png
diff --git a/...l/all-question-types.test.ts-snapshots/geopoint-maps-initial-state-chromium.png b/...l/all-question-types.test.ts-snapshots/geopoint-maps-initial-state-chromium.png
diff --git a/...al/all-question-types.test.ts-snapshots/geopoint-maps-initial-state-firefox.png b/...al/all-question-types.test.ts-snapshots/geopoint-maps-initial-state-firefox.png
diff --git a/...ual/all-question-types.test.ts-snapshots/geopoint-maps-initial-state-webkit.png b/...ual/all-question-types.test.ts-snapshots/geopoint-maps-initial-state-webkit.png
diff --git a/...al/all-question-types.test.ts-snapshots/geoshape-autoclose-polygon-chromium.png b/...al/all-question-types.test.ts-snapshots/geoshape-autoclose-polygon-chromium.png
diff --git a/...ual/all-question-types.test.ts-snapshots/geoshape-autoclose-polygon-firefox.png b/...ual/all-question-types.test.ts-snapshots/geoshape-autoclose-polygon-firefox.png
diff --git a/...sual/all-question-types.test.ts-snapshots/geoshape-autoclose-polygon-webkit.png b/...sual/all-question-types.test.ts-snapshots/geoshape-autoclose-polygon-webkit.png
diff --git a/...visual/all-question-types.test.ts-snapshots/geoshape-initial-state-chromium.png b/...visual/all-question-types.test.ts-snapshots/geoshape-initial-state-chromium.png
diff --git a/.../visual/all-question-types.test.ts-snapshots/geoshape-initial-state-firefox.png b/.../visual/all-question-types.test.ts-snapshots/geoshape-initial-state-firefox.png
diff --git a/...s/visual/all-question-types.test.ts-snapshots/geoshape-initial-state-webkit.png b/...s/visual/all-question-types.test.ts-snapshots/geoshape-initial-state-webkit.png
diff --git a/.../visual/all-question-types.test.ts-snapshots/geoshape-three-points-chromium.png b/.../visual/all-question-types.test.ts-snapshots/geoshape-three-points-chromium.png
diff --git a/...s/visual/all-question-types.test.ts-snapshots/geoshape-three-points-firefox.png b/...s/visual/all-question-types.test.ts-snapshots/geoshape-three-points-firefox.png
diff --git a/...es/visual/all-question-types.test.ts-snapshots/geoshape-three-points-webkit.png b/...es/visual/all-question-types.test.ts-snapshots/geoshape-three-points-webkit.png
diff --git a/.../all-question-types.test.ts-snapshots/geoshape-uncompleted-polygon-chromium.png b/.../all-question-types.test.ts-snapshots/geoshape-uncompleted-polygon-chromium.png
diff --git a/...l/all-question-types.test.ts-snapshots/geoshape-uncompleted-polygon-firefox.png b/...l/all-question-types.test.ts-snapshots/geoshape-uncompleted-polygon-firefox.png
diff --git a/...al/all-question-types.test.ts-snapshots/geoshape-uncompleted-polygon-webkit.png b/...al/all-question-types.test.ts-snapshots/geoshape-uncompleted-polygon-webkit.png
diff --git a/...visual/all-question-types.test.ts-snapshots/geotrace-initial-state-chromium.png b/...visual/all-question-types.test.ts-snapshots/geotrace-initial-state-chromium.png
diff --git a/.../visual/all-question-types.test.ts-snapshots/geotrace-initial-state-firefox.png b/.../visual/all-question-types.test.ts-snapshots/geotrace-initial-state-firefox.png
diff --git a/...s/visual/all-question-types.test.ts-snapshots/geotrace-initial-state-webkit.png b/...s/visual/all-question-types.test.ts-snapshots/geotrace-initial-state-webkit.png
diff --git a/...es/visual/all-question-types.test.ts-snapshots/geotrace-two-points-chromium.png b/...es/visual/all-question-types.test.ts-snapshots/geotrace-two-points-chromium.png
diff --git a/...ses/visual/all-question-types.test.ts-snapshots/geotrace-two-points-firefox.png b/...ses/visual/all-question-types.test.ts-snapshots/geotrace-two-points-firefox.png
diff --git a/...ases/visual/all-question-types.test.ts-snapshots/geotrace-two-points-webkit.png b/...ases/visual/all-question-types.test.ts-snapshots/geotrace-two-points-webkit.png
diff --git a/...ll-question-types.test.ts-snapshots/placement-map-current-location-chromium.png b/...ll-question-types.test.ts-snapshots/placement-map-current-location-chromium.png
diff --git a/...all-question-types.test.ts-snapshots/placement-map-current-location-firefox.png b/...all-question-types.test.ts-snapshots/placement-map-current-location-firefox.png
diff --git a/.../all-question-types.test.ts-snapshots/placement-map-current-location-webkit.png b/.../all-question-types.test.ts-snapshots/placement-map-current-location-webkit.png
diff --git a/...l/all-question-types.test.ts-snapshots/placement-map-initial-state-chromium.png b/...l/all-question-types.test.ts-snapshots/placement-map-initial-state-chromium.png
diff --git a/...al/all-question-types.test.ts-snapshots/placement-map-initial-state-firefox.png b/...al/all-question-types.test.ts-snapshots/placement-map-initial-state-firefox.png
diff --git a/...ual/all-question-types.test.ts-snapshots/placement-map-initial-state-webkit.png b/...ual/all-question-types.test.ts-snapshots/placement-map-initial-state-webkit.png
diff --git a/...all-question-types.test.ts-snapshots/placement-map-new-point-saved-chromium.png b/...all-question-types.test.ts-snapshots/placement-map-new-point-saved-chromium.png
diff --git a/.../all-question-types.test.ts-snapshots/placement-map-new-point-saved-firefox.png b/.../all-question-types.test.ts-snapshots/placement-map-new-point-saved-firefox.png
diff --git a/...l/all-question-types.test.ts-snapshots/placement-map-new-point-saved-webkit.png b/...l/all-question-types.test.ts-snapshots/placement-map-new-point-saved-webkit.png
diff --git a/...l/all-question-types.test.ts-snapshots/placement-map-point-removed-chromium.png b/...l/all-question-types.test.ts-snapshots/placement-map-point-removed-chromium.png
diff --git a/...al/all-question-types.test.ts-snapshots/placement-map-point-removed-firefox.png b/...al/all-question-types.test.ts-snapshots/placement-map-point-removed-firefox.png
diff --git a/...ual/all-question-types.test.ts-snapshots/placement-map-point-removed-webkit.png b/...ual/all-question-types.test.ts-snapshots/placement-map-point-removed-webkit.png
diff --git a/...visual/all-question-types.test.ts-snapshots/select-map-full-screen-chromium.png b/...visual/all-question-types.test.ts-snapshots/select-map-full-screen-chromium.png
diff --git a/.../visual/all-question-types.test.ts-snapshots/select-map-full-screen-firefox.png b/.../visual/all-question-types.test.ts-snapshots/select-map-full-screen-firefox.png
diff --git a/...s/visual/all-question-types.test.ts-snapshots/select-map-full-screen-webkit.png b/...s/visual/all-question-types.test.ts-snapshots/select-map-full-screen-webkit.png
diff --git a/...sual/all-question-types.test.ts-snapshots/select-map-initial-state-chromium.png b/...sual/all-question-types.test.ts-snapshots/select-map-initial-state-chromium.png
diff --git a/...isual/all-question-types.test.ts-snapshots/select-map-initial-state-firefox.png b/...isual/all-question-types.test.ts-snapshots/select-map-initial-state-firefox.png
diff --git a/...visual/all-question-types.test.ts-snapshots/select-map-initial-state-webkit.png b/...visual/all-question-types.test.ts-snapshots/select-map-initial-state-webkit.png
diff --git a/...ses/visual/all-question-types.test.ts-snapshots/select-map-panning-chromium.png b/...ses/visual/all-question-types.test.ts-snapshots/select-map-panning-chromium.png
diff --git a/...ases/visual/all-question-types.test.ts-snapshots/select-map-panning-firefox.png b/...ases/visual/all-question-types.test.ts-snapshots/select-map-panning-firefox.png
diff --git a/...cases/visual/all-question-types.test.ts-snapshots/select-map-panning-webkit.png b/...cases/visual/all-question-types.test.ts-snapshots/select-map-panning-webkit.png
diff --git a/...visual/all-question-types.test.ts-snapshots/select-map-point-saved-chromium.png b/...visual/all-question-types.test.ts-snapshots/select-map-point-saved-chromium.png
diff --git a/.../visual/all-question-types.test.ts-snapshots/select-map-point-saved-firefox.png b/.../visual/all-question-types.test.ts-snapshots/select-map-point-saved-firefox.png
diff --git a/...s/visual/all-question-types.test.ts-snapshots/select-map-point-saved-webkit.png b/...s/visual/all-question-types.test.ts-snapshots/select-map-point-saved-webkit.png
diff --git a/...ual/all-question-types.test.ts-snapshots/select-map-point-selected-chromium.png b/...ual/all-question-types.test.ts-snapshots/select-map-point-selected-chromium.png
diff --git a/...sual/all-question-types.test.ts-snapshots/select-map-point-selected-firefox.png b/...sual/all-question-types.test.ts-snapshots/select-map-point-selected-firefox.png
diff --git a/...isual/all-question-types.test.ts-snapshots/select-map-point-selected-webkit.png b/...isual/all-question-types.test.ts-snapshots/select-map-point-selected-webkit.png
diff --git a/...-question-types.test.ts-snapshots/select-map-removed-saved-feature-chromium.png b/...-question-types.test.ts-snapshots/select-map-removed-saved-feature-chromium.png
diff --git a/...l-question-types.test.ts-snapshots/select-map-removed-saved-feature-firefox.png b/...l-question-types.test.ts-snapshots/select-map-removed-saved-feature-firefox.png
diff --git a/...ll-question-types.test.ts-snapshots/select-map-removed-saved-feature-webkit.png b/...ll-question-types.test.ts-snapshots/select-map-removed-saved-feature-webkit.png
diff --git a/...isual/all-question-types.test.ts-snapshots/select-map-view-details-chromium.png b/...isual/all-question-types.test.ts-snapshots/select-map-view-details-chromium.png
diff --git a/...visual/all-question-types.test.ts-snapshots/select-map-view-details-firefox.png b/...visual/all-question-types.test.ts-snapshots/select-map-view-details-firefox.png
diff --git a/.../visual/all-question-types.test.ts-snapshots/select-map-view-details-webkit.png b/.../visual/all-question-types.test.ts-snapshots/select-map-view-details-webkit.png
diff --git a/...-question-types.test.ts-snapshots/select-map-zoom-current-location-chromium.png b/...-question-types.test.ts-snapshots/select-map-zoom-current-location-chromium.png
diff --git a/...l-question-types.test.ts-snapshots/select-map-zoom-current-location-firefox.png b/...l-question-types.test.ts-snapshots/select-map-zoom-current-location-firefox.png
diff --git a/...ll-question-types.test.ts-snapshots/select-map-zoom-current-location-webkit.png b/...ll-question-types.test.ts-snapshots/select-map-zoom-current-location-webkit.png
diff --git a/...ses/visual/all-question-types.test.ts-snapshots/select-map-zoom-in-chromium.png b/...ses/visual/all-question-types.test.ts-snapshots/select-map-zoom-in-chromium.png
diff --git a/...ases/visual/all-question-types.test.ts-snapshots/select-map-zoom-in-firefox.png b/...ases/visual/all-question-types.test.ts-snapshots/select-map-zoom-in-firefox.png
diff --git a/...cases/visual/all-question-types.test.ts-snapshots/select-map-zoom-in-webkit.png b/...cases/visual/all-question-types.test.ts-snapshots/select-map-zoom-in-webkit.png
diff --git a/...es/visual/all-question-types.test.ts-snapshots/select-map-zoom-out-chromium.png b/...es/visual/all-question-types.test.ts-snapshots/select-map-zoom-out-chromium.png
diff --git a/...ses/visual/all-question-types.test.ts-snapshots/select-map-zoom-out-firefox.png b/...ses/visual/all-question-types.test.ts-snapshots/select-map-zoom-out-firefox.png
diff --git a/...ases/visual/all-question-types.test.ts-snapshots/select-map-zoom-out-webkit.png b/...ases/visual/all-question-types.test.ts-snapshots/select-map-zoom-out-webkit.png
diff --git a/...estion-types.test.ts-snapshots/select-map-zoom-to-fit-all-features-chromium.png b/...estion-types.test.ts-snapshots/select-map-zoom-to-fit-all-features-chromium.png
diff --git a/...uestion-types.test.ts-snapshots/select-map-zoom-to-fit-all-features-firefox.png b/...uestion-types.test.ts-snapshots/select-map-zoom-to-fit-all-features-firefox.png
diff --git a/...question-types.test.ts-snapshots/select-map-zoom-to-fit-all-features-webkit.png b/...question-types.test.ts-snapshots/select-map-zoom-to-fit-all-features-webkit.png
diff --git a/packages/web-forms/src/assets/styles/map-block.scss b/packages/web-forms/src/assets/styles/map-block.scss
@@ -1,5 +1,12 @@
 .map-block-component {
 	--odk-map-controls-spacing: 8px;
+	--odk-map-bottom-placeholder-height: 60px;
+}
+
+@mixin map-block-sm {
+	@container map-block (max-height: 333px) {
+		@content;
+	}
 }
 
 @mixin map-control-bar {
@@ -11,7 +18,7 @@
 	background: none;
 	overflow: hidden;
 	gap: var(--odk-map-controls-spacing);
-	z-index: var(--odk-z-index-form-floating);
+	z-index: var(--odk-z-index-form-content);
 }
 
 @mixin map-control-bar-vertical {

diff --git a/packages/web-forms/src/assets/styles/primevue.scss b/packages/web-forms/src/assets/styles/primevue.scss
@@ -1,3 +1,5 @@
+@use './style' as odk;
+
 .odk-form {
 	.p-datepicker-input:disabled,
 	.p-datepicker-input:disabled + .p-datepicker-input-icon-container,
@@ -36,13 +38,15 @@
 	.p-dialog-header,
 	.p-dialog-content,
 	.p-dialog-footer {
-		padding: 20px;
+		padding: var(--odk-spacing-xl);
 	}
 
 	.p-dialog-content,
 	.p-dialog-footer {
 		padding-top: 0;
 	}
+
+	@include odk.toggle-visibility();
 }
 
 .p-disabled,

diff --git a/packages/web-forms/src/assets/styles/select-options.scss b/packages/web-forms/src/assets/styles/select-options.scss
@@ -1,9 +1,5 @@
 @use 'primeflex/core/_variables.scss' as pf;
 
-.value-option {
-	--text-content-margin: 15px;
-}
-
 .value-option {
 	display: flex;
 	align-items: center;
@@ -58,7 +54,7 @@
 
 	:deep(.media-content) {
 		background: transparent;
-		height: calc(100% - (var(--odk-base-font-size) + (var(--text-content-margin) * 2)));
+		height: calc(100% - (var(--odk-base-font-size) + (var(--odk-spacing-l) * 2)));
 		min-height: 54px;
 		flex: 0 1 auto;
 		margin-left: auto;
@@ -70,15 +66,15 @@
 
 		:deep(.p-checkbox),
 		:deep(.p-radiobutton) {
-			margin: auto 0 auto 20px;
+			margin: auto 0 auto var(--odk-spacing-xl);
 			align-self: flex-start;
 		}
 
 		:deep(.text-content) {
 			width: fit-content;
 			min-width: unset;
 			max-width: calc(100% - 70px);
-			margin: var(--text-content-margin) 20px;
+			margin: var(--odk-spacing-l) var(--odk-spacing-xl);
 			flex: 1 1 auto;
 		}
 	}
@@ -94,7 +90,7 @@
 }
 
 .value-option:not(.no-buttons) :deep(.text-content) {
-	margin-left: 10px;
+	margin-left: var(--odk-spacing-m);
 }
 
 .select-with-images .value-option {
@@ -108,7 +104,7 @@
 		align-items: center;
 		width: 100%;
 		justify-content: flex-start;
-		gap: 10px;
+		gap: var(--odk-spacing-m);
 
 		.media-block {
 			border-radius: 0;

diff --git a/packages/web-forms/src/assets/styles/style.scss b/packages/web-forms/src/assets/styles/style.scss
@@ -56,6 +56,12 @@
 	--odk-max-image-height: 300px;
 	--odk-image-container-size: 300px;
 
+	--odk-spacing-s: 5px;
+	--odk-spacing-m: 10px;
+	--odk-spacing-l: 15px;
+	--odk-spacing-xl: 20px;
+	--odk-spacing-xxl: 30px;
+
 	/*
 	 * This project uses a centralized z-index layering system to manage the stacking order of UI
 	 * elements, preventing overlap issues and ensuring maintainability.
@@ -89,6 +95,36 @@
 	--odk-z-index-topmost: 1000;
 }
 
+@mixin toggle-visibility($display: inline-block) {
+	/**
+	 * The "!important" is intentional here. These visibility toggles must strictly enforce their state
+	 * and override any nested component styles.
+	 */
+	.desktop-only {
+		display: #{$display} !important;
+	}
+
+	.mobile-only {
+		display: none !important;
+	}
+
+	@media screen and (max-width: #{pf.$sm}) {
+		.desktop-only {
+			display: none !important;
+		}
+
+		.mobile-only {
+			display: #{$display} !important;
+		}
+	}
+}
+
+@mixin sm-constrained {
+	@media (width <= #{pf.$sm}) and (orientation: portrait), (height <= #{pf.$sm}) and (orientation: landscape) {
+		@content;
+	}
+}
+
 .odk-form {
 	@keyframes shimmer {
 		0% {
@@ -112,23 +148,23 @@
 		animation: shimmer 1.5s infinite;
 	}
 
-	.desktop-only {
-		display: inline;
-	}
-
-	.mobile-only {
-		display: none;
-	}
+	@include toggle-visibility();
 }
 
-@media screen and (max-width: #{pf.$sm}) {
-	.odk-form {
-		.desktop-only {
-			display: none;
-		}
+.odk-form-list {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+	overflow: auto;
 
-		.mobile-only {
-			display: inline;
+	.odk-form-list-item {
+		display: block;
+		padding: var(--odk-spacing-l) 0;
+		width: 100%;
+		border: none;
+
+		&:not(:first-child) {
+			border-top: 1px solid var(--odk-border-color);
 		}
 	}
 }
diff --git a/packages/web-forms/src/components/FormLoadFailureDialog.vue b/packages/web-forms/src/components/FormLoadFailureDialog.vue
@@ -64,7 +64,7 @@ const detail = computed((): FormLoadErrorDetail | null => {
 
 <style lang="scss" scoped>
 .form-load-failure-dialog .message {
-	margin: 10px 0 30px 0;
+	margin: var(--odk-spacing-m) 0 var(--odk-spacing-xxl) 0;
 	color: var(--odk-error-text-color);
 	font-size: var(--odk-base-font-size);
 	white-space: pre-wrap;

diff --git a/packages/web-forms/src/components/OdkWebForm.vue b/packages/web-forms/src/components/OdkWebForm.vue
@@ -366,13 +366,13 @@ onUnmounted(() => {
 		flex-direction: column;
 		max-width: var(--odk-max-form-width);
 		margin: auto;
-		padding-top: 10px;
+		padding-top: var(--odk-spacing-m);
 
 		.questions-card {
 			border-radius: var(--odk-radius);
 			box-shadow: none;
 			border-top: none;
-			margin-top: 20px;
+			margin-top: var(--odk-spacing-xl);
 		}
 
 		.questions-card > :deep(.p-card-body) {
@@ -396,7 +396,7 @@ onUnmounted(() => {
 			top: 1rem;
 
 			:deep(.p-message-wrapper) {
-				padding: 8px 15px;
+				padding: 8px var(--odk-spacing-l);
 				flex-grow: 1;
 			}
 
@@ -407,7 +407,7 @@ onUnmounted(() => {
 			}
 
 			.odk-icon {
-				margin-right: 10px;
+				margin-right: var(--odk-spacing-m);
 			}
 
 			.form-error-text-wrap {
@@ -416,7 +416,7 @@ onUnmounted(() => {
 				padding: 0;
 
 				li:not(:last-child) {
-					margin-bottom: 10px;
+					margin-bottom: var(--odk-spacing-m);
 				}
 			}
 		}
@@ -463,7 +463,7 @@ onUnmounted(() => {
 			font-size: 14px;
 			font-weight: 300;
 			color: var(--odk-muted-text-color);
-			margin-top: 5px;
+			margin-top: var(--odk-spacing-s);
 		}
 	}
 }
@@ -501,7 +501,7 @@ onUnmounted(() => {
 			.footer {
 				order: 4;
 				button {
-					margin-right: 20px;
+					margin-right: var(--odk-spacing-xl);
 				}
 			}
 		}

diff --git a/packages/web-forms/src/components/appearances/ColumnarAppearance.vue b/packages/web-forms/src/components/appearances/ColumnarAppearance.vue
@@ -24,7 +24,7 @@ const nColumnstyle = computed(() => {
 .columns-pack {
 	display: flex;
 	flex-wrap: wrap;
-	gap: 20px;
+	gap: var(--odk-spacing-xl);
 
 	:deep(.value-option) .text-content {
 		min-width: fit-content;
@@ -33,7 +33,7 @@ const nColumnstyle = computed(() => {
 
 .columns {
 	display: grid;
-	gap: 20px;
+	gap: var(--odk-spacing-xl);
 	grid-template-columns: repeat(2, 1fr);
 
 	@media screen and (min-width: #{pf.$md}) {

diff --git a/packages/web-forms/src/components/appearances/FieldListTable.vue b/packages/web-forms/src/components/appearances/FieldListTable.vue
@@ -21,7 +21,7 @@ defineProps<{ appearances: SelectNodeAppearances }>();
 	justify-content: flex-start;
 	border-radius: var(--odk-radius);
 	margin-bottom: 6px;
-	padding-left: 10px;
+	padding-left: var(--odk-spacing-m);
 
 	:deep(.control-text) {
 		margin-bottom: 0;
@@ -40,7 +40,7 @@ defineProps<{ appearances: SelectNodeAppearances }>();
 		min-width: 50px;
 		text-align: center;
 		vertical-align: middle;
-		padding: 15px 0;
+		padding: var(--odk-spacing-l) 0;
 		outline: none;
 		background-color: unset;
 
@@ -114,7 +114,7 @@ defineProps<{ appearances: SelectNodeAppearances }>();
 
 	:deep(.value-option) {
 		position: relative;
-		gap: 10px;
+		gap: var(--odk-spacing-m);
 		justify-content: center;
 
 		.p-checkbox,

diff --git a/packages/web-forms/src/components/common/GeolocationFormattedValue.vue b/packages/web-forms/src/components/common/GeolocationFormattedValue.vue
@@ -50,7 +50,7 @@ const locationPoints = computed<GeolocationValue>(() => {
 }
 
 .geolocation-formatted-value > span {
-	margin-right: 10px;
+	margin-right: var(--odk-spacing-m);
 	font-size: var(--odk-answer-font-size);
 	font-weight: 300;
 }
@@ -59,7 +59,7 @@ const locationPoints = computed<GeolocationValue>(() => {
 	.geolocation-formatted-value {
 		display: flex;
 		flex-direction: column;
-		gap: 10px;
+		gap: var(--odk-spacing-m);
 	}
 }
 </style>
diff --git a/packages/web-forms/src/components/common/IconSVG.vue b/packages/web-forms/src/components/common/IconSVG.vue
@@ -24,6 +24,7 @@ import {
 	mdiFileOutline,
 	mdiFullscreen,
 	mdiImage,
+	mdiInformationSlabCircleOutline,
 	mdiMapMarkerOutline,
 	mdiMenu,
 	mdiPencil,
@@ -65,6 +66,7 @@ const iconMap: Record<string, string> = {
 	mdiFileOutline,
 	mdiFullscreen,
 	mdiImage,
+	mdiInformationSlabCircleOutline,
 	mdiMapMarkerOutline,
 	mdiMenu,
 	mdiPencil,

diff --git a/packages/web-forms/src/components/common/LikertWidget.vue b/packages/web-forms/src/components/common/LikertWidget.vue
@@ -31,9 +31,9 @@ defineEmits(['change']);
 		flex-wrap: nowrap;
 		cursor: pointer;
 		outline: none;
-		padding: 10px 0;
-		margin-left: 10px;
-		margin-right: 10px;
+		padding: var(--odk-spacing-m) 0;
+		margin-left: var(--odk-spacing-m);
+		margin-right: var(--odk-spacing-m);
 		background: transparent;
 
 		&:last-of-type::before {
@@ -72,10 +72,10 @@ defineEmits(['change']);
 
 		.text-content {
 			text-align: center;
-			margin: -11.5px 0 10px 0;
+			margin: -11.5px 0 var(--odk-spacing-m) 0;
 			width: fit-content;
 			position: relative;
-			padding-top: 20px;
+			padding-top: var(--odk-spacing-xl);
 			word-break: break-word;
 			max-width: unset;
 		}