Resizer: Increase target size (#4773)

* increase target, add border to custom dashboard * fix table explorer placement * z index
rilldata · Apr 30, 2024 · 9a44e79 · 9a44e79 · github-actions · Apr 30, 2024
1 parent 645cdee
commit 9a44e79
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 8 deletions.
diff --git a/web-common/src/features/tables/TableExplorer.svelte b/web-common/src/features/tables/TableExplorer.svelte
@@ -32,7 +32,7 @@
 
 {#if connectorInstanceId && olapConnector}
   <section
-    class="flex flex-col border-t border-t-gray-200"
+    class="flex flex-col border-t border-t-gray-200 relative"
     style:min-height="{MIN_HEIGHT}px"
     style:height="{sectionHeight}px"
   >
@@ -43,7 +43,6 @@
       min={10}
       basis={showTables ? startingHeight : MIN_HEIGHT}
       max={2000}
-      absolute={false}
     />
     <button
       class="flex justify-between items-center w-full pl-2 pr-3.5 pt-2 pb-2 text-gray-500"

diff --git a/web-common/src/layout/Resizer.svelte b/web-common/src/layout/Resizer.svelte
@@ -83,7 +83,7 @@
 
 <style lang="postcss">
   button {
-    @apply z-10 flex-none;
+    @apply z-50 flex-none;
     /* @apply bg-red-400; */
   }
 
@@ -92,21 +92,37 @@
   }
 
   .NS {
-    @apply w-full h-2 pr-8;
+    @apply w-full h-3 pr-8;
     @apply cursor-row-resize;
   }
 
   .EW {
-    @apply w-2 h-full;
+    @apply w-3 h-full;
     @apply cursor-col-resize;
   }
 
+  .NS.maxed {
+    @apply cursor-s-resize;
+  }
+
+  .NS.minned {
+    @apply cursor-n-resize;
+  }
+
+  .EW.minned {
+    @apply cursor-e-resize;
+  }
+
+  .EW.maxed {
+    @apply cursor-w-resize;
+  }
+
   .left {
     @apply -left-1;
   }
 
   .right {
-    @apply right-0;
+    @apply -right-1;
   }
 
   .top {

diff --git a/web-local/src/routes/(application)/chart/[name]/+page.svelte b/web-local/src/routes/(application)/chart/[name]/+page.svelte
@@ -55,7 +55,7 @@
   <WorkspaceContainer inspector={false} bind:width={containerWidth}>
     <ChartsHeader slot="header" {filePath} />
     <div slot="body" class="flex size-full">
-      <div style:width="{editorWidth}px" class="relative flex-none">
+      <div style:width="{editorWidth}px" class="relative flex-none border-r">
         <Resizer
           direction="EW"
           side="right"

diff --git a/web-local/src/routes/(application)/custom-dashboards/[name]/+page.svelte b/web-local/src/routes/(application)/custom-dashboards/[name]/+page.svelte
@@ -220,7 +220,7 @@
     {#if selectedView == "code" || selectedView == "split"}
       <div
         transition:slide={{ duration: 400, axis: "x" }}
-        class="relative h-full flex-shrink-0 w-full"
+        class="relative h-full flex-shrink-0 w-full border-r"
         class:!w-full={selectedView === "code"}
         style:width="{editorWidth}px"
       >