improve <code> tags

src/renderer/src/components/ExpressionDialog.tsx

@@ -57,7 +57,7 @@ const ExpressionDialog = forwardRef<HTMLDivElement, Props>(({ onSubmit, examples
       {description && <AlertDialog.Description>{description}</AlertDialog.Description>}
 
       {variables && (
-        <div style={{ marginBottom: '1em' }}>{t('Variables')}: {variables.map((v) => <code style={{ display: 'inline-block', marginRight: '.3em' }} key={v} className="highlighted">{v}</code>)}</div>
+        <div style={{ marginBottom: '1em' }}>{t('Variables')}: {variables.map((v) => <code style={{ marginRight: '.3em' }} key={v} className="highlighted">{v}</code>)}</div>
       )}
 
       <div><b>{t('Examples')}:</b></div>

src/renderer/src/main.css

@@ -41,22 +41,22 @@ body {
 }
 
 kbd {
-    white-space: nowrap;
-    display: inline-block;
-    padding: 3px 5px;
-    font-size: 11px;
-    line-height: 10px;
-    color: var(--gray-11);
-    vertical-align: middle;
-    background-color: var(--gray-4);
-    border: solid 1px var(--gray-8);
-    border-bottom-color: var(--gray-8);
-    border-radius: 3px;
-    box-shadow: inset 0 -1px 0 var(--gray-8);
+  white-space: nowrap;
+  display: inline-block;
+  padding: 3px 5px;
+  font-size: 11px;
+  line-height: 10px;
+  color: var(--gray-11);
+  vertical-align: middle;
+  background-color: var(--gray-4);
+  border: solid 1px var(--gray-8);
+  border-bottom-color: var(--gray-8);
+  border-radius: 3px;
+  box-shadow: inset 0 -1px 0 var(--gray-8);
 }
 
 code.highlighted {
-  background-color: var(--gray-4);
+  background-color: var(--gray-7);
   border-radius: .2em;
 }