mm/dr-sandbox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

reducer list: blurb spans full inner row width at all viewport sizes

Browse Source
This commit is contained in:
Michael Pilosov 2026-04-23 15:04:40 -06:00
parent 6816c95e27
commit e1f33b562a
4 changed files with 16 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
app/web/static/style.css
View File

@ -308,11 +308,23 @@ select {
.reducer-list label { .reducer-list label {
display: grid; display: grid;
grid-template-columns: 1.4rem 1fr auto; grid-template-columns: 1.4rem 1fr auto;
gap: 0.6rem; /* Blurb gets its own row spanning name+pkg, so its width is uniform
across rows (the pkg column is auto-sized per label, which made the
blurb width vary noticeably when pkg strings differ in length). */
grid-template-areas:
"mark name pkg"
"mark blurb blurb";
column-gap: 0.6rem;
row-gap: 2px;
padding: 0.55rem 0.2rem 0.55rem 0.1rem; padding: 0.55rem 0.2rem 0.55rem 0.1rem;
cursor: pointer; cursor: pointer;
transition: background 100ms ease; transition: background 100ms ease;
} }
.reducer-list .mark { grid-area: mark; }
.reducer-list .pkg { grid-area: pkg; }
.reducer-list .text { display: contents; }
.reducer-list .name { grid-area: name; }
.reducer-list .blurb { grid-area: blurb; }
.reducer-list label:hover { background: var(--accent-tint); } .reducer-list label:hover { background: var(--accent-tint); }
.reducer-list .mark { .reducer-list .mark {
font-family: var(--mono); font-family: var(--mono);
@ -347,24 +359,6 @@ select {
text-align: right; text-align: right;
} }
/* Narrow viewports: let the blurb span full width under the name/pkg row
instead of getting crammed into the middle column. */
@media (max-width: 780px) {
.reducer-list label {
grid-template-columns: 1.4rem 1fr auto;
grid-template-areas:
"mark name pkg"
"mark blurb blurb";
column-gap: 0.6rem;
row-gap: 2px;
}
.reducer-list .mark { grid-area: mark; }
.reducer-list .pkg { grid-area: pkg; }
.reducer-list .text { display: contents; }
.reducer-list .name { grid-area: name; }
.reducer-list .blurb { grid-area: blurb; }
}
/* advanced disclosure */ /* advanced disclosure */
details.advanced { details.advanced {
margin-top: 0.8rem; margin-top: 0.8rem;

2
app/web/templates/compare.html
View File

@ -4,7 +4,7 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" /> <meta name="viewport" content="width=device-width,initial-scale=1" />
<title>embedding notebook &middot; compare</title> <title>embedding notebook &middot; compare</title>
<link rel="stylesheet" href="/static/style.css?v=39" /> <link rel="stylesheet" href="/static/style.css?v=40" />
<script type="importmap"> <script type="importmap">
{ {
"imports": { "imports": {

2
app/web/templates/index.html
View File

@ -4,7 +4,7 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" /> <meta name="viewport" content="width=device-width,initial-scale=1" />
<title>embedding notebook</title> <title>embedding notebook</title>
<link rel="stylesheet" href="/static/style.css?v=39" /> <link rel="stylesheet" href="/static/style.css?v=40" />
<script src="https://unpkg.com/htmx.org@2.0.4"></script> <script src="https://unpkg.com/htmx.org@2.0.4"></script>
<script type="importmap"> <script type="importmap">
{ {

2
app/web/templates/metrics.html
View File

@ -4,7 +4,7 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" /> <meta name="viewport" content="width=device-width,initial-scale=1" />
<title>embedding notebook · metrics</title> <title>embedding notebook · metrics</title>
<link rel="stylesheet" href="/static/style.css?v=39" /> <link rel="stylesheet" href="/static/style.css?v=40" />
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3' fill='%231f4e5f'/%3E%3C/svg%3E" /> <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3' fill='%231f4e5f'/%3E%3C/svg%3E" />
<script> <script>
(function(){try{ (function(){try{