From 4c90519ad8b594d6eae5f5761dbee0f6c53cc57a Mon Sep 17 00:00:00 2001
From: Dan LaManna <dan.lamanna@kitware.com>
Date: Tue, 10 Mar 2026 11:26:37 -0400
Subject: [PATCH] Misc data explorer styling improvements

---
 isic/core/templates/core/data_explorer.html | 12 ++++++------
 package-lock.json                           |  3 ---
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/isic/core/templates/core/data_explorer.html b/isic/core/templates/core/data_explorer.html
index c0c633561..b9a1d3b1c 100644
--- a/isic/core/templates/core/data_explorer.html
+++ b/isic/core/templates/core/data_explorer.html
@@ -42,8 +42,8 @@ <h1 class="text-xl sm:text-2xl font-bold mb-2">ISIC Data Explorer</h1>
       </p>
 
       <div class="mb-2">
-        <div class="flex items-center justify-between">
-          <label class="label font-semibold">SQL Query</label>
+        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 mb-2">
+          <label class="label font-semibold p-0">SQL Query</label>
           <div class="flex items-center gap-2">
             <button
               @click="setQuery('SUMMARIZE metadata'); runQuery()"
@@ -54,7 +54,7 @@ <h1 class="text-xl sm:text-2xl font-bold mb-2">ISIC Data Explorer</h1>
             </button>
             <select
               id="example-query-select"
-              class="select select-bordered select-xs"
+              class="border border-gray-300 rounded px-2 py-1 text-sm font-semibold min-w-0"
               @change="if ($el.value) { setQuery(examples[$el.value].sql); }"
               x-html="'<option value=\'\'>Example queries...</option>' + examples.map((e, i) => `<option value=\'${i}\'>${e.name}</option>`).join('')"
             ></select>
@@ -63,7 +63,7 @@ <h1 class="text-xl sm:text-2xl font-bold mb-2">ISIC Data Explorer</h1>
         <div id="sql-editor" class="border border-gray-300 rounded overflow-hidden"></div>
       </div>
 
-      <div class="flex flex-wrap items-center gap-2 sm:gap-4 mb-2">
+      <div class="flex flex-wrap items-center gap-2 mb-2">
         <button
           id="run-query-btn"
           @click="runQuery()"
@@ -74,7 +74,7 @@ <h1 class="text-xl sm:text-2xl font-bold mb-2">ISIC Data Explorer</h1>
           <span x-show="running">Running...</span>
         </button>
         <span x-show="elapsed" class="text-sm text-gray-500" x-text="elapsed"></span>
-        <div class="ml-auto flex items-center gap-2">
+        <div class="flex items-center gap-2 sm:ml-auto">
           <button
             @click="copyLink()"
             class="btn btn-ghost btn-sm"
@@ -397,7 +397,7 @@ <h3 class="font-bold text-lg mb-4">Create Collection</h3>
                 EditorView.theme({
                   '&': {fontSize: '14px'},
                   '.cm-content': {fontFamily: 'monospace'},
-                  '.cm-scroller': {height: '10lh', overflow: 'auto'},
+                  '.cm-scroller': {height: window.innerWidth < 640 ? '6lh' : '10lh', overflow: 'auto'},
                 }),
               ],
               parent: document.getElementById('sql-editor'),
diff --git a/package-lock.json b/package-lock.json
index f13b47dc0..7d7f70729 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -475,7 +475,6 @@
       "integrity": "sha512-s+6pwEj+GfKf7vqGUzN9iSEPueUssCCQrCBUlcAfKrJe0a22hTUCjewpB0I7lNrCIULt8dkndD+sMdOrXsRl6Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@mischnic/json-sourcemap": "^0.1.0",
         "@parcel/cache": "2.12.0",
@@ -5111,7 +5110,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.1",
         "picocolors": "^1.0.0",
@@ -5724,7 +5722,6 @@
       "integrity": "sha512-H3uMmZNWzG6aqmg9q07ZIRNIawoiEcNFKDfL+YzOPuPsXuDXxJxB9icqzLgdzKNwjG3SAro2h9SYav8ewXNgig==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "arg": "^5.0.1",
         "chokidar": "^3.5.3",