Fix prompt input and browse prompts UI (#5863)

Fixes: https://linear.app/sourcegraph/issue/SRCH-1146/stick-browse-library-link-to-the-bottom-irrespective-of-scroll This PR - Makes prompt search input UI sticky - Fixes paddings for Cody Web - Fixing browser prompt footer ## Test plan - Check that the Prompt UI list looks ok in the welcome area, prompts select field modal and prompts tab UI
sourcegraph · Oct 10, 2024 · 8e8756f · 8e8756f
1 parent ff8f0bf
commit 8e8756f
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 8 deletions.
diff --git a/vscode/webviews/components/promptList/ActionItem.module.css b/vscode/webviews/components/promptList/ActionItem.module.css
@@ -1,9 +1,14 @@
 
 .item {
     display: flex;
-    padding: 0.5rem;
     gap: 0.5rem;
 
+    /*
+        Styles order can be inconsistent in different clients (Cody Web, JB, ...etc)
+        Ensure that paddings won't be overridden in these clients.
+    */
+    padding: 0.25rem 0.5rem !important;
+
     &--indicator {
         display: none !important;
         margin-left: auto;

diff --git a/vscode/webviews/components/promptList/PromptList.module.css b/vscode/webviews/components/promptList/PromptList.module.css
@@ -1,8 +1,14 @@
 
 .list {
     outline: none;
-    background-color: transparent;
     max-height: unset !important;
+    background-color: transparent !important;
+
+    &--input-container {
+        top: 0;
+        position: sticky;
+        z-index: 1;
+    }
 
     &--input {
         margin: 0.5rem;

diff --git a/vscode/webviews/components/promptList/PromptList.tsx b/vscode/webviews/components/promptList/PromptList.tsx
@@ -29,6 +29,7 @@ interface PromptListProps {
     showCommandOrigins?: boolean
     showPromptLibraryUnsupportedMessage?: boolean
     className?: string
+    inputClassName?: string
     paddingLevels?: 'none' | 'middle' | 'big'
     appearanceMode?: 'flat-list' | 'chips-list'
     lastUsedSorting?: boolean
@@ -52,6 +53,7 @@ export const PromptList: FC<PromptListProps> = props => {
         showInitialSelectedItem = true,
         showPromptLibraryUnsupportedMessage = true,
         className,
+        inputClassName,
         paddingLevels = 'none',
         appearanceMode = 'flat-list',
         lastUsedSorting,
@@ -162,7 +164,7 @@ export const PromptList: FC<PromptListProps> = props => {
         >
             <CommandList className={className}>
                 {showSearch && (
-                    <div className={inputPaddingClass}>
+                    <div className={clsx(inputPaddingClass, inputClassName, styles.listInputContainer)}>
                         <CommandInput
                             value={query}
                             onValueChange={setQuery}

diff --git a/vscode/webviews/components/promptSelectField/PromptSelectField.tsx b/vscode/webviews/components/promptSelectField/PromptSelectField.tsx
@@ -47,7 +47,7 @@ export const PromptSelectField: React.FunctionComponent<{
             tooltip="Insert prompt from Prompt Library"
             aria-label="Insert prompt"
             popoverContent={close => (
-                <div className="tw-flex tw-flex-col tw-gap-4">
+                <div className="tw-flex tw-flex-col tw-max-h-[500px] tw-overflow-auto">
                     <PromptList
                         onSelect={item => {
                             onSelect(item)
@@ -59,9 +59,10 @@ export const PromptSelectField: React.FunctionComponent<{
                         showOnlyPromptInsertableCommands={true}
                         showPromptLibraryUnsupportedMessage={true}
                         lastUsedSorting={true}
+                        inputClassName="tw-bg-popover"
                     />
 
-                    <footer className="tw-px-2 tw-py-2 tw-border-t tw-border-border tw-bg-muted">
+                    <footer className="tw-px-2 tw-py-1 tw-border-t tw-border-border tw-bg-muted">
                         <Button variant="text" onClick={() => setView(View.Prompts)}>
                             <BookText size={16} /> Browse library
                         </Button>
@@ -70,8 +71,7 @@ export const PromptSelectField: React.FunctionComponent<{
             )}
             popoverRootProps={{ onOpenChange }}
             popoverContentProps={{
-                className:
-                    'tw-min-w-[325px] tw-w-[75vw] tw-max-w-[550px] !tw-p-0 tw-max-h-[500px] tw-overflow-auto',
+                className: 'tw-min-w-[325px] tw-w-[75vw] tw-max-w-[550px] !tw-p-0',
                 onKeyDown: onKeyDown,
                 onCloseAutoFocus: event => {
                     // Prevent the popover trigger from stealing focus after the user selects an

diff --git a/vscode/webviews/prompts/PromptsTab.module.css b/vscode/webviews/prompts/PromptsTab.module.css
@@ -0,0 +1,4 @@
+
+.prompts-input {
+    background-color: var(--vscode-sideBar-background);
+}
diff --git a/vscode/webviews/prompts/PromptsTab.tsx b/vscode/webviews/prompts/PromptsTab.tsx
@@ -5,13 +5,15 @@ import { PromptList } from '../components/promptList/PromptList'
 import { View } from '../tabs/types'
 import { getVSCodeAPI } from '../utils/VSCodeApi'
 
+import styles from './PromptsTab.module.css'
+
 export const PromptsTab: React.FC<{
     setView: (view: View) => void
 }> = ({ setView }) => {
     const runAction = useActionSelect()
 
     return (
-        <div className="tw-overflow-auto">
+        <div className="tw-overflow-auto tw-h-full">
             <PromptList
                 showSearch={true}
                 showCommandOrigins={true}
@@ -20,6 +22,7 @@ export const PromptsTab: React.FC<{
                 showPromptLibraryUnsupportedMessage={true}
                 showOnlyPromptInsertableCommands={false}
                 onSelect={item => runAction(item, setView)}
+                inputClassName={styles.promptsInput}
             />
         </div>
     )