Fixing advanced search mobile screen width and global reset css changes.

src/lib/components/search/advancedSearch/index.svelte

@@ -90,6 +90,10 @@
   fieldset {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
+
+    @media (max-width: 800px) {
+      grid-template-columns: 1fr;
+    }
   }
 
   label {

src/routes/index.svelte

@@ -1,21 +1,11 @@
 <script lang="ts">
   // import { Checkbox, NumberInput } from 'carbon-components-svelte';
   import Game from '$lib/components/game/index.svelte';
-  import type { GameType } from '$lib/types';
-  import Transition from '$lib/components/transition/index.svelte';
-  import Listbox from '$lib/components/listbox.svelte';
-  import Loading from '$lib/components/loading.svelte';
-  import Portal from '$lib/Portal.svelte';
   import TextSearch from '$lib/components/search/textSearch/index.svelte';
   import AdvancedSearch from '$lib/components/search/advancedSearch/index.svelte';
   import RandomSearch from '$lib/components/search/random/index.svelte';
   import Random from '$lib/components/random/index.svelte';
   import { gameStore } from '$lib/stores/gameSearchStore';
-  import { boredState } from '$lib/stores/boredState';
-  import { Checkbox } from 'carbon-components-svelte';
-  // import { enhance } from "$lib/form";
-
-  // let games: GameType[] = [];
 </script>
 
 <svelte:head>
@@ -33,18 +23,6 @@
   </div>
 </div>
 
-<!-- {#if submitting}
-  <Portal>
-    <Transition transition={{ type: 'fade', duration: 0 }}>
-      <div class="loading">
-        <Loading />
-        <h3>Loading...</h3>
-      </div>
-    </Transition>
-    <div class="background" />
-  </Portal>
-{/if} -->
-
 <h1>Games</h1>
 <div class="games">
   {#each $gameStore as game}

src/styles/global.scss

@@ -140,6 +140,21 @@
     */
 }
 
+html {
+  width: 100%;
+  // background-color: var(--seaFoamBlue);
+  font-size: 62.5%;
+  box-sizing: border-box;
+}
+
+body {
+  // line-height: var(--lineHeight);
+  color: var(--primary);
+  padding: 0;
+  margin: 0;
+  font-size: var(--bodyTextSize);
+}
+
 html {
   font-size: 62.5%;
   box-sizing: border-box;
@@ -211,6 +226,7 @@ input {
   border-radius: var(--radius-base);
   background-color: var(--clr-input-bg);
   border: solid 2px var(--clr-theme-active);
+
   &:focus {
     outline: 0;
     border-color: var(--clr-primary);
@@ -255,4 +271,4 @@ ol {
   padding: var(--spacing-20) 0;
   background-color: var(--color-placeholder);
   border-radius: var(--radius-base);
-}
+}

src/styles/reset.scss

@@ -1,6 +1,6 @@
 *,
-*::before,
-*::after {
+*:before,
+*:after {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
@@ -55,4 +55,4 @@ button {
 ul,
 ol {
   list-style: none;
-}
+}