Skip to content

Commit 0a82854

Browse files
codercatdevcodercatdev
committed
fix(site): prevent breadcrumb and title horizontal overflow on mobile viewports
1 parent 12d96a9 commit 0a82854

8 files changed

Lines changed: 37 additions & 23 deletions

File tree

‎apps/site/src/components/Breadcrumbs.astro‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ interface Props {
66
const { links } = Astro.props;
77
---
88

9-
<nav class="my-6 md:my-8" aria-label="Breadcrumb">
10-
<ol class="inline-flex flex-wrap items-center gap-2 rounded-2xl border-2 border-[#2A1155] bg-white px-4 py-2 font-mono text-xs font-extrabold uppercase tracking-wider text-[#2A1155] shadow-sketch-sm dark:border-white/25 dark:bg-[#131B2E] dark:text-slate-200 hand-border">
11-
<li>
9+
<nav class="my-6 max-w-full overflow-hidden md:my-8" aria-label="Breadcrumb">
10+
<ol class="inline-flex max-w-full flex-wrap items-center gap-2 overflow-hidden rounded-2xl border-2 border-[#2A1155] bg-white px-4 py-2 font-mono text-xs font-extrabold uppercase tracking-wider text-[#2A1155] shadow-sketch-sm dark:border-white/25 dark:bg-[#131B2E] dark:text-slate-200 hand-border">
11+
<li class="shrink-0">
1212
<a
1313
href="/"
1414
class="text-[#7C3AED] transition-colors hover:underline dark:text-[#C084FC]"
@@ -19,20 +19,23 @@ const { links } = Astro.props;
1919
{
2020
links.map((link, index) => (
2121
<>
22-
<li aria-hidden="true" class="text-[#2A1155]/40 dark:text-slate-500">
22+
<li
23+
aria-hidden="true"
24+
class="shrink-0 text-[#2A1155]/40 dark:text-slate-500"
25+
>
2326
/
2427
</li>
25-
<li>
28+
<li class="min-w-0 max-w-full">
2629
{link.href && index < links.length - 1 ? (
2730
<a
2831
href={link.href}
29-
class="text-[#2A1155] transition-colors hover:text-[#7C3AED] hover:underline dark:text-slate-200 dark:hover:text-[#C084FC]"
32+
class="block max-w-[180px] truncate text-[#2A1155] transition-colors hover:text-[#7C3AED] hover:underline dark:text-slate-200 dark:hover:text-[#C084FC] sm:max-w-xs"
3033
>
3134
{link.title}
3235
</a>
3336
) : (
3437
<span
35-
class="max-w-[260px] truncate text-[#2A1155]/70 dark:text-slate-400 sm:max-w-md"
38+
class="block max-w-[200px] truncate text-[#2A1155]/70 dark:text-slate-400 sm:max-w-md md:max-w-xl"
3639
aria-current="page"
3740
>
3841
{link.title}

‎apps/site/src/components/ExcalidrawDiagram.astro‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -245,11 +245,11 @@ const a11ySummary = nodes
245245
<figure class="excalidraw-well hand-border duo-scroll-reveal relative my-6 overflow-hidden p-5 md:p-7">
246246
{/* Top Diagram Canvas Header Bar */}
247247
<div class="mb-4 flex flex-wrap items-center justify-between gap-2 border-b-2 border-dashed border-[#2A1155]/15 pb-3 dark:border-white/15">
248-
<div class="flex items-center gap-2">
249-
<span class="inline-flex size-3.5 rounded-full border border-[#2A1155] bg-[#FBCFE8] dark:border-black/60 dark:bg-[#F472B6]"></span>
250-
<span class="inline-flex size-3.5 rounded-full border border-[#2A1155] bg-[#FEF08A] dark:border-black/60 dark:bg-[#FACC15]"></span>
251-
<span class="inline-flex size-3.5 rounded-full border border-[#2A1155] bg-[#86EFAC] dark:border-black/60 dark:bg-[#86EFAC]"></span>
252-
<span class="ml-1.5 font-hand text-xl font-bold tracking-wide text-[#2A1155] dark:text-white">
248+
<div class="flex min-w-0 items-center gap-2">
249+
<span class="inline-flex size-3.5 shrink-0 rounded-full border border-[#2A1155] bg-[#FBCFE8] dark:border-black/60 dark:bg-[#F472B6]"></span>
250+
<span class="inline-flex size-3.5 shrink-0 rounded-full border border-[#2A1155] bg-[#FEF08A] dark:border-black/60 dark:bg-[#FACC15]"></span>
251+
<span class="inline-flex size-3.5 shrink-0 rounded-full border border-[#2A1155] bg-[#86EFAC] dark:border-black/60 dark:bg-[#86EFAC]"></span>
252+
<span class="ml-1.5 min-w-0 flex-1 break-words font-hand text-xl font-bold tracking-wide text-[#2A1155] dark:text-white">
253253
✏️ {title}
254254
</span>
255255
</div>

‎apps/site/src/layouts/BaseLayout.astro‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -221,14 +221,14 @@ const graph = buildGraph([
221221
For OAuth Protected Resource Metadata, see {origin}/.well-known/oauth-protected-resource.
222222
For agent registration and authentication, see {origin}/auth.md.
223223
</p>
224-
<div class="flex flex-col min-h-dvh">
224+
<div class="flex min-h-dvh max-w-full flex-col overflow-x-clip">
225225
<Header />
226-
<main class="flex-1 mt-24">
226+
<main class="mt-24 min-w-0 max-w-full flex-1">
227227
{
228228
bare ? (
229229
<slot />
230230
) : (
231-
<div class="container px-5 mx-auto">
231+
<div class="container mx-auto min-w-0 max-w-full px-5">
232232
<slot />
233233
</div>
234234
)

‎apps/site/src/pages/course/[slug].astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ const sanitizedContent = (course.content ?? []).filter((block) => {
8282
]}
8383
/>
8484

85-
<article class="py-6">
85+
<article class="min-w-0 max-w-full py-6">
8686
<div class="mb-6 flex flex-wrap items-center justify-between gap-4">
8787
<div class="flex flex-wrap items-center gap-3">
8888
<div class="inline-flex items-center gap-2 rounded-full border-2 border-[#2A1155] bg-[#EDE9FE] px-4 py-1 font-mono text-xs font-extrabold uppercase tracking-wider text-[#7C3AED] dark:border-purple-400/40 dark:bg-purple-950/60 dark:text-purple-200 hand-border shadow-sketch-sm">
@@ -108,7 +108,7 @@ const sanitizedContent = (course.content ?? []).filter((block) => {
108108
}
109109
</div>
110110

111-
<h1 class="mb-8 font-display text-4xl font-black leading-tight tracking-tight text-[#2A1155] dark:text-white md:text-6xl">
111+
<h1 class="mb-8 break-words font-display text-3xl font-black leading-tight tracking-tight text-[#2A1155] dark:text-white sm:text-4xl md:text-6xl">
112112
{course.title}
113113
</h1>
114114

‎apps/site/src/pages/course/[slug]/lesson/[lessonSlug].astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,7 @@ const lessonDescription = currentLesson.excerpt || course.excerpt || "";
130130
]}
131131
/>
132132

133-
<article class="py-6">
133+
<article class="min-w-0 max-w-full py-6">
134134
<!-- Lesson Header & Top Prev/Next Bar -->
135135
<div class="mb-6 flex flex-wrap items-center justify-between gap-4">
136136
<div class="flex flex-wrap items-center gap-2.5">
@@ -169,7 +169,7 @@ const lessonDescription = currentLesson.excerpt || course.excerpt || "";
169169
</div>
170170
</div>
171171

172-
<h1 class="mb-8 font-display text-3xl font-black leading-tight tracking-tight text-[#2A1155] dark:text-white md:text-5xl">
172+
<h1 class="mb-8 break-words font-display text-3xl font-black leading-tight tracking-tight text-[#2A1155] dark:text-white sm:text-4xl md:text-5xl">
173173
{lessonTitle}
174174
</h1>
175175

‎apps/site/src/pages/podcast/[slug].astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,7 @@ const faqNode = faqSchema(extractFaqsFromPortableText(podcast.content));
130130
links={[{ title: "Podcasts", href: "/podcasts" }, { title: podcast.title }]}
131131
/>
132132

133-
<article class="py-4">
133+
<article class="min-w-0 max-w-full py-4">
134134
{/* Episode Badge & Matched Vendor / Topic Pills */}
135135
<div class="mb-4 flex flex-wrap items-center gap-2">
136136
<span class="inline-flex items-center gap-2 rounded-full border-2 border-[#2A1155] bg-[#EDE9FE] px-4 py-1 font-mono text-xs font-extrabold uppercase tracking-wider text-[#7C3AED] dark:border-purple-400/40 dark:bg-purple-950/60 dark:text-purple-200 hand-border shadow-sketch-sm">
@@ -170,7 +170,7 @@ const faqNode = faqSchema(extractFaqsFromPortableText(podcast.content));
170170
))}
171171
</div>
172172

173-
<h1 class="mb-8 font-display text-4xl font-black leading-tight tracking-tight text-balance text-[#2A1155] dark:text-white md:text-6xl">
173+
<h1 class="mb-8 break-words font-display text-3xl font-black leading-tight tracking-tight text-balance text-[#2A1155] dark:text-white sm:text-4xl md:text-6xl">
174174
{podcast.title}
175175
</h1>
176176

‎apps/site/src/pages/post/[slug].astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@ const faqNode = faqSchema(extractFaqsFromPortableText(post.content));
108108
>
109109
<Breadcrumbs links={[{ title: "Blog", href: "/blog" }, { title: post.title }]} />
110110

111-
<article class="py-4">
111+
<article class="min-w-0 max-w-full py-4">
112112
{/* Post Badge & Matched Official Vendor / Topic Logo Pills */}
113113
<div class="mb-4 flex flex-wrap items-center gap-2">
114114
<span class="inline-flex items-center gap-2 rounded-full border-2 border-[#2A1155] bg-[#EDE9FE] px-4 py-1 font-mono text-xs font-extrabold uppercase tracking-wider text-[#7C3AED] dark:border-purple-400/40 dark:bg-purple-950/60 dark:text-purple-200 hand-border shadow-sketch-sm">
@@ -145,7 +145,7 @@ const faqNode = faqSchema(extractFaqsFromPortableText(post.content));
145145
))}
146146
</div>
147147

148-
<h1 class="mb-8 font-display text-4xl font-black leading-tight tracking-tight text-balance text-[#2A1155] dark:text-white md:text-6xl">
148+
<h1 class="mb-8 break-words font-display text-3xl font-black leading-tight tracking-tight text-balance text-[#2A1155] dark:text-white sm:text-4xl md:text-6xl">
149149
{post.title}
150150
</h1>
151151

‎apps/site/src/styles/global.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,11 @@
100100
* {
101101
@apply border-border outline-ring/50;
102102
}
103+
html,
104+
body {
105+
max-width: 100%;
106+
overflow-x: clip;
107+
}
103108
body {
104109
@apply bg-background text-foreground font-sans antialiased selection:bg-[#7C3AED] selection:text-white;
105110
background-color: #faf9fc;
@@ -130,13 +135,19 @@
130135
h2 {
131136
font-family: var(--font-display);
132137
letter-spacing: -0.025em;
138+
overflow-wrap: break-word;
133139
}
134140
h3,
135141
h4,
136142
h5,
137143
h6 {
138144
font-family: var(--font-sans);
139145
letter-spacing: -0.02em;
146+
overflow-wrap: break-word;
147+
}
148+
.prose {
149+
max-width: 100%;
150+
overflow-wrap: break-word;
140151
}
141152
code,
142153
pre,

0 commit comments

Comments
 (0)