diff --git a/packages/dashboard-v2/src/components/Select/Select.js b/packages/dashboard-v2/src/components/Select/Select.js index 97d3d73b..0a59a581 100644 --- a/packages/dashboard-v2/src/components/Select/Select.js +++ b/packages/dashboard-v2/src/components/Select/Select.js @@ -21,9 +21,11 @@ const dropDown = keyframes` const Container = styled.div.attrs({ className: "relative inline-flex" })``; -const Trigger = styled.button.attrs(({ placeholder }) => ({ - className: `flex items-center cursor-pointer ${placeholder ? "text-palette-300" : ""}`, -}))``; +const Trigger = styled.button.attrs(({ $placeholder }) => ({ + className: `flex items-center cursor-pointer font-bold ${$placeholder ? "text-palette-300" : ""}`, +}))` + text-transform: inherit; +`; const TriggerIcon = styled(ChevronDownIcon).attrs({ className: "transition-transform text-primary", @@ -32,13 +34,14 @@ const TriggerIcon = styled(ChevronDownIcon).attrs({ `; const Flyout = styled.ul.attrs(({ open }) => ({ - className: `absolute top-[20px] right-0 - p-0 h-0 border rounded bg-white + className: `absolute right-0 z-10 + p-0 border rounded bg-white overflow-hidden pointer-events-none shadow-md shadow-palette-200/50 ${open ? "pointer-events-auto h-auto overflow-visible border-primary" : ""} ${open ? "visible" : "invisible"}`, }))` + top: calc(100% + 2px); animation: ${({ open }) => open ? css` @@ -47,7 +50,7 @@ const Flyout = styled.ul.attrs(({ open }) => ({ : "none"}; `; -export const Select = ({ defaultValue, children, onChange, placeholder }) => { +export const Select = ({ defaultValue, children, onChange, placeholder, ...props }) => { const selectRef = useRef(); const options = useMemo(() => Children.toArray(children).filter(({ type }) => type === SelectOption), [children]); const [state, dispatch] = useSelectReducer({ defaultValue, placeholder, options }); @@ -65,8 +68,8 @@ export const Select = ({ defaultValue, children, onChange, placeholder }) => { const activeLabel = activeOption?.props?.label ?? null; return ( - - + + {activeLabel ?? placeholder} diff --git a/packages/dashboard-v2/src/components/Table/Table.js b/packages/dashboard-v2/src/components/Table/Table.js index 8d55e119..e741da20 100644 --- a/packages/dashboard-v2/src/components/Table/Table.js +++ b/packages/dashboard-v2/src/components/Table/Table.js @@ -1,7 +1,7 @@ import styled from "styled-components"; const Container = styled.div.attrs({ - className: "p-1 max-w-full overflow-x-auto", + className: "p-1 max-w-full", })``; const StyledTable = styled.table.attrs({