salvacybersec/CodeNomad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Align prompt input area with action column

Browse Source
This commit is contained in:
Shantur Rathore
2025-12-13 13:20:33 +00:00
parent 0da2e1d7bb
commit 088e5f1eea
2 changed files with 34 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/ui/src/components/prompt-input.tsx
View File

@@ -1086,8 +1086,9 @@ export default function PromptInput(props: PromptInputProps) {
</For> </For>
</div> </div>
</Show> </Show>
<div class="prompt-input-field"> <div class="prompt-input-field-container">
<textarea <div class="prompt-input-field">
<textarea
ref={textareaRef} ref={textareaRef}
class={`prompt-input ${mode() === "shell" ? "shell-mode" : ""}`} class={`prompt-input ${mode() === "shell" ? "shell-mode" : ""}`}
placeholder={ placeholder={
@@ -1167,6 +1168,7 @@ export default function PromptInput(props: PromptInputProps) {
</Show> </Show>
</div> </div>
</div> </div>
</div>
<div class="prompt-input-actions"> <div class="prompt-input-actions">
<button <button

36
packages/ui/src/styles/messaging/prompt-input.css
View File

@@ -6,29 +6,47 @@
} }
.prompt-input-wrapper { .prompt-input-wrapper {
@apply flex items-stretch gap-2 p-2; @apply grid items-stretch;
grid-template-columns: minmax(0, 1fr) 64px;
gap: 0;
padding: 0;
} }
.prompt-input-actions { .prompt-input-actions {
@apply flex flex-col items-center justify-between; @apply flex flex-col items-center justify-between;
align-self: stretch; align-self: stretch;
height: 100%; height: 100%;
padding: 0.25rem 0; padding: 0.5rem 0.25rem;
gap: 0.5rem; gap: 0.5rem;
} }
.prompt-input-field { .prompt-input-field-container {
position: relative; position: relative;
width: 100%; width: 100%;
min-height: 56px;
flex: 1 1 auto;
height: 100%;
min-width: 0;
}
.prompt-input-field {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
} }
.prompt-input { .prompt-input {
@apply flex-1 w-full min-h-[56px] max-h-[96px] pl-3 pr-10 pt-2.5 pb-4 border rounded-md text-sm resize-none outline-none transition-colors; @apply w-full pl-3 pr-10 pt-2.5 border text-sm resize-none outline-none transition-colors;
font-family: inherit; font-family: inherit;
background-color: var(--surface-base); background-color: var(--surface-base);
color: inherit; color: inherit;
border-color: var(--border-base); border-color: var(--border-base);
line-height: var(--line-height-normal); line-height: var(--line-height-normal);
border-radius: 0;
padding-bottom: 0;
height: 100%;
min-height: 100%;
} }
@@ -264,6 +282,12 @@
} }
} }
@media (max-width: 720px) {
.prompt-input-wrapper {
grid-template-columns: minmax(0, 1fr) 40px;
}
}
@media (max-width: 640px) { @media (max-width: 640px) {
.prompt-input { .prompt-input {
min-height: 64px; min-height: 64px;
@@ -272,7 +296,7 @@
} }
.prompt-input-wrapper { .prompt-input-wrapper {
gap: 0.75rem; gap: 0;
padding: 0.75rem; padding: 0;
} }
} }