diff --git a/client/web-sveltekit/src/lib/search/input/SuggestionOption.svelte b/client/web-sveltekit/src/lib/search/input/SuggestionOption.svelte
index 546b66baa57..34cf81d37e9 100644
--- a/client/web-sveltekit/src/lib/search/input/SuggestionOption.svelte
+++ b/client/web-sveltekit/src/lib/search/input/SuggestionOption.svelte
@@ -7,10 +7,11 @@
 </script>
 
 <script lang="ts">
-    import Icon from '$lib/Icon.svelte'
     import { type Option, type Action, RenderAs } from '$lib/branded'
-    import SyntaxHighlightedQuery from '../SyntaxHighlightedQuery.svelte'
+    import Icon from '$lib/Icon.svelte'
+
     import EmphasizedLabel from '../EmphasizedLabel.svelte'
+    import SyntaxHighlightedQuery from '../SyntaxHighlightedQuery.svelte'
 
     export let option: Option
     export let groupIndex: number
@@ -96,7 +97,7 @@
         padding: 0.25rem 0.5rem;
         border-radius: var(--border-radius);
         font-family: var(--code-font-family);
-        font-size: 0.75rem;
+        font-size: var(--code-font-size);
         min-height: 1.5rem;
         gap: 0.25rem;
 
@@ -174,7 +175,7 @@
 
     .filter-option {
         font-family: var(--code-font-family);
-        font-size: 0.75rem;
+        font-size: var(--code-font-size);
         display: flex; // to remove whitespace around the filter parts
 
         .separator {
diff --git a/client/web-sveltekit/src/lib/search/input/Suggestions.svelte b/client/web-sveltekit/src/lib/search/input/Suggestions.svelte
index ebfb7455867..c76474d7620 100644
--- a/client/web-sveltekit/src/lib/search/input/Suggestions.svelte
+++ b/client/web-sveltekit/src/lib/search/input/Suggestions.svelte
@@ -1,13 +1,16 @@
 <script lang="ts">
-    import { getSuggestionsState, type Option, type Group, type Action } from '$lib/branded'
     import { EditorView } from '@codemirror/view'
-    import SuggestionOption from './SuggestionOption.svelte'
-    import { createEventDispatcher, tick } from 'svelte'
-    import { isSafari } from '@sourcegraph/common/src/util'
-    import Icon from '$lib/Icon.svelte'
     import { mdiInformationOutline } from '@mdi/js'
-    import ActionInfo from './ActionInfo.svelte'
+    import { createEventDispatcher, tick } from 'svelte'
+
+    import { isSafari } from '@sourcegraph/common/src/util'
+
+    import { getSuggestionsState, type Option, type Group, type Action } from '$lib/branded'
     import { restrictToViewport } from '$lib/dom'
+    import Icon from '$lib/Icon.svelte'
+
+    import ActionInfo from './ActionInfo.svelte'
+    import SuggestionOption from './SuggestionOption.svelte'
 
     const dispatch = createEventDispatcher<{ select: { option: Option; action: Action } }>()
 
@@ -146,7 +149,7 @@
                 // group header
                 [role='presentation'] {
                     color: var(--text-muted);
-                    font-size: 0.75rem;
+                    font-size: var(--code-font-size);
                     font-weight: 500;
                     margin-bottom: 0.25rem;
                     padding: 0 0.5rem;