custom popover height and sidebar styling

packages/bbui/src/Form/Core/Multiselect.svelte

@@ -15,6 +15,7 @@
   export let sort = false
   export let autoWidth = false
   export let fetchTerm = null
+  export let customPopoverHeight
 
   const dispatch = createEventDispatcher()
 
@@ -91,4 +92,5 @@
   onSelectOption={toggleOption}
   {sort}
   {autoWidth}
+  {customPopoverHeight}
 />

packages/bbui/src/Form/Core/Picker.svelte

@@ -32,6 +32,7 @@
   export let autocomplete = false
   export let sort = false
   export let fetchTerm = null
+  export let customPopoverHeight
   const dispatch = createEventDispatcher()
 
   let searchTerm = null
@@ -136,6 +137,7 @@
   on:close={() => (open = false)}
   useAnchorWidth={!autoWidth}
   maxWidth={autoWidth ? 400 : null}
+  customHeight={customPopoverHeight}
 >
   <div
     class="popover-content"
@@ -266,6 +268,7 @@
   .popover-content :global(.spectrum-Search) {
     margin-top: -1px;
     margin-left: -1px;
+    width: calc(100% + 2px);
   }
   .popover-content :global(.spectrum-Search input) {
     height: auto;

packages/bbui/src/Form/Multiselect.svelte

@@ -17,6 +17,7 @@
   export let autoWidth = false
   export let autocomplete = false
   export let fetchTerm = null
+  export let customPopoverHeight
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -38,6 +39,7 @@
     {getOptionValue}
     {autoWidth}
     {autocomplete}
+    {customPopoverHeight}
     bind:fetchTerm
     on:change={onChange}
     on:click

packages/bbui/src/Form/Select.svelte

@@ -21,6 +21,7 @@
   export let sort = false
   export let tooltip = ""
   export let autocomplete = false
+  export let customPopoverHeight
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -53,6 +54,7 @@
     {getOptionColour}
     {isOptionEnabled}
     {autocomplete}
+    {customPopoverHeight}
     on:change={onChange}
     on:click
   />

packages/bbui/src/Popover/Popover.svelte

@@ -18,6 +18,7 @@
   export let useAnchorWidth = false
   export let dismissible = true
   export let offset = 5
+  export let customHeight
 
   $: target = portalTarget || getContext(Context.PopoverRoot) || ".spectrum"
 
@@ -74,6 +75,7 @@
       on:keydown={handleEscape}
       class="spectrum-Popover is-open"
       role="presentation"
+      style="height: {customHeight}"
       transition:fly|local={{ y: -20, duration: 200 }}
     >
       <slot />

packages/builder/src/pages/builder/portal/account/auditLogs/_components/AppColumnRenderer.svelte

@@ -2,4 +2,4 @@
   export let value
 </script>
 
-<div>{value?.name || "N/A"}</div>
+<div>{value?.name || ""}</div>

packages/builder/src/pages/builder/portal/account/auditLogs/_components/UserRenderer.svelte

@@ -18,11 +18,11 @@
   on:focus={() => (showTooltip = true)}
   on:mouseleave={() => (showTooltip = false)}
 >
-  <Avatar size="M" initials={getInitials(row.user)} />
+  <Avatar size="M" initials={getInitials(row?.user)} />
 </div>
 {#if showTooltip}
   <div class="tooltip">
-    <Tooltip textWrapping text={row.user.email} direction="bottom" />
+    <Tooltip textWrapping text={row?.user.email} direction="bottom" />
   </div>
 {/if}
 

packages/builder/src/pages/builder/portal/account/auditLogs/index.svelte

@@ -10,6 +10,7 @@
     CoreTextArea,
     DatePicker,
     Pagination,
+    Helpers,
     Divider,
   } from "@budibase/bbui"
   import { licensing, users, apps, auditLogs } from "stores/portal"
@@ -185,6 +186,11 @@
     viewDetails,
   })
 
+  const copyToClipboard = async value => {
+    await Helpers.copyToClipboard(value)
+    notifications.success("Copied")
+  }
+
   onMount(async () => {
     await auditLogs.getEventDefinitions()
   })
@@ -246,6 +252,7 @@
       </div>
       <div class="select">
         <Multiselect
+          customPopoverHeight="500px"
           autocomplete
           getOptionValue={event => event[0]}
           getOptionLabel={event => event[1]}
@@ -318,6 +325,12 @@
     <Divider />
 
     <div class="side-panel-body">
+      <div
+        on:click={() => copyToClipboard(JSON.stringify(selectedLog.metadata))}
+        class="copy-icon"
+      >
+        <Icon name="Copy" size="S" />
+      </div>
       <CoreTextArea
         disabled
         minHeight={"300px"}
@@ -329,6 +342,34 @@
 {/if}
 
 <style>
+  .copy-icon {
+    right: 16px;
+    top: 80px;
+    z-index: 10;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    box-sizing: border-box;
+
+    border: 1px solid var(--spectrum-alias-border-color);
+    border-radius: var(--spectrum-alias-border-radius-regular);
+    width: 31px;
+    color: var(--spectrum-alias-text-color);
+    background-color: var(--spectrum-global-color-gray-75);
+    transition: background-color
+        var(--spectrum-global-animation-duration-100, 130ms),
+      box-shadow var(--spectrum-global-animation-duration-100, 130ms),
+      border-color var(--spectrum-global-animation-duration-100, 130ms);
+    height: calc(var(--spectrum-alias-item-height-m) - 2px);
+    position: absolute;
+  }
+  .copy-icon:hover {
+    cursor: pointer;
+    color: var(--spectrum-alias-text-color-hover);
+    background-color: var(--spectrum-global-color-gray-50);
+    border-color: var(--spectrum-alias-border-color-hover);
+  }
   .side-panel-header {
     display: flex;
     padding: 20px 10px 10px 10px;
@@ -346,7 +387,7 @@
 
   .side-panel-body {
     padding: 10px;
-    height: 95%;
+    height: calc(100% - 67px);
   }
   #side-panel {
     position: absolute;
@@ -357,11 +398,11 @@
     border-left: var(--border-light);
     width: 320px;
     max-width: calc(100vw - 48px - 48px);
-    overflow: auto;
-    overflow-x: hidden;
     transform: translateX(100%);
     transition: transform 130ms ease-in-out;
-    height: calc(100% - 25px);
+    height: calc(100% - 24px);
+    overflow-y: hidden;
+    overflow-x: hidden;
     z-index: 2;
   }
   #side-panel.visible {
@@ -373,15 +414,14 @@
   }
 
   #side-panel :global(textarea) {
-    min-height: 202px !important;
+    min-height: 100% !important;
     background-color: var(
       --spectrum-textfield-m-background-color,
       var(--spectrum-global-color-gray-50)
     );
-    color: var(
+    padding-top: var(--spacing-l);
-      --spectrum-textfield-m-text-color,
+    padding-left: var(--spacing-l);
-      var(--spectrum-alias-text-color)
+    font-size: 13px;
-    );
   }
 
   .search :global(.spectrum-InputGroup) {