snowspeeder/pi-web
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: stabilize mobile message headers

Browse Source
This commit is contained in:
Federico Jaramillo Martinez
2026-07-11 16:26:41 +02:00
parent 52925c1405
commit bc6718a7e2
2 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/show-complete-message-metadata.md
+1 -1
View File
@@ -2,4 +2,4 @@
"@jmfederico/pi-web": patch
---
Show complete chat message dates and model identifiers in one consistent label, wrap rather than truncate expanded metadata, and let the clean touch info control collapse while it retains focus.
Show complete chat message dates and model identifiers in one consistent label, wrap rather than truncate expanded metadata, and keep the touch info control compact without changing message-header height.
src/client/src/components/shared.ts
+2 -2
View File
@@ -327,7 +327,7 @@ export const chatStyles = css`
.msg.bash > .msg-header { border-bottom-color: color-mix(in srgb, var(--pi-success) 35%, transparent); background: var(--pi-success-bg); }
.msg.skill > .msg-header { border-bottom-color: color-mix(in srgb, var(--pi-purple-border) 35%, transparent); background: var(--pi-purple-surface); }
.group-msg > .msg-header { position: sticky; top: -26px; z-index: 4; margin: -10px 0 8px; padding: 7px 0 6px; border-bottom: 1px solid color-mix(in srgb, var(--pi-border-muted) 35%, transparent); background: var(--pi-bg); }
.msg-header-trailing { min-width: 0; flex: 1 1 auto; display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 8px; }
.msg-header-trailing { min-width: 0; flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; }
.msg-actions { flex: 0 0 auto; display: inline-flex; gap: 6px; opacity: 0; transition: opacity .12s ease; }
.msg-action { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--pi-border); border-radius: 6px; background: var(--pi-surface); color: var(--pi-muted); padding: 0; font: 14px system-ui, sans-serif; line-height: 1; cursor: pointer; }
.msg-action:hover, .msg-action:focus { color: var(--pi-text); border-color: var(--pi-accent); }
@@ -341,7 +341,7 @@ export const chatStyles = css`
@media (hover: none) {
.msg-actions { opacity: 1; }
.msg-meta { opacity: .75; max-width: 26px; }
.msg-meta:not(.expanded) { display: inline-grid; width: 26px; height: 26px; place-items: center; font-size: 0; text-overflow: clip; }
.msg-meta:not(.expanded) { display: inline-grid; width: 26px; height: 22px; place-items: center; font-size: 0; text-overflow: clip; }
.msg-meta::before { content: "ⓘ"; font-size: 13px; }
.msg-meta.expanded { opacity: 1; max-width: 100%; }
.msg-meta.expanded::before { content: ""; }