monadical/opencode
14
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

fix(app): comment card styling - 48px height, 2px gap, truncate filename while keeping line count visible

Browse Source
This commit is contained in:
David Hill
2026-01-23 21:04:44 +00:00
parent 258d207fd6
commit 3b3ab29d8c
1 changed files with 7 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/app/src/components/prompt-input.tsx
View File

@@ -1681,7 +1681,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
return ( return (
<div <div
classList={{ classList={{
"group shrink-0 flex flex-col gap-1 rounded-[6px] bg-background-stronger border border-border-base pl-2 pr-1 py-1 max-w-[200px] transition-all": true, "group shrink-0 flex flex-col gap-0.5 rounded-[6px] bg-background-stronger border border-border-base pl-2 pr-1 py-1 max-w-[200px] h-12 transition-all": true,
"cursor-pointer hover:bg-surface-interactive-weak": !!item.commentID, "cursor-pointer hover:bg-surface-interactive-weak": !!item.commentID,
}} }}
onClick={() => { onClick={() => {
@@ -1694,14 +1694,16 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<FileIcon node={{ path: item.path, type: "file" }} class="shrink-0 size-3.5" /> <FileIcon node={{ path: item.path, type: "file" }} class="shrink-0 size-3.5" />
<div <div
class="flex-1 flex items-center text-11-regular min-w-0 truncate" class="flex-1 flex items-center text-11-regular min-w-0"
style={{ "font-weight": "var(--font-weight-medium)" }} style={{ "font-weight": "var(--font-weight-medium)" }}
> >
<span class="text-text-weak whitespace-nowrap truncate min-w-0">{getDirectory(item.path)}</span> <span class="truncate min-w-0">
<span class="text-text-strong whitespace-nowrap">{getFilename(item.path)}</span> <span class="text-text-weak">{getDirectory(item.path)}</span>
<span class="text-text-strong">{getFilename(item.path)}</span>
</span>
<Show when={item.selection}> <Show when={item.selection}>
{(sel) => ( {(sel) => (
<span class="text-text-weak whitespace-nowrap ml-1"> <span class="text-text-weak whitespace-nowrap shrink-0">
{sel().startLine === sel().endLine {sel().startLine === sel().endLine
? `:${sel().startLine}` ? `:${sel().startLine}`
: `:${sel().startLine}-${sel().endLine}`} : `:${sel().startLine}-${sel().endLine}`}