Hide germany when out of stock. Also, fixes wrapping issue with testing connection (#4356)

packages/ui/src/components/billing/ServersPurchase1Region.vue

@@ -50,6 +50,19 @@ const sortedRegions = computed(() => {
 	})
 })
 
+const visibleRegions = computed(() => {
+	if (!loading.value) {
+		return sortedRegions.value.filter((region) => {
+			// only show eu-lim if it has stock because we're not restocking it.
+			if (region.shortcode === 'eu-lim') {
+				return currentStock.value[region.shortcode] > 0
+			}
+			return true
+		})
+	}
+	return sortedRegions.value
+})
+
 const selectedRam = ref<number>(-1)
 
 const ramOptions = computed(() => {
@@ -204,7 +217,7 @@ onMounted(() => {
 		</h2>
 		<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
 			<ServersRegionButton
-				v-for="region in sortedRegions"
+				v-for="region in visibleRegions"
 				:key="region.shortcode"
 				v-model="selectedRegion"
 				:region="region"

packages/ui/src/components/billing/ServersRegionButton.vue

@@ -67,14 +67,16 @@ function setRegion() {
 				{{ title }}
 				<span v-if="outOfStock" class="text-sm text-secondary">(Out of stock)</span>
 			</span>
-			<span class="text-xs flex items-center gap-1 text-secondary font-medium">
+			<span
+				class="text-xs flex items-center flex-wrap justify-center gap-1 text-secondary font-medium"
+			>
 				<template v-if="locationSubtitle">
 					<span>
 						{{ locationSubtitle }}
 					</span>
 					<span v-if="ping !== -1">•</span>
 				</template>
-				<template v-if="ping !== -1">
+				<span v-if="ping !== -1" class="flex gap-1 items-center">
 					<SignalIcon
 						v-if="ping"
 						aria-hidden="true"
@@ -85,7 +87,7 @@ function setRegion() {
 					<SpinnerIcon v-else class="animate-spin" />
 					<template v-if="ping"> {{ ping }}ms </template>
 					<span v-else> Testing connection... </span>
-				</template>
+				</span>
 			</span>
 		</span>
 	</button>