From 610178bfa36182b1ce2fb7bc97dc6c344ab8a5b7 Mon Sep 17 00:00:00 2001
From: EdwardR0507 <ramosedward21@gmail.com>
Date: Mon, 12 Jan 2026 18:41:33 -0500
Subject: [PATCH 1/2] style: enhance Monaco Editor suggestions visibility

- Increase z-index for suggestions widget to ensure it appears above other elements
- Adjust overflow settings for Monaco Editor container to prevent clipping of suggestions
- Enable additional suggestion features in SQL editor configuration
---
 src/app/globals.css                     | 18 ++++++++++++++++++
 src/components/exercises/sql-editor.tsx | 16 ++++++++++++++--
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 1eb1943..01dbea6 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -409,3 +409,21 @@
 .dark .dotted-grid {
   opacity: 0.2;
 }
+
+/* Monaco Editor Suggestions Widget - Ensure it appears above other elements */
+.monaco-editor .suggest-widget {
+  z-index: 10000 !important;
+}
+
+.monaco-editor .suggest-widget .monaco-list {
+  z-index: 10000 !important;
+}
+
+/* Ensure Monaco Editor container doesn't clip suggestions */
+.monaco-editor {
+  overflow: visible !important;
+}
+
+.monaco-editor .overflow-guard {
+  overflow: visible !important;
+}
\ No newline at end of file
diff --git a/src/components/exercises/sql-editor.tsx b/src/components/exercises/sql-editor.tsx
index b62c09b..55dd5d1 100644
--- a/src/components/exercises/sql-editor.tsx
+++ b/src/components/exercises/sql-editor.tsx
@@ -486,7 +486,7 @@ export function SqlEditor({
         />
         <Card
           className={cn(
-            "relative overflow-hidden transition-colors duration-300",
+            "relative transition-colors duration-300",
             isValidated
               ? "border-emerald-500/30"
               : hasError
@@ -496,7 +496,7 @@ export function SqlEditor({
         >
           <CardContent className="p-0">
             {/* Responsive editor height: smaller on mobile, larger on desktop */}
-            <div className="h-[150px] sm:h-[200px] lg:h-[250px]">
+            <div className="h-[150px] sm:h-[200px] lg:h-[250px] overflow-visible">
               <Editor
                 height="100%"
                 defaultLanguage="sql"
@@ -518,7 +518,19 @@ export function SqlEditor({
                     preview: true,
                     showMethods: true,
                     showFunctions: true,
+                    showIcons: true,
+                    showStatusBar: true,
+                    showSnippets: true,
                   },
+                  quickSuggestions: {
+                    other: true,
+                    comments: true,
+                    strings: true,
+                  },
+                  suggestOnTriggerCharacters: true,
+                  acceptSuggestionOnCommitCharacter: true,
+                  acceptSuggestionOnEnter: "on",
+                  snippetSuggestions: "top",
                 }}
                 onMount={handleEditorDidMount}
               />

From 335617a7104ac4fb1a78f947208fda015aed0b87 Mon Sep 17 00:00:00 2001
From: EdwardR0507 <ramosedward21@gmail.com>
Date: Mon, 12 Jan 2026 18:53:40 -0500
Subject: [PATCH 2/2] feat: enhance SQL editor keyboard shortcuts

- Implement Ctrl+Enter and Ctrl+Shift+F commands for executing SQL and formatting code, respectively.
- Refactor key handling to use refs for onExecute and formatSQL functions, improving performance and readability.
---
 src/components/exercises/sql-editor.tsx | 36 ++++++++++++++-----------
 1 file changed, 21 insertions(+), 15 deletions(-)

diff --git a/src/components/exercises/sql-editor.tsx b/src/components/exercises/sql-editor.tsx
index 55dd5d1..923bcd8 100644
--- a/src/components/exercises/sql-editor.tsx
+++ b/src/components/exercises/sql-editor.tsx
@@ -273,6 +273,9 @@ export function SqlEditor({
   const [showSignupPrompt, setShowSignupPrompt] = useState(false);
   const [isMac, setIsMac] = useState(false);
 
+  const onExecuteRef = useRef(onExecute);
+  const formatSQLRef = useRef<() => void>(() => {});
+
   useEffect(() => {
     setIsMac(navigator.platform.toUpperCase().includes("MAC"));
   }, []);
@@ -359,6 +362,19 @@ export function SqlEditor({
   ) => {
     editorRef.current = editor;
 
+    // Ctrl+Enter to execute
+    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, () => {
+      onExecuteRef.current();
+    });
+
+    // Ctrl+Shift+F to format
+    editor.addCommand(
+      monaco.KeyMod.CtrlCmd | monaco.KeyMod.Shift | monaco.KeyCode.KeyF,
+      () => {
+        formatSQLRef.current();
+      }
+    );
+
     monaco.languages.registerCompletionItemProvider("sql", {
       provideCompletionItems: (model, position) => {
         const word = model.getWordUntilPosition(position);
@@ -437,22 +453,12 @@ export function SqlEditor({
   }, [value, onChange]);
 
   useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      // Ctrl+Enter (Windows/Linux) or Cmd+Enter (Mac) to execute
-      if (e.key === "Enter" && (e.ctrlKey || e.metaKey) && !e.shiftKey) {
-        e.preventDefault();
-        onExecute();
-      }
-      // Ctrl+Shift+F or Cmd+Shift+F to format
-      if (e.key === "f" && (e.ctrlKey || e.metaKey) && e.shiftKey) {
-        e.preventDefault();
-        formatSQL();
-      }
-    };
+    onExecuteRef.current = onExecute;
+  }, [onExecute]);
 
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [onExecute, formatSQL]);
+  useEffect(() => {
+    formatSQLRef.current = formatSQL;
+  }, [formatSQL]);
 
   const showSavedState = isSaved || wasAlreadySolved;