More compact Cody Chat Suggestions buttons (#53755)

This makes the suggestion buttons a little more compact for now (saves
50px vertical height on average)

| Before | After |
| - | - |
| <img width="322" alt="Screenshot 2023-06-20 at 10 46 07 pm"
src="https://github.com/sourcegraph/sourcegraph/assets/153/65df0187-366b-429b-8ff2-7571a4040f61">
|<img width="322" alt="Screenshot 2023-06-20 at 10 46 57 pm"
src="https://github.com/sourcegraph/sourcegraph/assets/153/15f88959-a2c6-492f-9325-d72e04ddd66a">
|

## Test plan

- Make the buttons appear
- Interact with them

client/cody-ui/src/Chat.module.css

@@ -47,8 +47,11 @@
 .suggestions {
     display: flex;
     flex-wrap: wrap;
-    gap: 0.5rem;
+    flex-direction: row;
+    gap: 0.1rem;
     margin-bottom: 0.25rem;
+    /* This matches the button paddings, so the button text lines up with the input */
+    margin-left: -6px;
 }
 
 .abort-button-container {

client/cody/CHANGELOG.md

@@ -22,6 +22,7 @@ Starting from `0.2.0`, Cody is using `major.EVEN_NUMBER.patch` for release versi
 - New chat layout. [pull/53332](https://github.com/sourcegraph/sourcegraph/pull/53332)
 - Completions: Completions can now be used on unsaved files. [pull/53495](https://github.com/sourcegraph/sourcegraph/pull/53495)
 - Completions: Add multi-line heuristics for C, C++, C#, and Java. [pull/53631](https://github.com/sourcegraph/sourcegraph/pull/53631)
+- More compact chat suggestion buttons [pull/53755](https://github.com/sourcegraph/sourcegraph/pull/53755)
 
 ## [0.2.4]
 

client/cody/webviews/Chat.module.css

@@ -108,7 +108,25 @@ body[data-vscode-theme-kind='vscode-high-contrast'] .transcript-item:not(.human-
 }
 
 .suggestion-button {
-    border-radius: 1rem;
+    all: unset;
+    cursor: pointer;
+    font-size: 90%;
+    padding: 3px 6px;
+    border-radius: 5px;
+    background: var(--button-icon-background);
+    border-radius: var(--button-icon-corner-radius);
+    color: var(--foreground);
+}
+
+.suggestion-button:hover {
+    background: var(--button-icon-hover-background);
+    outline: 1px dotted var(--contrast-active-border);
+    outline-offset: -1px;
+}
+
+.suggestion-button .codicon {
+    vertical-align: middle;
+    margin-right: 3px;
 }
 
 .submit-button-disabled {

client/cody/webviews/Chat.tsx

@@ -214,12 +214,9 @@ const SubmitButton: React.FunctionComponent<ChatUISubmitButtonProps> = ({ classN
 )
 
 const SuggestionButton: React.FunctionComponent<ChatUISuggestionButtonProps> = ({ suggestion, onClick }) => (
-    <VSCodeButton className={styles.suggestionButton} appearance="secondary" type="button" onClick={onClick}>
-        <i className="codicon codicon-sparkle" slot="start">
-            {/* Fallback emoji because this icon is a new addition and doesn't seem to work for me? */}✨
-        </i>{' '}
+    <button className={styles.suggestionButton} type="button" onClick={onClick}>
         {suggestion}
-    </VSCodeButton>
+    </button>
 )
 
 const EditButton: React.FunctionComponent<EditButtonProps> = ({