Wrap operators in quotes (#8527)

## Summary
- Wrap the contains and match operators in `"` to support the usage of
reserved chars within it.
- Align the error/X with the bottom row


https://www.loom.com/share/d0d0b4d4acb74a139a91bfcd4cf91fb6?sid=441c1a9d-74f0-4b0a-b5a4-0de1f27988f4

## How did you test this change?
1) Load the sessions page
2) Use the contains operator
- [ ] The * are wrapped in "
3) Select a value that breaks to a new line
- [ ] X aligned on bottom row
- [ ] Any error aligned on bottom row

## Are there any deployment considerations?
N/A

## Does this work require review from our design team?
N/A

frontend/src/components/Search/SearchForm/SearchForm.css.ts

@@ -100,26 +100,26 @@ export const comboboxTagError = style({})
 export const comboboxTagClose = style({
 	backgroundColor: vars.color.white,
 	borderRadius: vars.borderRadius.round,
+	bottom: 8,
 	color: themeVars.static.content.default,
 	cursor: 'pointer',
+	marginLeft: -6,
 	position: 'absolute',
 	pointerEvents: 'auto',
 	opacity: 0,
-	right: -8,
-	top: -8,
 	zIndex: 1,
 })
 
 export const comboboxTagErrorIndicator = style({
 	backgroundColor: vars.color.white,
 	borderRadius: vars.borderRadius.round,
+	bottom: 8,
 	color: themeVars.static.content.sentiment.bad,
 	fontWeight: 'bold',
+	marginLeft: -6,
 	opacity: 1,
 	position: 'absolute',
 	pointerEvents: 'auto',
-	right: -8,
-	top: -8,
 	zIndex: 1,
 })
 

frontend/src/components/Search/SearchForm/SearchForm.tsx

@@ -68,8 +68,8 @@ const EXISTS_OPERATORS = ['EXISTS', 'NOT EXISTS'] as const
 const NUMERIC_OPERATORS = ['>', '>=', '<', '<='] as const
 const EQUAL_OPERATOR = ['='] as const
 const BOOLEAN_OPERATORS = ['=', '!='] as const
-const CONTAINS_OPERATOR = ['=**', '!=**'] as const
-const MATCHES_OPERATOR = ['=//', '!=//'] as const
+const CONTAINS_OPERATOR = ['="**"', '!="**"'] as const
+const MATCHES_OPERATOR = ['="//"', '!="//"'] as const
 export const SEARCH_OPERATORS = [
 	...BOOLEAN_OPERATORS,
 	...NUMERIC_OPERATORS,
@@ -537,7 +537,7 @@ export const Search: React.FC<{
 				...MATCHES_OPERATOR,
 			].find((o) => o === item.name)
 			if (isContainsOrMatches) {
-				cursorShift = -1
+				cursorShift = -2
 			}
 
 			const key =
@@ -1016,13 +1016,13 @@ const getSearchResultBadgeText = (key: SearchResult) => {
 				return 'exists'
 			case 'NOT EXISTS':
 				return 'does not exist'
-			case '=**':
+			case '="**"':
 				return 'contains'
-			case '!=**':
+			case '!="**"':
 				return 'does not contain'
-			case '=//':
+			case '="//"':
 				return 'matches'
-			case '!=//':
+			case '!="//"':
 				return 'does not match'
 		}
 	} else if (key.type === 'Value') {