fix: SEO SPA editor last fixes (3/4)

web/src/components/MediaField.vue

@@ -76,7 +76,7 @@ function remove() {
 			<div class="flex min-w-0 flex-1 flex-col gap-1.5">
 				<span
 					v-if="caption"
-					class="truncate font-mono text-xs text-highlighted"
+					class="truncate font-mono text-xs/5 text-highlighted"
 					data-testid="media-field-caption"
 					>{{ caption }}</span
 				>

web/src/components/SeoPanel.vue

@@ -30,7 +30,6 @@ import { chipLabel, descriptionChip } from '@/lib/seoCopy'
 import type { DirectoryNotice } from '@/lib/directoryTypes'
 import {
 	DESCRIPTION_RANGE,
-	SOCIAL_TITLE_RANGE,
 	TITLE_RANGE,
 	hasSocialOverrides,
 	siteDisplayName,
@@ -328,7 +327,7 @@ onMounted(() => {
 	names.resolve([siteImageId.value, seo.value.cover_image_id, seo.value.social_image_id])
 })
 
-const DISABLED_FIELD = 'disabled:opacity-40'
+const DISABLED_FIELD = 'disabled:bg-elevated disabled:opacity-100'
 const fieldUi = { base: `h-11 text-lg text-ellipsis md:h-10 md:text-sm ${DISABLED_FIELD}` }
 const monoFieldUi = {
 	base: `h-11 font-mono text-base text-ellipsis md:h-10 md:text-code ${DISABLED_FIELD}`,
@@ -553,13 +552,6 @@ const areaUi = { base: `min-h-30 text-lg md:min-h-24 md:text-sm ${DISABLED_FIELD
 			>
 				<div class="flex flex-col gap-1.5">
 					<DirectoryField :label="t('Social title')" optional>
-						<template #hint>
-							<SoftCounter
-								:value="charCount(seo.social_title)"
-								:min="SOCIAL_TITLE_RANGE.min"
-								:max="SOCIAL_TITLE_RANGE.max"
-							/>
-						</template>
 						<UInput
 							:model-value="seo.social_title"
 							:placeholder="seo.seo_title || articleTitle"
@@ -639,7 +631,7 @@ const areaUi = { base: `min-h-30 text-lg md:min-h-24 md:text-sm ${DISABLED_FIELD
 				"
 				:ui="{
 					root: 'items-start gap-3',
-					base: 'mt-0.5 h-4.5 w-8 data-[disabled]:opacity-40',
+					base: 'mt-0.5 h-4.5 w-8',
 					thumb: 'size-3.5',
 					label: 'font-medium text-highlighted',
 					description: 'text-xs/4.5 text-pretty text-muted',