diff --git a/webui/src/components/form/form.module.css b/webui/src/components/form/form.module.css index 8f340d35..31120695 100644 --- a/webui/src/components/form/form.module.css +++ b/webui/src/components/form/form.module.css @@ -73,6 +73,7 @@ .select { width: auto; min-width: 130px; + box-sizing: border-box; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; background: @@ -95,7 +96,6 @@ font: inherit; font-size: 13px; line-height: 1.5; - padding: 8px 32px 8px 12px; transition: border-color 0.18s ease, background 0.18s ease, @@ -107,6 +107,24 @@ cursor: pointer; } +.selectSizeSm { + min-height: 32px; + padding: 6px 30px 6px 10px; + background-position: + 0 0, + 0 0, + right 10px center; +} + +.selectSizeMd { + min-height: 36px; + padding: 8px 32px 8px 12px; + background-position: + 0 0, + 0 0, + right 12px center; +} + .select:hover { border-color: rgba(255, 255, 255, 0.16); background: diff --git a/webui/src/components/form/form.test.tsx b/webui/src/components/form/form.test.tsx index 7a060555..9c4923cb 100644 --- a/webui/src/components/form/form.test.tsx +++ b/webui/src/components/form/form.test.tsx @@ -138,6 +138,7 @@ describe('form primitives', () => { expect(screen.getByText('Short summary')).toBeInTheDocument(); expect(screen.getByRole('alert')).toHaveTextContent('Validation failed'); expect(screen.getByLabelText('Status')).toHaveValue('open'); + expect(screen.getByLabelText('Status')).toHaveAttribute('data-size', 'md'); fireEvent.change(screen.getByLabelText('Status'), { target: { value: 'resolved' } }); expect(screen.getByLabelText('Status')).toHaveValue('resolved'); @@ -176,4 +177,15 @@ describe('form primitives', () => { 'primary', ); }); + + it('supports compact select sizing', () => { + render( + , + ); + + expect(screen.getByLabelText('Compact')).toHaveAttribute('data-size', 'sm'); + }); }); diff --git a/webui/src/components/form/form.tsx b/webui/src/components/form/form.tsx index 11e46227..02958daa 100644 --- a/webui/src/components/form/form.tsx +++ b/webui/src/components/form/form.tsx @@ -77,13 +77,32 @@ export const TextArea = forwardRef(function return