style(selector): fix search type selection on mobile

src/components/TypeSelector.css

@@ -5,6 +5,8 @@
     position: relative;
     margin-bottom: 1.5rem;
     max-width: 100%;
+}
+.typeSelector:not(.nowrap) {
     flex-wrap: wrap;
 }
 
@@ -52,8 +54,7 @@
 }
 
 @media screen and (max-width: 700px) {
-    .typeSelector {
-        width: 80%;
+    .typeSelector:not(.nowrap) {
         display: block;
     }
 }

src/components/TypeSelector.js

@@ -5,14 +5,14 @@ import './TypeSelector.css'
 // setType: (txt: string) => void
 // choices: { label: string, value: string }[]
 // selected: string
-export function TypeSelector({ setType, choices, selected }) {
+export function TypeSelector({ setType, choices, selected, noWrap = false }) {
     const selectedIndex = choices.findIndex(v=>v.value===selected);
     const transformStyles = {
         opacity: selectedIndex!==-1?1:0,
         transform: `translateX(${selectedIndex!==-1?selectedIndex*7:0}rem)`
     }
     return (
-        <div className="typeSelector">
+        <div className={`typeSelector ${noWrap ? 'nowrap' : ''}`}>
             {choices.map(v=>(
                 <div key={v.value} className={`choice ${selected===v.value?'selected':''}`} onClick={() => setType(v.value)}>
                     {v.label}

src/views/Search.js

@@ -115,6 +115,7 @@ export function SearchView() {
                         { label: "Movie", value: "movie" },
                         { label: "TV Show", value: "show" }
                     ]}
+                    noWrap={true}
                     selected={type}
                 />
                 <InputBox placeholder={ type === "movie" ? "Hamilton" : "Atypical" } onSubmit={(str) => searchMovie(str, type)} />