lerko/nib-v1
1
1
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

fix(ui): mobile capture sticky, post-delete focus, inline markdown

Browse Source 
- Capture bar stays visible on mobile via sticky positioning (#25)
- Cursor moves to adjacent entry after delete instead of resetting (#24)
- Inline expansion renders styled markdown via .exp-body.md selectors (#23)
This commit is contained in:
Tyler Koenig
2026-05-17 10:40:04 -04:00
parent e66b7d19f6
commit 4ec876b2d2
2 changed files with 33 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/style.css
+29 -18
View File
@@ -961,7 +961,8 @@ kbd { background: var(--raised); border: 1px solid var(--border); border-radius:
.peek-body:hover { background: var(--raised); }
.peek-body.md {
.peek-body.md,
.exp-body.md {
font-family: var(--sans);
font-size: 13px;
line-height: 1.65;
@@ -969,35 +970,40 @@ kbd { background: var(--raised); border: 1px solid var(--border); border-radius:
}
.peek-body.md h1, .peek-body.md h2, .peek-body.md h3,
.peek-body.md h4, .peek-body.md h5, .peek-body.md h6 {
.peek-body.md h4, .peek-body.md h5, .peek-body.md h6,
.exp-body.md h1, .exp-body.md h2, .exp-body.md h3,
.exp-body.md h4, .exp-body.md h5, .exp-body.md h6 {
font-weight: 600;
color: var(--text);
margin: 14px 0 6px;
line-height: 1.3;
}
.peek-body.md h1 { font-size: 17px; }
.peek-body.md h2 { font-size: 15px; }
.peek-body.md h3 { font-size: 14px; }
.peek-body.md h1, .exp-body.md h1 { font-size: 17px; }
.peek-body.md h2, .exp-body.md h2 { font-size: 15px; }
.peek-body.md h3, .exp-body.md h3 { font-size: 14px; }
.peek-body.md p { margin: 0 0 10px; }
.peek-body.md p:last-child { margin-bottom: 0; }
.peek-body.md p, .exp-body.md p { margin: 0 0 10px; }
.peek-body.md p:last-child, .exp-body.md p:last-child { margin-bottom: 0; }
.peek-body.md ul, .peek-body.md ol {
.peek-body.md ul, .peek-body.md ol,
.exp-body.md ul, .exp-body.md ol {
padding-left: 20px;
margin: 0 0 10px;
}
.peek-body.md li { margin-bottom: 3px; }
.peek-body.md li, .exp-body.md li { margin-bottom: 3px; }
.peek-body.md blockquote {
.peek-body.md blockquote,
.exp-body.md blockquote {
border-left: 2px solid var(--accent);
padding-left: 12px;
color: var(--muted);
margin: 0 0 10px;
}
.peek-body.md code {
.peek-body.md code,
.exp-body.md code {
font-family: var(--mono);
font-size: 11px;
background: var(--bg);
@@ -1006,7 +1012,8 @@ kbd { background: var(--raised); border: 1px solid var(--border); border-radius:
padding: 1px 5px;
}
.peek-body.md pre {
.peek-body.md pre,
.exp-body.md pre {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--r2);
@@ -1015,7 +1022,8 @@ kbd { background: var(--raised); border: 1px solid var(--border); border-radius:
margin: 0 0 10px;
}
.peek-body.md pre code {
.peek-body.md pre code,
.exp-body.md pre code {
background: none;
border: none;
padding: 0;
@@ -1023,18 +1031,20 @@ kbd { background: var(--raised); border: 1px solid var(--border); border-radius:
line-height: 1.6;
}
.peek-body.md a {
.peek-body.md a,
.exp-body.md a {
color: var(--event);
text-decoration: none;
border-bottom: 1px solid rgba(104,152,200,.3);
}
.peek-body.md a:hover { border-bottom-color: var(--event); }
.peek-body.md a:hover, .exp-body.md a:hover { border-bottom-color: var(--event); }
.peek-body.md strong { font-weight: 600; }
.peek-body.md em { font-style: italic; color: var(--muted); }
.peek-body.md strong, .exp-body.md strong { font-weight: 600; }
.peek-body.md em, .exp-body.md em { font-style: italic; color: var(--muted); }
.peek-body.md hr {
.peek-body.md hr,
.exp-body.md hr {
border: none;
border-top: 1px solid var(--border);
margin: 14px 0;
@@ -1516,6 +1526,7 @@ kbd { background: var(--raised); border: 1px solid var(--border); border-radius:
#tag-rail { display: none !important; }
.resize-handle { display: none !important; }
#entity-panel { overflow: auto; }
#capture-bar { position: sticky; bottom: 0; z-index: 10; }
#detail-pane {
position: fixed;
inset: 0;