fix: replace > button with button selector in styled wrappers (#18568)

fix CSS selector > button not reaching Button component's inner element
### Reproduce
- when you click Data model and create a new field, you will see this
bug.
- When you import record and check the height of remove button in the
final validation step.

### Root Reason
the Button component internally renders a wrapper div around the
<button> element, so > button only reaches the intermediate div, not the
actual button.

### Fix
- padding-right not applied → chevron overlapped with text
- ValidationStep: height: 24px not applied → Remove button was 32px
instead of 24px

<img width="1288" height="376" alt="image"
src="https://github.com/user-attachments/assets/885cd8b0-1fe2-484a-8425-70f52b784ecb"
/>

<img width="1001" height="291" alt="image"
src="https://github.com/user-attachments/assets/0b489478-8fbc-4f7e-886a-38012eeb07ef"
/>

This commit is contained in:

BugIsGod

2026-03-18 15:34:33 +00:00

committed by

GitHub

parent 91d6a69bf8

commit 8ccaf635bc

2 changed files with 3 additions and 3 deletions

									
										packages/twenty-front/src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx
									
		+1
		-1
	
												View File
												
				@@ -57,7 +57,7 @@ const StyledToolbar = styled.div`

				`;

				const StyledButtonContainer = styled.div`

				  > button {

				  button {

				    height: 24px;

				  }

				`;