diff --git a/src/lib/components/DateWidget.svelte b/src/lib/components/DateWidget.svelte
index 337868d..69ab90d 100644
--- a/src/lib/components/DateWidget.svelte
+++ b/src/lib/components/DateWidget.svelte
@@ -15,12 +15,12 @@
 </script>
 
 <div
-	class="flex items-center gap-2 p-1 text-lg font-bold {className} rounded-lg
+	class="flex flex-nowrap items-center gap-2 p-1 text-lg font-bold {className} rounded-lg
     {highlightClasses(type == 'published' ? 'bg-amber-600' : 'bg-purple-600')}
     {highlightClasses('text-slate-50')}"
 >
 	<Icon {icon} width={28} height={28} />
-	<span>
+	<span class="text-nowrap">
 		{dateString
 			? new Date(dateString).toLocaleString(undefined, {
 					month: 'short',
diff --git a/src/routes/blog/[slug]/+page.svelte b/src/routes/blog/[slug]/+page.svelte
index 3a0c014..03115fc 100644
--- a/src/routes/blog/[slug]/+page.svelte
+++ b/src/routes/blog/[slug]/+page.svelte
@@ -36,9 +36,9 @@
 </section>
 
 <section
-	class="flex shrink-0 flex-col items-center justify-center p-2 font-bold {isPublic
+	class="flex shrink-0 flex-col flex-wrap items-center justify-center p-2 font-bold {isPublic
 		? 'bg-amber-50 text-slate-950'
-		: 'bg-red-500 text-slate-50'} sm:flex-row sm:flex-nowrap sm:gap-5"
+		: 'bg-red-500 text-slate-50'} sm:flex-row sm:gap-x-5"
 >
 	<DateWidget dateString={data.blogPost.date} type="published" />
 	{#if data.blogPost.dateChanged}