Skip to content

Fix horizontal scrolling on blog posts #113

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kixelated merged 1 commit into from
Jul 30, 2026
+22 −3
Merged

Fix horizontal scrolling on blog posts #113

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/layouts/global.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ const proUrl = import.meta.env.MODE === "staging" ? "https://moq.wtf" : "https:/
<meta name="theme-color" content="#0f172a" />
</head>
<body class="min-h-screen bg-slate-900 flex justify-center">
<div class="flex flex-col md:flex-row gap-0 bg-slate-900 shadow-2xl max-w-6xl w-full p-4">
<div class="flex flex-col md:flex-row gap-0 bg-slate-900 shadow-2xl max-w-6xl w-full min-w-0 p-4">
<nav class="flex flex-row items-center md:flex-col md:gap-12 gap-4 md:w-64 w-full p-4">
<div class="w-1/2 md:w-full flex justify-center">
<a href="/">
Expand Down Expand Up @@ -112,7 +112,7 @@ const proUrl = import.meta.env.MODE === "staging" ? "https://moq.wtf" : "https:/
</a>
</div>
</nav>
<article class="markdown p-4 flex-1">
<article class="markdown p-4 flex-1 min-w-0">
{
frontmatter?.date && (
<p class="text-sm text-gray-400 text-right">
Expand Down
19 changes: 19 additions & 0 deletions src/layouts/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,25 @@ pre code.hljs {
@apply prose-img:rounded-lg;
@apply prose-figure:object-center prose-figure:text-center prose-img:m-auto;
@apply prose-a:font-bold prose-a:text-green-500 prose-a:underline prose-a:decoration-green-500 prose-a:decoration-2 prose-a:underline-offset-4;

/* Long URLs and inline `code` shouldn't push the page wider than the viewport. */
@apply break-words;
}

/* Wide tables scroll on their own instead of widening the page. `display: block`
turns the table into the scroll container; the rows still lay out as a table
inside it. Specificity is .markdown table (0,1,1) so it beats the prose
plugin's .prose :where(table) (0,1,0) regardless of layer ordering. */
.markdown table {
display: block;
width: 100%;
max-width: 100%;
overflow-x: auto;
}

/* Embeds (YouTube, etc) that declare a fixed pixel width. */
.markdown iframe {
max-width: 100%;
}

.tagline {
Expand Down
2 changes: 1 addition & 1 deletion src/pages/blog/first-cdn.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@ Okay they didn't say that, but this is **exactly** the mentality that MoQ needs
**Just do it**.

<figure>
<iframe width="560" height="315" src="https://www.youtube.com/embed/ZXsQAXx_ao0?si=xsAscm04CnwAer4b" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style="margin: 0 auto;"></iframe>
<iframe src="https://www.youtube.com/embed/ZXsQAXx_ao0?si=xsAscm04CnwAer4b" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style="margin: 0 auto; width: 560px; max-width: 100%; aspect-ratio: 16 / 9;"></iframe>
<figcaption>Holy shit I'm Shia LaBeouf.</figcaption>
</figure>

Expand Down
Loading