fix: tooltips within ListCards now work

Agoric · Aug 7, 2020 · e389dd1 · e389dd1
1 parent 29555fa
commit e389dd1
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 8 deletions.
diff --git a/packages/dapp-svelte-wallet/ui/lib/ListCard.svelte b/packages/dapp-svelte-wallet/ui/lib/ListCard.svelte
@@ -35,7 +35,7 @@
     <List {items}>
       <li slot="item" class="px-1" let:item>
         <div class="fullwidth px-1">
-          <ListItem dense selectedClasses="bg-primary-trans" {item} {...item} on:click={() => toggle(item.id)}>
+          <ListItem dense classes="overflow-visible" selectedClasses="bg-primary-trans" {item} {...item} on:click={() => toggle(item.id)}>
             <div class="flex items-center">
               <Icon tip={expanded.includes(item.id)}>{expandIcon}</Icon>
               <slot name="item-header" {item}><span>{item.text}</span></slot>

diff --git a/packages/dapp-svelte-wallet/ui/src/Amount.svelte b/packages/dapp-svelte-wallet/ui/src/Amount.svelte
@@ -1,7 +1,7 @@
 <script>
   import Petname from "./Petname.svelte";
   import Debug from "../lib/Debug.svelte";
-  import Tooltip from "../lib/Tooltip.svelte";
+  import Tooltip from "smelte/src/components/Tooltip";
 
   export let amount;
 
@@ -11,17 +11,17 @@
 </script>
 
 <style>
-  section, div {
-    display: inline;
+  .dotted-underline {
+    border-bottom: 1px dotted black;
   }
 </style>
 
-<section>
+<div>
   {#if Array.isArray(value) && value.length !== 0}
     <!-- amount is non-fungible -->
     <Tooltip>
       <div slot="activator">
-        <b>
+        <b class="dotted-underline">
           {value.length}
           <Petname name={brand.petname} plural={value.length !== 1} />
         </b>
@@ -31,7 +31,7 @@
           instance: {petname}, inviteDesc: {inviteDesc}
         {/each}
       {:else}
-        {#each value as elem (elem)}{JSON.stringify(elem)}{/each}
+        {value.map(v => JSON.stringify(v)).join(', ')}
       {/if}
     </Tooltip>
   {:else}
@@ -41,4 +41,4 @@
     </b>
   {/if}
 
-</section>
+  </div>