diff --git a/packages/grafana-ui/src/components/Forms/Form.tsx b/packages/grafana-ui/src/components/Forms/Form.tsx index 234f771797e..387aefa2df7 100644 --- a/packages/grafana-ui/src/components/Forms/Form.tsx +++ b/packages/grafana-ui/src/components/Forms/Form.tsx @@ -11,7 +11,7 @@ interface FormProps extends Omit, 'onSubmit'> { onSubmit: OnSubmit; children: (api: FormAPI) => React.ReactNode; /** Sets max-width for container. Use it instead of setting individual widths on inputs.*/ - maxWidth?: number; + maxWidth?: number | 'none'; } export function Form({ @@ -38,7 +38,7 @@ export function Form({ return (
{ container: css` display: flex; flex-direction: row; - align-items: flex-start; + align-items: center; text-align: left; position: relative; flex: ${grow ? 1 : 0} 0 auto; diff --git a/packages/grafana-ui/src/components/Forms/InlineLabel.tsx b/packages/grafana-ui/src/components/Forms/InlineLabel.tsx index 348de296644..3ed8e6afb0f 100644 --- a/packages/grafana-ui/src/components/Forms/InlineLabel.tsx +++ b/packages/grafana-ui/src/components/Forms/InlineLabel.tsx @@ -20,7 +20,7 @@ export interface Props extends Omit = ({ children, className, htmlFor, tooltip, width, ...rest }) => { +export const InlineLabel: FunctionComponent = ({ children, className, tooltip, width, ...rest }) => { const theme = useTheme(); const styles = getInlineLabelStyles(theme, width); @@ -48,7 +48,7 @@ export const getInlineLabelStyles = (theme: GrafanaTheme, width?: number | 'auto font-size: ${theme.typography.size.sm}; background-color: ${theme.colors.bg2}; height: ${theme.height.md}px; - line-height: ${theme.height.md}; + line-height: ${theme.height.md}px; margin-right: ${theme.spacing.xs}; border-radius: ${theme.border.radius.md}; border: none; @@ -56,7 +56,6 @@ export const getInlineLabelStyles = (theme: GrafanaTheme, width?: number | 'auto color: ${theme.colors.textHeading}; `, icon: css` - flex-grow: 0; color: ${theme.colors.textWeak}; margin-left: 10px;