From 0823d745e4aef09b3a6d9ec297b877448fc45663 Mon Sep 17 00:00:00 2001 From: Ben Dichter Date: Fri, 21 Aug 2026 12:28:41 -0400 Subject: [PATCH] Index: tidy the mobile layout On phone-width viewports the notebook card kept desktop padding, filenames broke mid-word, badges wrapped tightly under them, the full table of contents pushed content a screen down, the stats row wrapped unevenly, and a long URL in one description forced horizontal scrolling. Below 900px: the filename takes its own line with the badges grouped on the next, the card and row spacing relax, the contents list hides (search remains as the navigation), the stats form a 2x2 grid, and descriptions and filenames use overflow-wrap: anywhere so nothing exceeds the viewport. Checked at 390px in an emulated viewport: zero horizontal overflow. Co-Authored-By: Claude Fable 5 --- .github/templates/index.html | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/.github/templates/index.html b/.github/templates/index.html index d42e316..38d44a5 100644 --- a/.github/templates/index.html +++ b/.github/templates/index.html @@ -290,6 +290,7 @@ .dandiset p.description { color: var(--ink-soft); + overflow-wrap: anywhere; font-size: 15.5px; line-height: 1.65; margin: 0 0 24px; @@ -379,7 +380,7 @@ align-items: center; gap: 10px; transition: color 0.2s; - word-break: break-all; + overflow-wrap: anywhere; flex: 1; min-width: 0; } @@ -483,6 +484,21 @@ .container { padding: 0 22px; } .dandiset h2 { font-size: 23px; } .dandiset { padding: 36px 0 40px; } + /* The full table of contents would push the content a screen or + more down on a phone; keep the search box as the navigation. */ + .toc-heading, .toc ul { display: none; } + aside.toc { padding-bottom: 8px; } + .dandiset-head { flex-wrap: wrap; gap: 10px; } + .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; } + .stat-n { font-size: 26px; } + .notebooks { + margin-top: 24px; + padding: 14px 16px; + } + .notebooks li { padding: 12px 0; } + .notebooks .nb-row { gap: 10px 12px; } + /* Filename on its own line, badges together on the next. */ + .notebooks a.nb-link { flex: 1 1 100%; } }