Chat: fix chat input focus issues (#5170)

- Update the chat transcript container styles to use `height: 100%` and
`overflow: scroll` to properly handle overflow of chat messages

- Adjust the padding and margin of the transcript container to improve
the layout

Fixes an issue where @-mentions would cause the focus to shift to the
top chat input box due to the container overflow settings causing the
reference to the bottom chat input box to be lost.

vscode/CHANGELOG.md

@@ -10,12 +10,13 @@ This is a log of all notable changes to Cody for VS Code. [Unreleased] changes a
 
 ### Fixed
 
+- Chat: Fixed an issue where @-mentions move focus to the chat input box at the top. [pull/5170](https://github.com/sourcegraph/cody/pull/5170)
+
 ### Changed
 
 - Chat: Improved how Cody associates code to existing files in chat responses. [pull/5038](https://github.com/sourcegraph/cody/pull/5038)
 - Chat: Added an experimental simpler code block UI, that can accomodate the "Smart Apply" button. [pull/5038](https://github.com/sourcegraph/cody/pull/5038)
 
-
 ## 1.30.2
 
 ### Added

vscode/webviews/App.module.css

@@ -3,7 +3,8 @@
     display: flex;
     flex-direction: column;
     box-sizing: border-box;
-    min-height: 100%;
+    height: 100%;
+    overflow: hidden;
 }
 
 .error-container {

vscode/webviews/Chat.module.css

@@ -2,6 +2,7 @@
     height: 100%;
     display: flex;
     flex-direction: column;
+    overflow: scroll;
 }
 
 .chat-disabled {

vscode/webviews/chat/Transcript.tsx

@@ -58,7 +58,7 @@ export const Transcript: FC<TranscriptProps> = props => {
     )
 
     return (
-        <div className="tw-px-8 tw-py-6 tw-pt-8 tw-mt-2 tw-flex tw-flex-col tw-gap-10">
+        <div className="tw-px-8 tw-pt-6 tw-pb-12 tw-flex tw-flex-col tw-gap-10">
             {interactions.map((interaction, i) => (
                 <TranscriptInteraction
                     // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>

vscode/webviews/prompts/PromptsTab.tsx

@@ -13,7 +13,7 @@ export const PromptsTab: React.FC<{
 }> = ({ setView }) => {
     const dispatchClientAction = useClientActionDispatcher()
     return (
-        <div className="tw-flex tw-flex-col tw-gap-8 tw-p-8">
+        <div className="tw-overflow-auto tw-flex tw-flex-col tw-gap-8 tw-p-8">
             <PromptListSuitedForNonPopover
                 onSelect={item => onPromptSelectInPanel(item, setView, dispatchClientAction)}
                 onSelectActionLabels={onPromptSelectInPanelActionLabels}

vscode/webviews/tabs/AccountTab.tsx

@@ -45,7 +45,7 @@ export const AccountTab: React.FC<AccountTabProps> = ({ userInfo }) => {
     ]
 
     return (
-        <div className="tw-flex-1 tw-flex tw-flex-col tw-items-start tw-w-full tw-px-8 tw-py-6 tw-gap-6">
+        <div className="tw-overflow-auto tw-flex-1 tw-flex tw-flex-col tw-items-start tw-w-full tw-px-8 tw-py-6 tw-gap-6">
             <h2>Account</h2>
             <div className="tw-w-full tw-px-8 tw-py-4 tw-flex tw-flex-col tw-gap-4 tw-bg-popover tw-border tw-border-border tw-rounded-lg">
                 <div className="tw-flex tw-justify-between tw-w-full tw-border-b tw-border-border tw-shadow-lg tw-shadow-border-500/50 tw-p-4 tw-pb-6">

vscode/webviews/tabs/HistoryTab.tsx

@@ -38,7 +38,7 @@ export const HistoryTab: React.FC<HistoryTabProps> = ({ userHistory }) => {
     )
 
     return (
-        <div className="tw-flex tw-flex-col tw-gap-8 tw-px-8 tw-py-6">
+        <div className="tw-overflow-auto tw-px-8 tw-pt-6 tw-pb-12 tw-flex tw-flex-col tw-gap-10">
             {Array.from(chatByPeriod, ([period, chats]) => (
                 <CollapsiblePanel
                     key={period}

vscode/webviews/tabs/SettingsTab.tsx

@@ -13,7 +13,7 @@ export const SettingsTab: React.FC<SettingsTabProps> = ({ userInfo }) => {
     }
 
     return (
-        <div className="tw-flex tw-flex-col tw-gap-4 tw-px-8 tw-mt-4">
+        <div className="tw-overflow-auto tw-flex tw-flex-col tw-gap-4 tw-px-8 tw-mt-4">
             <Button
                 key="settings"
                 variant="secondary"