ui: fix padding on asset list (#4164)

* ui: move scrollbar into outer div * ui: fix horizontal scroll * fix: scroll bar behaviour * ui: fix bottom padding Co-authored-by: Nicole O'Brien <[email protected]>
iotaledger · Aug 5, 2022 · a290175 · a290175
1 parent 8b8dd8c
commit a290175
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 34 deletions.
diff --git a/packages/shared/components/molecules/AssetList.svelte b/packages/shared/components/molecules/AssetList.svelte
@@ -30,23 +30,33 @@
 </script>
 
 {#if assets}
-    <div class="h-full p-6 flex flex-auto flex-col flex-grow flex-shrink-0">
+    <div class="asset-list h-full p-6 flex flex-auto flex-col flex-grow flex-shrink-0">
         <div class="w-full flex flex-row justify-between mb-4">
             <Text classes="text-left" type={TextType.h5}>{localize('general.assets')}</Text>
             <Filter filterStore={assetFilter} />
         </div>
-        <div class="flex-auto h-1 -mr-5 pr-4">
-            <div class="-mr-4 h-full scroll-secondary">
-                {#if assets?.baseCoin || assets?.nativeTokens?.length > 0}
-                    <VirtualList items={assetList} let:item>
-                        <AssetTile classes="mb-2" onClick={() => handleAssetTileClick(item)} asset={item} />
-                    </VirtualList>
-                {:else}
-                    <div class="h-full flex flex-col items-center justify-center text-center">
-                        <Text secondary>{localize('general.noAssets')}</Text>
-                    </div>
-                {/if}
-            </div>
+        <div class="flex-auto h-full scroll-secondary pb-10">
+            {#if assets?.baseCoin || assets?.nativeTokens?.length > 0}
+                <VirtualList items={assetList} let:item>
+                    <AssetTile classes="mb-2" onClick={() => handleAssetTileClick(item)} asset={item} />
+                </VirtualList>
+            {:else}
+                <div class="h-full flex flex-col items-center justify-center text-center">
+                    <Text secondary>{localize('general.noAssets')}</Text>
+                </div>
+            {/if}
         </div>
     </div>
 {/if}
+
+<style lang="scss">
+    .asset-list :global(svelte-virtual-list-viewport) {
+        margin-right: -1.25rem !important;
+        flex: auto;
+        overflow-y: scroll;
+        padding-right: 1rem !important;
+    }
+    .asset-list :global(svelte-virtual-list-contents) {
+        margin-right: -1rem !important;
+    }
+</style>
diff --git a/packages/shared/components/organisms/AccountActivity.svelte b/packages/shared/components/organisms/AccountActivity.svelte
@@ -73,7 +73,7 @@
     }
 </script>
 
-<div class="h-full p-6 flex flex-col flex-auto flex-grow flex-shrink-0">
+<div class="activity-list h-full p-6 flex flex-col flex-auto flex-grow flex-shrink-0">
     <div class="mb-4">
         <div class="relative flex flex-1 flex-row justify-between">
             <div class="flex flex-row">
@@ -103,26 +103,36 @@
             </div>
         {/if}
     </div>
-    <div class="flex-auto h-1 space-y-4 -mr-5 pr-4">
-        <div class="-mr-4 h-full scroll-secondary">
-            {#if $selectedAccount.isSyncing && shouldShowFirstSync()}
-                <Text secondary classes="text-center">{localize('general.firstSync')}</Text>
-            {:else if activityListWithTitles.length}
-                <VirtualList items={activityListWithTitles} let:item>
-                    <div class="mb-2">
-                        {#if item.title}
-                            <Text fontWeight={FontWeightText.semibold} color="gray-600" classes="my-2">
-                                {item.title} • {item.amount}
-                            </Text>
-                        {/if}
-                        <ActivityTile activity={item.activity} />
-                    </div>
-                </VirtualList>
-            {:else}
-                <div class="h-full flex flex-col items-center justify-center text-center">
-                    <Text secondary>{localize('general.noRecentHistory')}</Text>
+    <div class="flex-auto h-full scroll-secondary pb-10">
+        {#if $selectedAccount.isSyncing && shouldShowFirstSync()}
+            <Text secondary classes="text-center">{localize('general.firstSync')}</Text>
+        {:else if activityListWithTitles.length}
+            <VirtualList items={activityListWithTitles} let:item>
+                <div class="mb-2">
+                    {#if item.title}
+                        <Text fontWeight={FontWeightText.semibold} color="gray-600" classes="my-2">
+                            {item.title} • {item.amount}
+                        </Text>
+                    {/if}
+                    <ActivityTile activity={item.activity} />
                 </div>
-            {/if}
-        </div>
+            </VirtualList>
+        {:else}
+            <div class="h-full flex flex-col items-center justify-center text-center">
+                <Text secondary>{localize('general.noRecentHistory')}</Text>
+            </div>
+        {/if}
     </div>
 </div>
+
+<style lang="scss">
+    .activity-list :global(svelte-virtual-list-viewport) {
+        margin-right: -1.25rem !important;
+        flex: auto;
+        overflow-y: scroll;
+        padding-right: 1rem !important;
+    }
+    .activity-list :global(svelte-virtual-list-contents) {
+        margin-right: -1rem !important;
+    }
+</style>