From 7d27f74da537ae116476e06cf2da89c40b7ca2a2 Mon Sep 17 00:00:00 2001
From: Made Baruna <made.setia@gmail.com>
Date: Sat, 24 Apr 2021 04:05:54 +0800
Subject: [PATCH] Fix layout on safari

---
 src/components/DonateModal.svelte         |  4 ++--
 src/components/TodoAddModal.svelte        |  2 +-
 src/components/TodoDeleteModal.svelte     |  2 +-
 src/routes/achievement/index.svelte       | 10 +++++-----
 src/routes/characters/[id].svelte         |  6 +++---
 src/routes/index.svelte                   |  2 +-
 src/routes/settings/_deleteAccount.svelte |  2 +-
 src/routes/settings/_resetAccount.svelte  |  2 +-
 src/routes/wish/_counter.svelte           |  4 ++--
 src/routes/wish/_firstTime.svelte         |  2 +-
 src/routes/wish/_summary.svelte           | 12 ++++++------
 src/routes/wish/_summaryItem.svelte       |  3 +--
 src/routes/wish/tally/_item.svelte        | 16 ++++++++--------
 13 files changed, 33 insertions(+), 34 deletions(-)

diff --git a/src/components/DonateModal.svelte b/src/components/DonateModal.svelte
index 3998d3c3..86082b96 100644
--- a/src/components/DonateModal.svelte
+++ b/src/components/DonateModal.svelte
@@ -22,8 +22,8 @@
       >Github</a
     >
   </p>
-  <div class="flex flex-col mt-2 gap-1">
-    <div class="flex flex-col md:flex-row gap-1">
+  <div class="flex flex-col mt-2 space-y-1">
+    <div class="flex flex-col md:flex-row md:space-x-1 md:space-y-0 space-y-1">
       <a class="flex-1" href="https://ko-fi.com/baruna" target="_blank">
         <Button className="w-full flex-1 flex flex-col items-center">
           <div class="flex h-8 mb-1 items-center">
diff --git a/src/components/TodoAddModal.svelte b/src/components/TodoAddModal.svelte
index 93b0678b..e1005825 100644
--- a/src/components/TodoAddModal.svelte
+++ b/src/components/TodoAddModal.svelte
@@ -76,7 +76,7 @@
     </div>
     <span>{amount}</span>
   </div>
-  <div class="flex justify-end gap-2">
+  <div class="flex justify-end space-x-2">
     <Button on:click={cancel}>{$t('items.add.cancel')}</Button>
     <Button on:click={() => addTodo(selectedItem, amount)} color="green">{$t('items.add.add')}</Button>
   </div>
diff --git a/src/components/TodoDeleteModal.svelte b/src/components/TodoDeleteModal.svelte
index 7af45583..2d828fb3 100644
--- a/src/components/TodoDeleteModal.svelte
+++ b/src/components/TodoDeleteModal.svelte
@@ -31,7 +31,7 @@
       </div>
     {/if}
   </div>
-  <div class="flex justify-end gap-2">
+  <div class="flex justify-end space-x-2">
     <Button on:click={cancel}>{$t('todo.delete.cancel')}</Button>
     <Button on:click={deleteTodo} color="red">{$t('todo.delete.delete')}</Button>
   </div>
diff --git a/src/routes/achievement/index.svelte b/src/routes/achievement/index.svelte
index 8d0fb5a9..f67a899c 100644
--- a/src/routes/achievement/index.svelte
+++ b/src/routes/achievement/index.svelte
@@ -155,9 +155,9 @@
 </svelte:head>
 
 <div class="lg:ml-64 pt-20 px-4 lg:px-8 lg:pt-8 max-w-screen-xl">
-  <div class="flex flex-col md:flex-row items-center gap-2 mb-2 md:mb-0">
+  <div class="flex flex-col md:flex-row items-center space-y-2 md:space-y-0 md:space-x-2 mb-2 md:mb-0">
     <h1 class="font-display font-black text-3xl md:text-4xl text-white">{$t('achievement.title')}</h1>
-    <div class="flex gap-2">
+    <div class="flex space-x-2">
       <p class="text-gray-400 text-xl rounded-xl bg-black bg-opacity-50 px-2 py-1">
         {finishedAchievement}
         {$t('achievement.of')}
@@ -169,8 +169,8 @@
       </div>
     </div>
   </div>
-  <div class="flex flex-col lg:flex-row gap-3">
-    <div class="flex flex-col gap-2 lg:h-screen lg:overflow-auto lg:sticky lg:pr-1 pb-4 category">
+  <div class="flex flex-col lg:flex-row space-y-3 lg:space-y-0 lg:space-x-3">
+    <div class="flex flex-col space-y-2 lg:h-screen lg:overflow-auto lg:sticky lg:pr-1 pb-4 category">
       {#each categories as category, index}
         <div
           class="rounded-xl p-2 cursor-pointer flex flex-col {category.id === active ? 'bg-primary' : 'bg-item'}"
@@ -191,7 +191,7 @@
         </div>
       {/each}
     </div>
-    <div class="flex flex-col gap-2 flex-1 pt-20 lg:pt-2" bind:this={achievementContainer}>
+    <div class="flex flex-col space-y-2 flex-1 pt-20 lg:pt-2" bind:this={achievementContainer}>
       {#each list as el, index}
         {#if Array.isArray(el)}
           <div class="bg-item rounded-xl px-2 py-1 text-white flex flex-col">
diff --git a/src/routes/characters/[id].svelte b/src/routes/characters/[id].svelte
index 8b470a51..881c8bd0 100644
--- a/src/routes/characters/[id].svelte
+++ b/src/routes/characters/[id].svelte
@@ -164,14 +164,14 @@
           src="/images/elements/{character.element.id}.png"
           alt={character.element.name}
         />
-        <div class="flex gap-1 {editConstallation ? 'flex-col' : ''} md:flex-row items-center">
+        <div class="flex space-y-1 lg:space-y-0 lg:space-x-1 {editConstallation ? 'flex-col' : ''} md:flex-row items-center">
           {#if constellationCountTotal > -1}
             <p class="text-3xl text-gray-200 bg-black bg-opacity-50 rounded-xl px-2 font-semibold">
               C{constellationCountTotal}
             </p>
           {/if}
           {#if editConstallation}
-            <div class="flex flex-wrap gap-1">
+            <div class="flex flex-wrap space-x-1">
               <Button size="sm" on:click={() => editConstellationCount(1)}>
                 <Icon path={mdiPlus} />
               </Button>
@@ -210,7 +210,7 @@
         <p class="text-base text-white font-semibold mt-1">{character.weapon.name}</p>
       </div>
       <p class="text-gray-200 px-4 md:px-8">{data.description}</p>
-      <div class="flex flex-col md:flex-row mt-4 gap-4 px-4 md:px-8">
+      <div class="flex flex-col md:flex-row mt-4 space-y-4 md:space-y-0 md:space-x-4 px-4 md:px-8">
         <div class="text-gray-200 rounded-xl border border-gray-200 border-opacity-25 p-4">
           <p>Talent Book</p>
           <div class="flex items-center mt-2">
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 68a0a94e..332f0743 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -55,7 +55,7 @@
     <Event on:done={onDone} />
     <Item on:done={onDone} />
     <Discord on:done={onDone} />
-    <div class="flex flex-col gap-4">
+    <div class="flex flex-col space-y-4">
       <Calculator on:done={onDone} />
       <Achievement on:done={onDone} />
     </div>
diff --git a/src/routes/settings/_deleteAccount.svelte b/src/routes/settings/_deleteAccount.svelte
index 0d66a181..bb3b272c 100644
--- a/src/routes/settings/_deleteAccount.svelte
+++ b/src/routes/settings/_deleteAccount.svelte
@@ -12,7 +12,7 @@
   <p class="text-white font-bold mb-4 text-lg">{$t('settings.modal.delete')} {account.label}?</p>
   <p class="text-white mb-4">{$t('settings.modal.notice')}</p>
   <p class="text-white mb-4 italic">{$t('settings.modal.backup')}</p>
-  <div class="flex justify-end gap-2">
+  <div class="flex justify-end space-x-2">
     <Button on:click={cancel}>{$t('settings.modal.cancel')}</Button>
     <Button on:click={deleteAccount} color="red">{$t('settings.modal.delete')}</Button>
   </div>
diff --git a/src/routes/settings/_resetAccount.svelte b/src/routes/settings/_resetAccount.svelte
index 2eb8d2e5..a7300c20 100644
--- a/src/routes/settings/_resetAccount.svelte
+++ b/src/routes/settings/_resetAccount.svelte
@@ -12,7 +12,7 @@
   <p class="text-white font-bold mb-4 text-lg">{$t('settings.modal.reset')} {account.label}?</p>
   <p class="text-white mb-4">{$t('settings.modal.notice')}</p>
   <p class="text-white mb-4 italic">{$t('settings.modal.backup')}</p>
-  <div class="flex justify-end gap-2">
+  <div class="flex justify-end space-x-2">
     <Button on:click={cancel}>{$t('settings.modal.cancel')}</Button>
     <Button on:click={resetAccount} color="red">{$t('settings.modal.reset')}</Button>
   </div>
diff --git a/src/routes/wish/_counter.svelte b/src/routes/wish/_counter.svelte
index 529dcb8b..fa0c6f36 100644
--- a/src/routes/wish/_counter.svelte
+++ b/src/routes/wish/_counter.svelte
@@ -326,7 +326,7 @@
     {#if isEdit}
       <Button on:click={saveEdit} className="mt-4">Save</Button>
     {:else if manualInput}
-      <div class="flex gap-2 mt-2">
+      <div class="grid grid-cols-2 gap-2 mt-2">
         <Button on:click={getLegendary} className="flex-1">
           Get 5
           <Icon path={mdiStar} size={0.75} className="mb-1" />
@@ -336,7 +336,7 @@
           <Icon path={mdiStar} size={0.75} className="mb-1" />
         </Button>
       </div>
-      <div class="flex gap-2 mt-2">
+      <div class="grid grid-cols-3 gap-2 mt-2">
         <Button on:click={() => add(1)} className="flex-1">+1</Button>
         <Button on:click={() => add(10)} className="flex-1">+10</Button>
         <Button on:click={() => add(-1)} className="flex-1">-1</Button>
diff --git a/src/routes/wish/_firstTime.svelte b/src/routes/wish/_firstTime.svelte
index 8799b6a9..9a05a9a5 100644
--- a/src/routes/wish/_firstTime.svelte
+++ b/src/routes/wish/_firstTime.svelte
@@ -18,7 +18,7 @@
   }
 </script>
 
-<div transition:fade={{ duration: 100 }} class="bg-item p-4 rounded-xl mb-4 text-white flex items-start">
+<div transition:fade={{ duration: 100 }} class="bg-item p-4 rounded-xl mb-4 text-white flex items-start max-w-screen-xl">
   <div class="flex-1">
     <p>
       {$t('wish.welcome')}
diff --git a/src/routes/wish/_summary.svelte b/src/routes/wish/_summary.svelte
index 696110d7..7cf4a812 100644
--- a/src/routes/wish/_summary.svelte
+++ b/src/routes/wish/_summary.svelte
@@ -177,28 +177,28 @@
 </script>
 
 {#if !loading}
-  <div class="flex flex-col">
+  <div class="flex flex-col space-y-4">
     {#if avg[types[0].id]}
-      <SummaryItem avg={avg[types[0].id]} type={types[0]} withBottomSpace />
+      <SummaryItem avg={avg[types[0].id]} type={types[0]} />
     {/if}
     {#if avg[types[1].id]}
       <SummaryItem avg={avg[types[1].id]} type={types[1]} />
     {/if}
   </div>
-  <div class="flex flex-col">
+  <div class="flex flex-col space-y-4">
     {#if avg[types[2].id]}
-      <SummaryItem avg={avg[types[2].id]} type={types[2]} withBottomSpace />
+      <SummaryItem avg={avg[types[2].id]} type={types[2]} />
     {/if}
     {#if avg[types[3].id]}
       <SummaryItem avg={avg[types[3].id]} type={types[3]} />
     {/if}
-    <div class="bg-item rounded-xl p-4 flex items-center w-full text-white mt-4" style="height: min-content;">
+    <div class="bg-item rounded-xl p-4 flex items-center w-full text-white" style="height: min-content;">
       {$t('wish.wishesWorth')} <img class="w-4 h-4 mx-2" src="/images/primogem.png" alt="primogem" />
       {numberFormat.format(totalWish * 160)}
     </div>
     <a
       href="/wish/tally"
-      class="bg-item rounded-xl p-4 flex items-center w-full text-white mt-4 hover:text-primary"
+      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" />
diff --git a/src/routes/wish/_summaryItem.svelte b/src/routes/wish/_summaryItem.svelte
index 6982c77d..c3e0a629 100644
--- a/src/routes/wish/_summaryItem.svelte
+++ b/src/routes/wish/_summaryItem.svelte
@@ -3,7 +3,6 @@
 
   import Icon from '../../components/Icon.svelte';
 
-  export let withBottomSpace;
   export let avg;
   export let type;
 
@@ -19,7 +18,7 @@
 </script>
 
 <div
-  class={`bg-item rounded-xl p-4 flex flex-col w-full ${withBottomSpace ? 'mb-4' : ''}`}
+  class="bg-item rounded-xl p-4 flex flex-col w-full"
   style="height: min-content;"
 >
   <table>
diff --git a/src/routes/wish/tally/_item.svelte b/src/routes/wish/tally/_item.svelte
index 7d8f7269..c5704de8 100644
--- a/src/routes/wish/tally/_item.svelte
+++ b/src/routes/wish/tally/_item.svelte
@@ -245,7 +245,7 @@
   });
 </script>
 
-<div class="flex flex-col bg-item rounded-xl p-4 mb-4 gap-4">
+<div class="flex flex-col bg-item rounded-xl px-4 pt-4 pb-2 mb-4 space-y-4">
   <div class="flex flex-col xl:flex-row">
     <img src="/images/banners/{banner.name} {banner.image}.png" alt={banner.name} class="rounded-xl xl:h-64 xl:mr-4" />
     <div class="h-4 xl:h-0" />
@@ -460,7 +460,7 @@
       </table>
     </div>
     <div class="border border-background rounded-xl hidden xl:block">
-      <table class="text-white w-full table-fixed">
+      <table class="text-white w-full table-fixed text-sm">
         <tr>
           <td
             class="font-display text-gray-200 font-semibold px-2 py-1 whitespace-no-wrap text-right border-b border-background"
@@ -508,9 +508,9 @@
         </tr>
       </table>
     </div>
-    <div class="flex flex-wrap gap-4">
-      <div class="border border-background rounded-xl hidden xl:block overflow-hidden" style="width: fit-content;">
-        <table class="text-white">
+    <div class="flex flex-wrap">
+      <div class="border border-background rounded-xl hidden xl:block overflow-hidden mr-4 mb-2" style="width: fit-content;">
+        <table class="text-white text-sm">
           <tr>
             <td
               class="font-display text-gray-200 font-semibold px-2 py-1 whitespace-no-wrap text-right border-b border-background"
@@ -550,8 +550,8 @@
           </tr>
         </table>
       </div>
-      <div class="flex flex-wrap gap-2 text-white">
-        <div class="gap-2 flex flex-col flex-wrap">
+      <div class="flex flex-wrap text-white -mt-2 mb-2">
+        <div class="space-y-2 flex flex-col flex-wrap mr-2 mt-2">
           <div class="bg-background rounded-xl px-4 py-2 flex-1 flex items-center whitespace-no-wrap">
             {$t('wish.tally.wishTotal')} <span class="font-semibold ml-2">{numberFormat.format(data.total.all)}</span>
           </div>
@@ -560,7 +560,7 @@
             <span class="font-semibold">{numberFormat.format(data.total.all * 160)}</span>
           </div>
         </div>
-        <div class="gap-2 flex flex-col flex-wrap">
+        <div class="space-y-2 flex flex-col flex-wrap mt-2">
           <div class="bg-background rounded-xl px-4 py-2 flex-1 flex items-center whitespace-no-wrap">
             {$t('wish.tally.median')}
             <span class="font-semibold ml-2">{numberFormat.format(data.median.legendary)}</span>