From 5e616ac2e0aac3bf3dc14d1a96bea626e05d47c4 Mon Sep 17 00:00:00 2001
From: enscribe <jason@enscribe.dev>
Date: Sun, 15 Sep 2024 13:23:03 -0700
Subject: [PATCH] fix: `break-words` on prose
---
src/components/AuthorCard.astro | 2 +-
src/components/PostNavigation.astro | 10 +++++-----
src/styles/global.css | 2 +-
3 files changed, 7 insertions(+), 7 deletions(-)
diff --git a/src/components/AuthorCard.astro b/src/components/AuthorCard.astro
index 210b4ed..bc07e1b 100644
--- a/src/components/AuthorCard.astro
+++ b/src/components/AuthorCard.astro
@@ -54,7 +54,7 @@ const socialLinks: SocialLink[] = [
</Link>
<div class="flex flex-grow flex-col justify-between gap-y-4">
<div>
- <div class="flex items-center gap-2">
+ <div class="flex flex-wrap items-center gap-x-2">
<h3 class="text-lg font-semibold">{name}</h3>
{
pronouns && (
diff --git a/src/components/PostNavigation.astro b/src/components/PostNavigation.astro
index 4906cf1..e192a13 100644
--- a/src/components/PostNavigation.astro
+++ b/src/components/PostNavigation.astro
@@ -7,12 +7,12 @@ import { ArrowLeft, ArrowRight } from 'lucide-react'
const { prevPost, nextPost } = Astro.props
---
-<div class="flex justify-between gap-4">
+<div class="flex flex-col gap-4 sm:flex-row">
<Link
href={prevPost ? `/blog/${prevPost.slug}` : '#'}
class={cn(
buttonVariants({ variant: 'outline' }),
- 'rounded-xl group flex items-center justify-start w-1/2 h-fit',
+ 'rounded-xl group flex items-center justify-start w-full sm:w-1/2 h-fit',
!prevPost && 'pointer-events-none opacity-50 cursor-not-allowed',
)}
aria-disabled={!prevPost}
@@ -24,7 +24,7 @@ const { prevPost, nextPost } = Astro.props
</div>
<div class="flex flex-col items-start overflow-hidden">
<span class="text-left text-xs text-muted-foreground">Previous Post</span>
- <span class="w-full truncate text-left"
+ <span class="w-full truncate text-left text-sm"
>{prevPost?.data.title || 'Latest post!'}</span
>
</div>
@@ -33,14 +33,14 @@ const { prevPost, nextPost } = Astro.props
href={nextPost ? `/blog/${nextPost.slug}` : '#'}
class={cn(
buttonVariants({ variant: 'outline' }),
- 'rounded-xl group flex items-center justify-end w-1/2 h-fit',
+ 'rounded-xl group flex items-center justify-end w-full sm:w-1/2 h-fit',
!nextPost && 'pointer-events-none opacity-50 cursor-not-allowed',
)}
aria-disabled={!nextPost}
>
<div class="flex flex-col items-end overflow-hidden">
<span class="text-right text-xs text-muted-foreground">Next Post</span>
- <span class="w-full truncate text-right"
+ <span class="w-full truncate text-right text-sm"
>{nextPost?.data.title || 'Last post!'}</span
>
</div>
diff --git a/src/styles/global.css b/src/styles/global.css
index 390d77c..ffe7412 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -67,7 +67,7 @@
@layer components {
article {
- @apply prose-headings:scroll-mt-20;
+ @apply prose-headings:scroll-mt-20 prose-headings:break-words prose-p:break-words;
.katex-display {
@apply overflow-x-auto overflow-y-hidden py-4;