Skip to content

Fixed horizontal overflow on methodology page #52

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
dubemoyibe-star merged 2 commits into from
Aug 19, 2026
Merged

Fixed horizontal overflow on methodology page #52

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4b54218
Fixed horizontal overflow on methoology page
dubemoyibe-star Aug 19, 2026
a2c7424
Merge branch 'main' into dev
dubemoyibe-star Aug 19, 2026
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
5 changes: 5 additions & 0 deletions dashboard/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -630,6 +630,11 @@ body {
padding: 0.1em 0.4em;
font-size: 0.85em;
font-weight: 500;
/* Inline code in METHODOLOGY.md includes contract ids and full Horizon paths,
which have no break opportunity: on a phone one such token sets a floor on
the page width and scrolls the whole document sideways. Break inside the
token only when it genuinely doesn't fit. */
overflow-wrap: anywhere;
}
.prose-stenion :where(code):not(:where(pre code))::before,
.prose-stenion :where(code):not(:where(pre code))::after {
Expand Down
11 changes: 10 additions & 1 deletion dashboard/components/markdown-doc.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,15 @@ const components: Components = {
// from elsewhere in the doc. Without an id those anchors work on GitHub and
// silently dead-end on the site.
h4: ({ children }) => <h4 id={slug(toText(children))}>{children}</h4>,
// METHODOLOGY.md has several wide multi-column tables. A prose table is
// width:100%, but its min-content width is set by its longest cell, so on a
// narrow screen the table sets a floor on the page width and scrolls the whole
// document sideways. Give each table its own horizontal scroll container.
table: ({ children }) => (
<div className="overflow-x-auto">
<table>{children}</table>
</div>
),
a: ({ href, children }) => {
const h = href ?? '';
if (h.startsWith('#')) return <a href={h}>{children}</a>;
Expand All @@ -49,7 +58,7 @@ const components: Components = {
/** Render a markdown string with the Stenion dark prose theme. */
export function MarkdownDoc({ source }: { source: string }) {
return (
<div className="prose prose-stenion max-w-none prose-headings:font-display prose-headings:tracking-tight prose-h1:text-3xl prose-h2:mt-12 prose-h2:border-t prose-h2:border-line prose-h2:pt-8 prose-a:no-underline hover:prose-a:underline prose-table:overflow-hidden">
<div className="prose prose-stenion max-w-none prose-headings:font-display prose-headings:tracking-tight prose-h1:text-3xl prose-h2:mt-12 prose-h2:border-t prose-h2:border-line prose-h2:pt-8 prose-a:no-underline hover:prose-a:underline">
<Markdown remarkPlugins={[remarkGfm]} components={components}>
{source}
</Markdown>
Expand Down
Loading