Fix character grid style

src/routes/characters/_characterGridItem.svelte

@@ -71,4 +71,12 @@
     padding-bottom: 3px;
     word-spacing: 200px;
   }
+
+  .cell {
+    width: calc(33.33333% - 1rem);
+
+    @screen md {
+      @apply w-24;
+    }
+  }
 </style>

src/routes/characters/index.svelte

@@ -364,7 +364,7 @@
                 <img src="/images/elements/geo.png" alt="geo" class="w-8 h-8" style="min-width: 2rem;" />
               </button>
             </div>
-            <div class="flex items-center justify-center md:justify-start">
+            <div class="flex items-center justify-center md:justify-start flex-wrap">
               <button
                 on:click={() => toggleWeapon('sword')}
                 class="rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2 focus:outline-none {weaponFilter.sword
@@ -405,6 +405,7 @@
               >
                 <img src="/images/weapons/bow.png" alt="bow" class="w-8 h-8" style="min-width: 2rem;" />
               </button>
+              <div class="flex">
                 <button
                   on:click={() => toggleRarity(5)}
                   style="line-height: 0.9;"
@@ -426,6 +427,7 @@
               </div>
             </div>
           </div>
+        </div>
         <div class="px-4 md:pl-6 md:pr-4 flex flex-wrap max-w-screen-xl mt-2">
           {#each chars as [id, char] (id)}
             <CharacterGridItem {id} {char} {showConstellation} constellation={constellation[id]} name={$t(char.name)} />
@@ -520,14 +522,6 @@
 </div>
 
 <style>
-  .cell {
-    width: calc(33.33333% - 1rem);
-
-    @screen md {
-      @apply w-24;
-    }
-  }
-
   tr.rare:hover {
     background: linear-gradient(
       90deg,