From 18b1739b890b4659d936b80e17ccce74ffb1952e Mon Sep 17 00:00:00 2001
From: Aria <weglossing@gmail.com>
Date: Tue, 26 Aug 2025 12:53:38 -0500
Subject: [PATCH 1/3] Add a space after paragraphs in descriptions and add
 padding to hover tooltips

---
 website/src/repl/Repl.css | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/website/src/repl/Repl.css b/website/src/repl/Repl.css
index b8443081f..b74eff218 100644
--- a/website/src/repl/Repl.css
+++ b/website/src/repl/Repl.css
@@ -72,8 +72,7 @@
 
 /* Override default styles from the codemirror inline css for autocomplete info tooltip*/
 .cm-tooltip.cm-completionInfo {
-  padding: 12px !important;
-  padding-bottom: 12px !important;
+  padding: 0 !important;
   border: 1px solid var(--foreground) !important;
   border-radius: 4px !important;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
@@ -87,6 +86,8 @@
 
 /* Main tooltip container */
 .autocomplete-info-tooltip {
+  padding: 12px !important;
+  padding-bottom: 12px !important;
   border-radius: 4px !important;
   color: var(--foreground);
   font-family: var(--font-family, 'SF Mono', 'Monaco', monospace);
@@ -97,6 +98,10 @@
   min-width: 400px;
 }
 
+.autocomplete-info-tooltip p {
+  margin-bottom: 1em;
+}
+
 .autocomplete-info-function-name {
   font-size: 15px;
   font-weight: 600;

From 877bc95a5836bd4d45755dcc5ac673af1cc7e05b Mon Sep 17 00:00:00 2001
From: Aria <weglossing@gmail.com>
Date: Tue, 26 Aug 2025 12:54:39 -0500
Subject: [PATCH 2/3] Switch to more specific class and fix p->div

---
 packages/codemirror/autocomplete.mjs | 2 +-
 website/src/repl/Repl.css            | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/codemirror/autocomplete.mjs b/packages/codemirror/autocomplete.mjs
index c0845895e..646107236 100644
--- a/packages/codemirror/autocomplete.mjs
+++ b/packages/codemirror/autocomplete.mjs
@@ -58,7 +58,7 @@ export const Autocomplete = ({ doc, label }) =>
   h`
   <div class="autocomplete-info-tooltip">
     <h3 class="autocomplete-info-function-name">${label || getDocLabel(doc)}</h3>
-    ${doc.description ? `<p class="autocomplete-info-function-description">${doc.description}</p>` : ''}
+    ${doc.description ? `<div class="autocomplete-info-function-description">${doc.description}</div>` : ''}
     ${buildParamsList(doc.params)}
     ${buildExamples(doc.examples)}
   </div>
diff --git a/website/src/repl/Repl.css b/website/src/repl/Repl.css
index b74eff218..ad8b6a40d 100644
--- a/website/src/repl/Repl.css
+++ b/website/src/repl/Repl.css
@@ -98,7 +98,7 @@
   min-width: 400px;
 }
 
-.autocomplete-info-tooltip p {
+.autocomplete-info-function-description p {
   margin-bottom: 1em;
 }
 

From a5886bb9d46259dea09539d29e7dc5bc9017e507 Mon Sep 17 00:00:00 2001
From: Aria <weglossing@gmail.com>
Date: Tue, 26 Aug 2025 14:14:00 -0500
Subject: [PATCH 3/3] Use white-space instead; fix scrolling; don't close
 autocomplete tooltips on click

---
 packages/codemirror/autocomplete.mjs | 14 ++++++++------
 website/src/repl/Repl.css            | 15 +++++++++------
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/packages/codemirror/autocomplete.mjs b/packages/codemirror/autocomplete.mjs
index 646107236..59ca8adf2 100644
--- a/packages/codemirror/autocomplete.mjs
+++ b/packages/codemirror/autocomplete.mjs
@@ -56,11 +56,13 @@ const buildExamples = (examples) =>
 
 export const Autocomplete = ({ doc, label }) =>
   h`
-  <div class="autocomplete-info-tooltip">
-    <h3 class="autocomplete-info-function-name">${label || getDocLabel(doc)}</h3>
-    ${doc.description ? `<div class="autocomplete-info-function-description">${doc.description}</div>` : ''}
-    ${buildParamsList(doc.params)}
-    ${buildExamples(doc.examples)}
+  <div class="autocomplete-info-container">
+    <div class="autocomplete-info-tooltip">
+      <h3 class="autocomplete-info-function-name">${label || getDocLabel(doc)}</h3>
+      ${doc.description ? `<div class="autocomplete-info-function-description">${doc.description}</div>` : ''}
+      ${buildParamsList(doc.params)}
+      ${buildExamples(doc.examples)}
+    </div>
   </div>
 `[0];
 
@@ -98,4 +100,4 @@ export const strudelAutocomplete = (context) => {
 };
 
 export const isAutoCompletionEnabled = (enabled) =>
-  enabled ? [autocompletion({ override: [strudelAutocomplete] })] : [];
+  enabled ? [autocompletion({ override: [strudelAutocomplete], closeOnBlur: false })] : [];
diff --git a/website/src/repl/Repl.css b/website/src/repl/Repl.css
index ad8b6a40d..498679090 100644
--- a/website/src/repl/Repl.css
+++ b/website/src/repl/Repl.css
@@ -79,15 +79,12 @@
   max-width: 500px !important;
   min-width: 300px !important;
   max-height: 400px !important;
-  white-space: normal !important;
-  overflow: auto !important;
   background-color: var(--lineHighlight) !important;
 }
 
 /* Main tooltip container */
-.autocomplete-info-tooltip {
+.autocomplete-info-container {
   padding: 12px !important;
-  padding-bottom: 12px !important;
   border-radius: 4px !important;
   color: var(--foreground);
   font-family: var(--font-family, 'SF Mono', 'Monaco', monospace);
@@ -96,10 +93,16 @@
   max-width: 600px;
   max-height: 400px;
   min-width: 400px;
+  white-space: normal !important;
+  overflow-y: auto !important;
 }
 
-.autocomplete-info-function-description p {
-  margin-bottom: 1em;
+.autocomplete-info-tooltip {
+  overflow-y: auto !important;
+}
+
+.autocomplete-info-function-description {
+  white-space: pre-wrap !important;
 }
 
 .autocomplete-info-function-name {