diff --git a/src/components/TypeSelector.css b/src/components/TypeSelector.css index 80902e74..2a3d0743 100644 --- a/src/components/TypeSelector.css +++ b/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; } } diff --git a/src/components/TypeSelector.js b/src/components/TypeSelector.js index ee96b275..05f545e3 100644 --- a/src/components/TypeSelector.js +++ b/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 ( -