diff --git a/x-pack/plugins/code/public/components/query_bar/components/options.tsx b/x-pack/plugins/code/public/components/query_bar/components/options.tsx
index 6e0a466ae2722..c5a08793a7842 100644
--- a/x-pack/plugins/code/public/components/query_bar/components/options.tsx
+++ b/x-pack/plugins/code/public/components/query_bar/components/options.tsx
@@ -89,7 +89,12 @@ export class SearchOptions extends Component<Props, State> {
       });
 
       optionsFlyout = (
-        <EuiFlyout onClose={this.closeOptionsFlyout} size="s" aria-labelledby="flyoutSmallTitle">
+        <EuiFlyout
+          onClose={this.closeOptionsFlyout}
+          size="s"
+          aria-labelledby="flyoutSmallTitle"
+          className="code-search-settings-flyout"
+        >
           <EuiFlyoutHeader>
             <EuiTitle size="s">
               <h2 id="flyoutSmallTitle"> Search Settings </h2>
diff --git a/x-pack/plugins/code/public/components/query_bar/query_bar.scss b/x-pack/plugins/code/public/components/query_bar/query_bar.scss
new file mode 100644
index 0000000000000..e4fd0655d2095
--- /dev/null
+++ b/x-pack/plugins/code/public/components/query_bar/query_bar.scss
@@ -0,0 +1,3 @@
+.code-search-settings-flyout {
+  max-width: 28rem;
+}
diff --git a/x-pack/plugins/code/public/index.scss b/x-pack/plugins/code/public/index.scss
index c93e05784ede5..f1a0b34636693 100644
--- a/x-pack/plugins/code/public/index.scss
+++ b/x-pack/plugins/code/public/index.scss
@@ -15,3 +15,4 @@
 @import "./style/markdown.scss";
 @import "./style/shortcuts.scss";
 @import "./components/symbol_tree/symbol_tree.scss";
+@import "./components/query_bar/query_bar.scss";