feat: edit an existing custom type

web/src/components/OfflineBanner.vue

@@ -16,17 +16,32 @@ const BLEED_UI = {
 	title: 'whitespace-normal font-normal text-wrap',
 }
 
+const FLUSH_UI = { ...BLEED_UI, root: 'w-auto' }
+
 const props = withDefaults(
 	defineProps<{
 		message?: string
 		icon?: string
 		bleed?: boolean
 		roomy?: boolean
+		flush?: boolean
 	}>(),
-	{ message: DEFAULT_MESSAGE, icon: undefined, bleed: false, roomy: false },
+	{
+		message: DEFAULT_MESSAGE,
+		icon: undefined,
+		bleed: false,
+		roomy: false,
+		flush: false,
+	},
 )
 
 const bleedUi = computed(() => (props.roomy ? { ...BLEED_UI, root: ROOMY_BLEED_ROOT } : BLEED_UI))
+const bannerUi = computed(() => {
+	if (props.flush) {
+		return FLUSH_UI
+	}
+	return props.bleed ? bleedUi.value : undefined
+})
 
 const isOffline = ref(!navigator.onLine)
 
@@ -51,6 +66,6 @@ onUnmounted(() => {
 		color="neutral"
 		:icon="icon"
 		:title="translate(message)"
-		:ui="bleed ? bleedUi : undefined"
+		:ui="bannerUi"
 	/>
 </template>