Hide beginner wish if empty

src/routes/wish/_counter.svelte

@@ -292,9 +292,14 @@
     rare = 0;
     saveData();
   }
+
+  $: hidden = id === 'beginners' && total === 0 && !manualInput;
 </script>
 
-<div class="bg-item rounded-xl p-4 inline-flex flex-col w-full" style="height: min-content;">
+<div
+  class="bg-item rounded-xl p-4 inline-flex flex-col w-full {id === 'beginners' ? 'mb-4' : ''} {hidden ? 'hidden' : ''}"
+  style="height: min-content;"
+>
   <div class="flex mb-2">
     <h2 class="font-display font-bold text-2xl text-white flex-1">{name}</h2>
     {#if manualInput}

src/routes/wish/_monthlyGraph.svelte

@@ -83,6 +83,6 @@
   $: data, createGraph();
 </script>
 
-<div class="flex flex-col bg-item rounded-xl p-4 w-full mt-4" style="height: 200px;">
+<div class="flex flex-col bg-item rounded-xl p-4 w-full" style="height: 200px;">
   <canvas width="500" height="200" bind:this={chart} />
 </div>

src/routes/wish/_summary.svelte

@@ -234,32 +234,51 @@
 </script>
 
 {#if !loading}
-  <div class="flex flex-col space-y-4">
+  <div class="col-span-1 md:col-span-2 w-full">
-    {#if avg[types[0].id]}
+    <div class="container">
-      <SummaryItem avg={avg[types[0].id]} type={types[0]} />
+      {#if avg[types[0].id]}
-    {/if}
+        <SummaryItem avg={avg[types[0].id]} type={types[0]} order={1} />
-    {#if avg[types[1].id]}
+      {/if}
-      <SummaryItem avg={avg[types[1].id]} type={types[1]} legendaryPity={80} />
+      {#if avg[types[2].id]}
-    {/if}
+        <SummaryItem avg={avg[types[2].id]} type={types[2]} order={3} />
-  </div>
+      {/if}
-  <div class="flex flex-col space-y-4">
+      {#if avg[types[1].id]}
-    {#if avg[types[2].id]}
+        <SummaryItem avg={avg[types[1].id]} type={types[1]} legendaryPity={80} order={2} />
-      <SummaryItem avg={avg[types[2].id]} type={types[2]} />
+      {/if}
-    {/if}
+      <div class="order-4">
-    {#if avg[types[3].id]}
+        {#if avg[types[3].id]}
-      <SummaryItem avg={avg[types[3].id]} type={types[3]} />
+          <SummaryItem avg={avg[types[3].id]} type={types[3]} />
-    {/if}
+          <div class="h-4 md:h-0" />
-    <div class="bg-item rounded-xl p-4 flex items-center w-full text-white" style="height: min-content;">
+        {/if}
-      {$t('wish.wishesWorth')} <img class="w-4 h-4 mx-2" src="/images/primogem.png" alt="primogem" />
+        <div class="flex flex-col">
-      {numberFormat.format(wishCount * 160)}
+          <div class="bg-item rounded-xl p-4 flex items-center w-full text-white mb-4" style="height: min-content;">
+            {$t('wish.wishesWorth')} <img class="w-4 h-4 mx-2" src="/images/primogem.png" alt="primogem" />
+            {numberFormat.format(wishCount * 160)}
+          </div>
+          <a
+            href="/wish/tally"
+            class="bg-item rounded-xl p-4 flex items-center w-full text-white hover:text-primary"
+            style="height: min-content;"
+          >
+            <Icon path={mdiEarth} className="mr-2" />
+            {$t('wish.globalWishTally')}
+          </a>
+        </div>
+      </div>
     </div>
-    <a
-      href="/wish/tally"
-      class="bg-item rounded-xl p-4 flex items-center w-full text-white hover:text-primary"
-      style="height: min-content;"
-    >
-      <Icon path={mdiEarth} className="mr-2" />
-      {$t('wish.globalWishTally')}
-    </a>
   </div>
 {/if}
+
+<style>
+  .container {
+    @apply flex flex-col gap-4;
+  }
+
+  @screen md {
+    .container {
+      @apply block gap-0;
+      column-count: 2;
+      column-gap: 1rem;
+    }
+  }
+</style>

src/routes/wish/_summaryItem.svelte

@@ -6,6 +6,7 @@
 
   export let avg;
   export let type;
+  export let order = 0;
   export let legendaryPity = 90;
   export let colorMultiplier = 120;
 
@@ -22,7 +23,10 @@
   $: textSize = avg.legendary.total > 20 ? 'text-sm' : 'text-base';
 </script>
 
-<div class="bg-item rounded-xl p-4 flex flex-col w-full" style="height: min-content;">
+<div
+  class="bg-item rounded-xl p-4 flex flex-col w-full half-width summary-item"
+  style="height: min-content; order: {order};"
+>
   <table>
     <tr>
       <td class="text-white text-md font-semibold pr-2 md:pr-4 flex-1 w-full">{$t(`wish.types.${type.id}`)}</td>
@@ -124,4 +128,14 @@
     background: rgba(0, 0, 0, 0.35);
     @apply rounded-xl;
   }
+
+  @screen md {
+    .summary-item {
+      margin: 0;
+      display: grid;
+      grid-template-rows: 1fr auto;
+      margin-bottom: 1rem;
+      break-inside: avoid;
+    }
+  }
 </style>