@@ -183,7 +183,7 @@ inputContainer props = theCss <>? props.css
183183 , cursor: str "text"
184184 , boxSizing: borderBox
185185 , display: flex
186− , width: str "calc(var(--s4) * 2)"
186+ , width: str "100%"
187187 , """&[data-invalid="false"]""":
188188 nest
189189 { borderColor: str colour.success
@@ -220,6 +220,7 @@ inputContainer props = theCss <>? props.css
220220containerContainer ∷ ∀ r. { | Props OptionalProp r } -> Style
221221containerContainer props = css { "--border-width": str "1px"
222222 , "--input-border-radius": var "--s-1"
223+ , width: str "calc(var(--s4) * 2)"
223224 , background: str (props.background ?|| colour.inputBackground)
224225 , boxSizing: contentBox
225226 , borderRadius: var "--input-border-radius"