diff --git a/packages_rs/nextclade-web/src/components/Results/ResultsFilter.tsx b/packages_rs/nextclade-web/src/components/Results/ResultsFilter.tsx index 6fc13674a..dfb98491e 100644 --- a/packages_rs/nextclade-web/src/components/Results/ResultsFilter.tsx +++ b/packages_rs/nextclade-web/src/components/Results/ResultsFilter.tsx @@ -13,6 +13,8 @@ import { CardHeaderProps as ReactstrapCardHeaderProps, CardProps as ReactstrapCardProps, Collapse, + Form, + Input, } from 'reactstrap' import styled from 'styled-components' import { useRecoilValue } from 'recoil' @@ -51,26 +53,26 @@ export const CardBody = styled(ReactstrapCardBody)` ` export const FormGroup = styled(ReactstrapFormGroup)` - background-color: #fff; + display: flex; + flex-direction: column; + background-color: transparent; flex-grow: 1; flex-basis: 22%; ` -export const FormSection = styled(FormGroup)` - font-size: 0.85rem; +export const FormSection = styled(Form)` + flex: 1; + display: flex; + flex-direction: column; + background-color: #fff; padding: 5px 10px; margin: 5px; border-radius: 3px; ` -export const Label = styled(ReactstrapLabel)` - width: 100%; - font-size: 0.85rem; -` +export const Label = styled(ReactstrapLabel)`` export const InputText = styled(ReactstrapInput)` - width: 100%; - height: 30px; padding: 5px 7px; font-size: 0.75rem; @@ -83,9 +85,7 @@ export const InputText = styled(ReactstrapInput)` } ` -export const InputCheckbox = styled(ReactstrapInput)` - padding-bottom: 3px; -` +export const InputCheckbox = styled(ReactstrapInput)`` export function ResultsFilter() { const { t } = useTranslationSafe() @@ -170,7 +170,7 @@ export function ResultsFilter() { return ( - {t('Results filter')} + {/* {t('Results filter')} */} @@ -242,36 +242,30 @@ export function ResultsFilter() { - + + + + + + + + + + + +