minimal sql console API and UI

ui/src/css/_main.css

@@ -35,3 +35,4 @@
 @import "./collectionsOverview.css";
 @import "./erd.css";
 @import "./hideControls.css";
+@import "./sqlConsole.css";

ui/src/css/base.css

@@ -919,6 +919,7 @@ hr {
 .alert {
     display: block;
     width: 100%;
+    flex-shrink: 0;
     align-content: center;
     min-height: var(--lgBtnHeight);
     padding: max(5px, calc(var(--inputPadding) - 5px)) max(10px, var(--inputPadding));

ui/src/css/form.css

@@ -1131,6 +1131,7 @@ button {
         &:empty::before {
             content: attr(data-placeholder);
             color: var(--surfaceTxtDisabledColor);
+            white-space: normal;
         }
     }
 

ui/src/css/layout.css

@@ -174,16 +174,14 @@
     column-gap: var(--smSpacing);
     row-gap: calc(var(--smSpacing) - 5px);
     width: 100%;
+    flex-shrink: 0;
     align-items: center;
-    margin: -5px 0 calc(var(--spacing) - 5px);
+    min-height: var(--btnHeight);
+    margin: -10px 0 calc(var(--spacing) - 10px);
     .searchbar {
         width: auto;
         flex-grow: 1;
     }
-    &.compact {
-        margin-top: -10px;
-        margin-bottom: calc(var(--spacing) - 10px);
-    }
     .page-header-secondary-btns,
     .page-header-primary-btns {
         display: inline-flex;
@@ -206,10 +204,6 @@
     }
     @media (max-width: 950px) {
         gap: 5px;
-        flex-grow: 1;
-        .flex-nowrap & {
-            flex-grow: 0;
-        }
         .btn {
             flex-grow: 1;
             flex-basis: 0;
@@ -219,7 +213,6 @@
     }
     @media (max-width: 550px) {
         gap: 5px;
-        flex-grow: 0;
         .api-preview-btn {
             display: none;
         }
@@ -228,6 +221,7 @@
             width: auto;
             aspect-ratio: 1 / 1;
             border-radius: 50%;
+            min-width: 0;
             i + .txt {
                 display: none;
             }
@@ -241,6 +235,7 @@
     align-items: center;
     width: auto;
     z-index: 10;
+    gap: var(--smSpacing);
     color: var(--surfaceTxtHintColor);
     font-size: var(--smFontSize);
     line-height: var(--smLineHeight);

ui/src/css/sqlConsole.css

@@ -0,0 +1,32 @@
+.field.sql-console-field {
+    .input {
+        resize: vertical;
+        height: 250px;
+        min-height: 150px;
+        max-height: 400px;
+
+        @media (max-height: 650px) {
+            height: 150px;
+        }
+    }
+}
+
+.sql-console-history-dropdown {
+    width: 450px;
+    &.no-items {
+        width: 300px;
+    }
+    .dropdown-item {
+        gap: 5px;
+        padding: 5px;
+        font-size: 0.9em;
+        line-height: 1.2;
+        font-family: var(--monospaceFontFamily);
+        .query {
+            display: -webkit-box;
+            overflow: hidden;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 3;
+        }
+    }
+}

ui/src/css/table.css

@@ -317,6 +317,22 @@ table {
         min-width: 900px;
         border-radius: 0;
     }
+    table > :first-child > tr:first-child {
+        > :first-child {
+            border-top-left-radius: 0;
+        }
+        > :last-child {
+            border-top-right-radius: 0;
+        }
+    }
+    table > :last-child > tr:last-child {
+        > :first-child {
+            border-bottom-left-radius: 0;
+        }
+        > :last-child {
+            border-bottom-right-radius: 0;
+        }
+    }
     tr {
         animation: fadeIn var(--animationSpeed);
     }
@@ -342,6 +358,7 @@ table {
         td,
         th {
             height: 59px;
+            border-radius: 0;
         }
     }
 

ui/src/css/tooltip.css

@@ -15,7 +15,6 @@
     line-height: var(--smLineHeight);
     font-family: var(--baseFontFamily);
     scrollbar-width: thin;
-    margin: 3px;
     padding: 3px 5px;
     pointer-events: none;
     opacity: 0;