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

fix(ui): separate prompt composer action columns

Browse Source 
Keep the textarea width independent from the prompt controls so wrapping matches the visible layout. Split secondary controls from the primary stop/send rail to preserve the original action column width and add a matching divider.
This commit is contained in:
Shantur Rathore
2026-04-17 16:12:48 +01:00
parent 313a0e579e
commit 82a7c95dba
2 changed files with 125 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,7 +6,7 @@
.prompt-input-wrapper {
@apply grid items-stretch;
grid-template-columns: minmax(0, 1fr) 64px;
grid-template-columns: minmax(0, 1fr) 72px 64px;
gap: 0;
padding: 0;
}
@@ -19,6 +19,16 @@
gap: 0.5rem;
}
.prompt-input-primary-actions {
@apply flex flex-col items-center;
align-self: stretch;
justify-content: space-between;
width: 100%;
gap: 0.5rem;
padding: 0.5rem 0.25rem;
border-inline-start: 1px solid var(--border-base);
}
.prompt-input-field-container {
position: relative;
width: 100%;
@@ -37,7 +47,7 @@
.prompt-input {
@apply w-full pt-2.5 border text-sm resize-none outline-none transition-colors;
padding-inline-start: 0.75rem;
padding-inline-end: 7.5rem;
padding-inline-end: 0.75rem;
font-family: inherit;
background-color: var(--surface-base);
color: var(--text-primary);
@@ -85,16 +95,12 @@
/* Navigation buttons container (expand, prev, next). */
.prompt-nav-buttons {
position: absolute;
top: 0.25rem;
inset-inline-end: 0.25rem;
bottom: 0.25rem;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-end;
justify-content: center;
gap: 0.125rem;
z-index: 2;
width: 100%;
}
.prompt-nav-column {
@@ -287,7 +293,6 @@
@apply w-10 h-10 rounded-md border-none cursor-pointer flex items-center justify-center transition-all flex-shrink-0;
background-color: var(--accent-primary);
color: var(--text-inverted);
margin-top: auto;
}
.send-button.shell-mode {
@@ -421,7 +426,7 @@
@media (max-width: 720px) {
.prompt-input-wrapper {
grid-template-columns: minmax(0, 1fr) 40px;
grid-template-columns: minmax(0, 1fr) 64px 40px;
}
}
@@ -429,7 +434,6 @@
.prompt-input {
min-height: 0;
padding: 0.5rem 0.75rem;
padding-inline-end: 7.5rem;
padding-bottom: 0.75rem;
}