fix: aligns chat pop-up selection style

vscode/CHANGELOG.md

@@ -24,7 +24,8 @@ Starting from `0.2.0`, Cody is using `major.EVEN_NUMBER.patch` for release versi
 - Chat: Add delays before sending webview ready events to prevent premature sending. This fixes issue where chat panel fails to load when multiple chat panels are opened simultaneously. [pull/1836](https://github.com/sourcegraph/cody/pull/1836)
 - Autocomplete: Fixes a bug that caused autocomplete to be triggered at the end of a block or function invocation. [pull/1864](https://github.com/sourcegraph/cody/pull/1864)
 - Edit: Incoming edits that are afixed to the selected code and now handled properly (e.g. docstrings). [pull/1724](https://github.com/sourcegraph/cody/pull/1724)
-- Chat: Allowed backspace and delete keys to remove characters in chat messages input box.
+- Chat: Allowed backspace and delete keys to remove characters in chat messages input box. [pull/1906](https://github.com/sourcegraph/cody/pull/1906)
+- Chat: The commands display box in the chat input box now uses the same styles as the @ command results box. [pull/1962](https://github.com/sourcegraph/cody/pull/1962)
 
 ### Changed
 

vscode/webviews/ChatCommands.module.css

@@ -1,20 +1,19 @@
 .container {
     position: absolute;
-    bottom: 120%;
+    bottom: 100%;
+    left: 0;
     box-sizing: border-box;
-    /* 2px above the input */
-    transform: translateY(calc(var(--spacing) - 5px));
     /* Match the input width */
-    width: calc(100vw - 1.5rem);
-
-    max-height: 250%;
+    width: calc(100vw - 64px);
+    /* Fit in 6 results with the 7th peeking in */
+    max-height: 11.8rem;
     z-index: 101;
     background: var(--vscode-sideBar-background);
     color: var(--vscode-sideBar-foreground);
     border: 1px solid var(--vscode-widget-border);
     box-shadow: 0 0 8px 2px var(--vscode-widget-shadow);
     border-radius: 6px;
-
+    padding: 0.25rem;
     display: flex;
     flex-direction: column;
 }
@@ -23,50 +22,61 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 0.25rem 0.25rem 0 0.5rem;
+    padding: 0.25rem 0.5rem;
+}
+
+.heading-container:has(+ .selections-container) {
+    margin-bottom: 0rem;
 }
 
 .heading {
-    font-size: smaller;
-    opacity: 0.6;
+    font-size: 12px;
     font-weight: 500;
     margin: 0;
 }
 
 .commands-container {
     display: flex;
     flex-direction: column;
-
-    overflow-x: scroll;
+    overflow-x: auto;
 }
 
 .command-item {
     display: flex;
-    align-items: baseline;
+    align-items: center;
     font-size: inherit;
     width: 100%;
     cursor: pointer;
     border: none;
     color: currentColor;
     background: transparent;
     padding: 0.25rem 0.5rem;
+    border-radius: 3px;
+    gap: 0.3rem;
+}
 
-    white-space: nowrap;
+.title-and-description-container {
+    display: flex;
+    align-items: baseline;
+    text-align: left;
+    gap: 0.1rem;
+    overflow: hidden;
 }
 
-.command-title,
-.command-description {
-    margin: 0;
+.command-title {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
 }
 
 .command-description {
     margin-left: 0.25rem;
     font-size: smaller;
     opacity: 0.7;
-
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
+    flex: 1;
 }
 
 .command-item:hover {
@@ -88,6 +98,6 @@ body[data-vscode-theme-kind='vscode-high-contrast'] .selected {
 
 .separator {
     all: unset;
-    margin: 0 0.5rem;
+    margin: 0.5rem;
     border-bottom: 1px solid var(--vscode-dropdown-border);
 }

vscode/webviews/ChatCommands.tsx

@@ -80,8 +80,10 @@ export const ChatCommandsComponent: React.FunctionComponent<React.PropsWithChild
                                         onClick={() => onCommandClick(prompt.slashCommand)}
                                         type="button"
                                     >
-                                        <p className={styles.commandTitle}>{title}</p>
-                                        <p className={styles.commandDescription}>{prompt.description}</p>
+                                        <span className={styles.titleAndDescriptionContainer}>
+                                            <span className={styles.commandTitle}>{title}</span>
+                                            <span className={styles.commandDescription}>{prompt.description}</span>
+                                        </span>
                                     </button>
                                     {hasSeparator ? <hr className={styles.separator} /> : null}
                                 </React.Fragment>