Align prompt input area with action column

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

View File

@@ -6,29 +6,47 @@
}
.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 {
@apply flex flex-col items-center justify-between;
align-self: stretch;
height: 100%;
padding: 0.25rem 0;
padding: 0.5rem 0.25rem;
gap: 0.5rem;
}
.prompt-input-field {
.prompt-input-field-container {
position: relative;
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 {
@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;
background-color: var(--surface-base);
color: inherit;
border-color: var(--border-base);
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) {
.prompt-input {
min-height: 64px;
@@ -272,7 +296,7 @@
}
.prompt-input-wrapper {
gap: 0.75rem;
padding: 0.75rem;
gap: 0;
padding: 0;
}
}