Update pivot sidebar layout mechanism (#4076)

* update pivot sidebar layout mechanism

* simplify elements

* chrome/firefox limitation workaround

web-common/src/features/dashboards/pivot/PivotDrag.svelte

@@ -2,58 +2,75 @@
   import CaretDownIcon from "@rilldata/web-common/components/icons/CaretDownIcon.svelte";
   import DragList from "./DragList.svelte";
   import type { PivotSidebarSection, PivotChipData } from "./types";
+  import { beforeUpdate } from "svelte";
 </script>
 
 <script lang="ts">
   export let title: PivotSidebarSection;
   export let items: PivotChipData[];
   export let collapsed = false;
 
-  let showMore = false;
+  let container: HTMLDivElement;
 
-  $: visible = showMore ? items.length : 3;
-
-  $: visibleItems = items.slice(0, visible);
+  beforeUpdate(() => {
+    if (!container) return;
+    calculateSize(container);
+  });
 
   function toggleCollapse() {
     collapsed = !collapsed;
   }
 
-  function toggleShowMore() {
-    showMore = !showMore;
+  // Only Safari seems to support flex-basis in conjunction with max-height: fit-content
+  // So, this is a workaround to achieve the same thing in JS
+  function calculateSize(element: HTMLDivElement) {
+    element.style.height = "fit-content";
+    element.style.flexShrink = "0";
+
+    const fitContentHeight = container.offsetHeight;
+
+    element.style.height = "100%";
+    element.style.flexShrink = "1";
+
+    const evenSplitHeight = container.offsetHeight;
+
+    if (fitContentHeight < evenSplitHeight) {
+      element.style.height = "fit-content";
+      element.style.flexShrink = "0";
+    }
   }
 </script>
 
-<div class="flex flex-col gap-1 items-start">
+<svelte:window on:resize={() => calculateSize(container)} />
+
+<div class="container" bind:this={container}>
   <button class="flex gap-1" on:click={toggleCollapse}>
     <span class="header">{title}</span>
     <div class="transition-transform" class:-rotate-180={!collapsed}>
       <CaretDownIcon size="12px" />
     </div>
   </button>
 
-  {#if !collapsed}
-    {#if visibleItems.length}
-      <DragList items={visibleItems} />
-    {:else}
-      <p class="text-gray-500 my-1">No available fields</p>
+  <div class="w-full h-fit overflow-scroll px-[2px] pb-2">
+    {#if !collapsed}
+      {#if items.length}
+        <DragList {items} />
+      {:else}
+        <p class="text-gray-500 my-1">No available fields</p>
+      {/if}
     {/if}
-
-    {#if !collapsed && items.length > 3}
-      <button class="see-more" on:click={toggleShowMore}>
-        {showMore ? "Show less" : "Show more"}
-      </button>
-    {/if}
-  {/if}
+  </div>
 </div>
 
 <style lang="postcss">
-  button {
-    @apply flex items-center justify-center;
+  .container {
+    @apply pt-3 px-4;
+    @apply flex flex-col gap-1 items-start;
+    @apply w-full overflow-hidden flex-grow-0;
   }
 
-  .see-more {
-    @apply ml-2;
+  button {
+    @apply flex items-center justify-center;
   }
 
   .header {

web-common/src/features/dashboards/pivot/PivotSidebar.svelte

@@ -35,22 +35,26 @@
 </script>
 
 <div class="sidebar">
-  <div class="container">
-    <PivotDrag title="Time" items={timeGrainOptions} />
-    <PivotDrag title="Measures" items={$measures} />
-    <PivotDrag title="Dimensions" items={$dimensions} />
-  </div>
+  <PivotDrag title="Time" items={timeGrainOptions} />
+
+  <span class="splitter" />
+
+  <PivotDrag title="Measures" items={$measures} />
+
+  <span class="splitter" />
+
+  <PivotDrag title="Dimensions" items={$dimensions} />
 </div>
 
 <style lang="postcss">
   .sidebar {
-    @apply h-full min-w-fit py-2 p-4;
-    @apply overflow-y-auto;
+    @apply flex flex-col items-start;
+    @apply h-full min-w-60 w-fit;
     @apply bg-white border-r border-slate-200;
+    @apply overflow-hidden;
   }
 
-  .container {
-    @apply flex flex-col gap-y-4;
-    @apply min-w-[120px];
+  .splitter {
+    @apply w-full h-[1.5px] bg-gray-200;
   }
 </style>