fix: popup height and scrolling

bloomwalletio · May 9, 2024 · f367fca · f367fca
1 parent a0f540e
commit f367fca
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 39 deletions.
diff --git a/packages/desktop/components/popup/Popup.svelte b/packages/desktop/components/popup/Popup.svelte
@@ -226,6 +226,7 @@
         bind:this={popupContent}
         class:relative
         class="popup {size}"
+        class:-mt-7={IS_WINDOWS}
     >
         <svelte:component this={POPUP_MAP[id]} {...props} />
         {#if !hideClose}

diff --git a/packages/desktop/components/popup/PopupTemplate.svelte b/packages/desktop/components/popup/PopupTemplate.svelte
@@ -57,13 +57,13 @@
 </script>
 
 <popup-template>
-    <div class="popup-banner">
+    <div class="popup-banner overflow-hidden rounded-t-[32px]">
         <slot name="banner" />
     </div>
-    <popop-content class="flex flex-col gap-6 p-8 {$$slots.banner ? 'pt-4' : ''}">
+    <popup-content class="max-h-[90vh] flex flex-col gap-6 p-8" class:pt-4={$$slots.banner}>
         {#if title || $$slots.menu || $$slots.description || description}
-            <popup-header class="flex flex-col space-y-2.5">
-                <title-row class="flex flex-row space-x-2 justify-between">
+            <popup-header class="flex-none flex flex-col gap-2.5">
+                <title-row class="flex flex-row gap-2 mr-7 justify-between">
                     {#if title}<Text type="h6" truncate>{title}</Text>{/if}
                     {#if $$slots.menu}
                         <slot name="menu" class="flex-0" />
@@ -76,13 +76,15 @@
                 {/if}
             </popup-header>
         {/if}
-        {#if $$slots.default}
-            <slot />
-        {:else if $$slots.content}
-            <slot name="content" />
-        {/if}
+        <div class="flex-1 h-0 flex flex-col">
+            {#if $$slots.default}
+                <slot />
+            {:else if $$slots.content}
+                <slot name="content" />
+            {/if}
+        </div>
         {#if backButton || continueButton}
-            <popup-footer class="flex flex-row space-x-3">
+            <popup-footer class="flex-none flex flex-row gap-3">
                 {#if backButton}
                     <Button
                         type="button"
@@ -91,7 +93,7 @@
                         disabled={busy || _backButton.disabled}
                         width="full"
                         form={_backButton.type === 'submit' ? _backButton.form : undefined}
-                        on:click={_backButton.type === 'button' && _backButton.onClick}
+                        on:click={_backButton.type === 'button' ? _backButton.onClick : undefined}
                         {..._backButton.restProps}
                     />
                 {/if}
@@ -105,20 +107,11 @@
                         disabled={_continueButton.disabled}
                         {busy}
                         width="full"
-                        on:click={_continueButton.type === 'button' && _continueButton.onClick}
+                        on:click={_continueButton.type === 'button' ? _continueButton.onClick : undefined}
                         {..._continueButton.restProps}
                     />
                 {/if}
             </popup-footer>
         {/if}
-    </popop-content>
+    </popup-content>
 </popup-template>
-
-<style lang="postcss">
-    .popup-banner {
-        @apply overflow-hidden rounded-t-[32px];
-    }
-    title-row {
-        margin-right: 28px;
-    }
-</style>
diff --git a/packages/desktop/views/dashboard/send-flow/views/SelectTokenView.svelte b/packages/desktop/views/dashboard/send-flow/views/SelectTokenView.svelte
@@ -168,13 +168,15 @@
         disabled: !selectedToken || tokenError,
     }}
 >
-    <div class="space-y-4">
-        {#if $networks.length > 1}
-            <SelectInput bind:selected={selectedOption} {options} />
-        {/if}
-        <SearchInput bind:value={searchValue} />
-        <div class="-mr-3">
-            <token-list class="w-full flex flex-col">
+    <div class="flex-1 h-0 flex flex-col gap-4">
+        <div class="flex-none flex flex-col gap-4">
+            {#if $networks.length > 1}
+                <SelectInput bind:selected={selectedOption} {options} />
+            {/if}
+            <SearchInput bind:value={searchValue} />
+        </div>
+        <div class="-mr-3 overflow-y-scroll">
+            <token-list class="flex flex-col p-0.5 pr-1.5 gap-2">
                 {#each tokenList as token}
                     {@const selected = selectedToken?.id === token.id && selectedToken?.networkId === token?.networkId}
                     {@const error = selected ? Boolean(tokenError) : false}
@@ -189,16 +191,9 @@
             </token-list>
         </div>
         {#if tokenError}
-            <Alert variant="danger" text={tokenError} />
+            <div class="flex-none">
+                <Alert variant="danger" text={tokenError} />
+            </div>
         {/if}
     </div>
 </PopupTemplate>
-
-<style lang="postcss">
-    token-list {
-        max-height: 400px;
-        overflow-y: scroll;
-        @apply p-0.5 pr-1.5;
-        @apply gap-2;
-    }
-</style>