web: amber beta chip instead of a superscript

Author: rigor789

web/src/components/CellDetails.vue

@@ -97,8 +97,9 @@ function shortDate(version: string): string {
 				role="listitem"
 				:title="`${label} ${item.version}: ${STATE_HELP[item.cell.state]} ${item.cell.reason}`"
 			>
-				<span class="h-6 text-sm leading-6 font-semibold tabular-nums whitespace-nowrap" :class="LABEL[item.cell.state]">
-					{{ item.version }}<sup v-if="item.prerelease" class="ml-px font-normal opacity-70">β</sup>
+				<span class="flex h-6 items-center gap-1 text-sm leading-6 font-semibold tabular-nums whitespace-nowrap" :class="LABEL[item.cell.state]">
+					{{ item.version }}
+					<span v-if="item.prerelease" class="rounded-full bg-amber-100 px-1.5 py-px text-[9px] font-semibold tracking-wider text-amber-700 uppercase dark:bg-amber-900/40 dark:text-amber-300">beta</span>
 				</span>
 				<span class="relative flex h-6 w-full items-center justify-center">
 					<span

web/src/components/CompatCell.vue

@@ -52,7 +52,8 @@ const background = computed(() => {
 			:title="`${summary.prerelease.version} beta: ${summary.prerelease.cell.reason}`"
 		>
 			<StateIcon :state="summary.prerelease.cell.state" :size="12" />
-			{{ summary.prerelease.version }}β
+			{{ summary.prerelease.version }}
+			<span class="rounded-full bg-amber-100 px-1.5 py-px text-[9px] font-semibold tracking-wider text-amber-700 uppercase dark:bg-amber-900/40 dark:text-amber-300">beta</span>
 		</span>
 		<span
 			v-if="flagged"