diff --git a/app/javascript/components/form/components/styles.css b/app/javascript/components/form/components/styles.css index 99264809f1..39365d65b3 100644 --- a/app/javascript/components/form/components/styles.css +++ b/app/javascript/components/form/components/styles.css @@ -128,21 +128,10 @@ :global [dir="rtl"] .MuiAutocomplete-endAdornment { right: initial !important; - margin-left: 9px !important; - left: 0; + left: 9px !important; } :global .MuiAutocomplete-endAdornment { - position: relative !important; - margin-right: 9px !important; + right: 9px !important; left: initial !important; - right: 0 !important; -} - -:global .MuiAutocomplete-inputRoot { - display: flex; -} - -:global .MuiAutocomplete-inputRoot input { - padding: 9.5px !important; } diff --git a/app/javascript/components/form/fields/select-input.jsx b/app/javascript/components/form/fields/select-input.jsx index dff6ba3fe6..da3fde2ddd 100644 --- a/app/javascript/components/form/fields/select-input.jsx +++ b/app/javascript/components/form/fields/select-input.jsx @@ -214,13 +214,8 @@ const SelectInput = ({ commonInputProps, metaInputProps, options: allOptions, fo return } {...rest} />; }; - const renderTags = (value, getTagProps) => ( -
- {value.map((option, index) => ( - - ))} -
- ); + const renderTags = (value, getTagProps) => + value.map((option, index) => ); const getOptionDisabled = option => { if (option?.disabled) { diff --git a/app/javascript/components/insights-filters/component.js b/app/javascript/components/insights-filters/component.js index 5551639923..fe2500ace9 100644 --- a/app/javascript/components/insights-filters/component.js +++ b/app/javascript/components/insights-filters/component.js @@ -139,7 +139,7 @@ const Component = ({ moduleID, id, subReport, toggleControls }) => {
{filterInputs(DATE_CONTROLS_GROUP)}
- {filterInputs()} +
{filterInputs()}
diff --git a/app/javascript/components/insights-filters/styles.css b/app/javascript/components/insights-filters/styles.css index 8f34c1e9fd..7370c16d12 100644 --- a/app/javascript/components/insights-filters/styles.css +++ b/app/javascript/components/insights-filters/styles.css @@ -12,6 +12,17 @@ } } +.filters { + display: flex; + gap: var(--sp-2); + flex-wrap: wrap; + + & > div { + width: calc(50% - var(--sp-1)); + margin: 0; + } +} + .actions { display: flex; width: 25em; @@ -26,9 +37,9 @@ .dateControlGroup { display: flex; flex-wrap: wrap; - flex: 2 !important; gap: var(--sp-1); justify-content: space-between; + flex: 1; & > div { margin: 0; diff --git a/app/javascript/components/searchable-select/component.jsx b/app/javascript/components/searchable-select/component.jsx index 467c2e3643..d9af431104 100644 --- a/app/javascript/components/searchable-select/component.jsx +++ b/app/javascript/components/searchable-select/component.jsx @@ -48,31 +48,28 @@ const SearchableSelect = ({ return defaultValues || defaultEmptyValue; })(); - const renderTags = (value, getTagProps) => ( -
- {value.map((option, index) => { - const { onDelete, ...rest } = { ...getTagProps({ index }) }; - const chipProps = { - ...(isDisabled || { onDelete }), - ...rest, - classes: { - ...(mode.isShow && { - disabled: css.disabledChip - }) - } - }; + const renderTags = (value, getTagProps) => + value.map((option, index) => { + const { onDelete, ...rest } = { ...getTagProps({ index }) }; + const chipProps = { + ...(isDisabled || { onDelete }), + ...rest, + classes: { + ...(mode.isShow && { + disabled: css.disabledChip + }) + } + }; - return ( - - ); - })} -
- ); + return ( + + ); + }); const getSelectedOptions = (option, selected) => optionEquality(option, selected, optionIdKey); const getOptionLabel = option => optionLabel(option, options, optionIdKey, optionLabelKey);