Fix auth dropdown z-index

4 years ago · b1ef2e3988
2 changed files with 8 additions and 3 deletions
--- a/packages/bbui/src/Tabs/Tabs.svelte
+++ b/packages/bbui/src/Tabs/Tabs.svelte
@ -10,6 +10,8 @@
  export let noHorizPadding = false
  export let quiet = false
  export let emphasized = false
+  // overlay content from the tab bar onto tabs e.g. for a dropdown
+  export let onTop = false

  let thisSelected = undefined

@ -78,6 +80,7 @@
    'spectrum-Tabs--quiet'} spectrum-Tabs--{vertical
    ? 'vertical'
    : 'horizontal'}"
+  class:onTop
 >
  <slot />
  {#if $tab.info}
@ -98,7 +101,9 @@
  .quiet {
    border-bottom: none !important;
  }
-
+  .onTop {
+    z-index: 1;
+  }
  .spectrum-Tabs {
    padding-left: var(--spacing-xl);
    padding-right: var(--spacing-xl);
--- a/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/rest/[query]/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/rest/[query]/index.svelte
@ -306,7 +306,7 @@
          </div>
          <Button cta disabled={!url} on:click={runQuery}>Send</Button>
        </div>
-        <Tabs selected="Bindings" quiet noPadding noHorizPadding>
+        <Tabs selected="Bindings" quiet noPadding noHorizPadding onTop>
          <Tab title="Bindings">
            <KeyValueBuilder
              bind:object={bindings}
@ -450,7 +450,7 @@
                <Layout noPadding gap="S">
                  <Body size="S">
                    Create dynamic variables based on response body or headers
-                    from other queries.
+                    from this query.
                  </Body>
                  <KeyValueBuilder
                    bind:object={dynamicVariables}