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

fix(app): update prompt input styling - 14px border radius, card hover states, and 8px padding

Browse Source
This commit is contained in:
David Hill
2026-01-23 20:30:28 +00:00
parent 328bd3fb02
commit 56ece04dd5
1 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1661,7 +1661,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
classList={{
"group/prompt-input": true,
"bg-surface-raised-stronger-non-alpha shadow-xs-border relative": true,
"rounded-md overflow-clip focus-within:shadow-xs-border": true,
"rounded-[14px] overflow-clip focus-within:shadow-xs-border": true,
"border-icon-info-active border-dashed": store.dragging,
[props.class ?? ""]: !!props.class,
}}
@@ -1681,8 +1681,8 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
return (
<div
classList={{
"shrink-0 flex flex-col gap-1 rounded-[6px] bg-surface-base border border-border-base px-2 py-1 max-w-[320px]": true,
"cursor-pointer hover:bg-surface-raised-base-hover": !!item.commentID,
"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-[320px]": true,
"cursor-pointer hover:bg-surface-interactive-weak": !!item.commentID,
}}
onClick={() => {
if (!item.commentID) return
@@ -1710,7 +1710,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
type="button"
icon="close"
variant="ghost"
class="h-5 w-5"
class="h-5 w-5 opacity-0 group-hover:opacity-100"
onClick={(e) => {
e.stopPropagation()
if (item.commentID) comments.remove(item.path, item.commentID)
@@ -1788,14 +1788,14 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
onKeyDown={handleKeyDown}
classList={{
"select-text": true,
"w-full px-5 py-3 pr-12 text-14-regular text-text-strong focus:outline-none whitespace-pre-wrap": true,
"w-full px-2 py-3 pr-12 text-14-regular text-text-strong focus:outline-none whitespace-pre-wrap": true,
"[&_[data-type=file]]:text-syntax-property": true,
"[&_[data-type=agent]]:text-syntax-type": true,
"font-mono!": store.mode === "shell",
}}
/>
<Show when={!prompt.dirty()}>
<div class="absolute top-0 inset-x-0 px-5 py-3 pr-12 text-14-regular text-text-weak pointer-events-none whitespace-nowrap truncate">
<div class="absolute top-0 inset-x-0 px-2 py-3 pr-12 text-14-regular text-text-weak pointer-events-none whitespace-nowrap truncate">
{store.mode === "shell"
? language.t("prompt.placeholder.shell")
: language.t("prompt.placeholder.normal", { example: language.t(EXAMPLES[store.placeholder]) })}