richardfogaca opened a new pull request, #35917:
URL: https://github.com/apache/superset/pull/35917
### SUMMARY
This PR fixes the vertical alignment issue of refresh buttons next to the
Schema and Table selector fields in SQL Lab and the Add Dataset interface.
**Problem:**
The refresh icons were vertically misaligned with their corresponding select
input fields due to two issues:
1. A hardcoded `margin-top: 20px` was applied to the refresh button container
2. More fundamentally, the refresh buttons were aligned to the entire
Select/AsyncSelect component (which includes the label + input field), causing
them to align vertically centered against both elements rather than just the
input field
**Root Cause:**
When using the `header` prop on Select/AsyncSelect components, the label
becomes part of the component's internal structure. This caused the flex
container holding the refresh button to align against the total height of the
label + input, positioning the button between the label and input rather than
horizontally aligned with just the input field.
**Solution:**
1. Removed the `margin-top: 20px` from the `.refresh` CSS class in both
`DatabaseSelector` and `TableSelector` components
2. Extracted labels from the Select/AsyncSelect components by:
- Removing the `header` prop from Select/AsyncSelect components
- Creating a separate `StyledFormLabel` component positioned outside the
select component
3. This allows refresh buttons to align horizontally with the input field
only, achieving proper vertical alignment
### BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
**BEFORE:**
<img width="418" height="422" alt="sqllab refresh"
src="https://github.com/user-attachments/assets/60663790-7ab9-4a0a-94eb-5ff89290a8f3";
/>
**AFTER:**
<img width="388" height="226" alt="Screenshot 2025-10-30 at 17 54 37"
src="https://github.com/user-attachments/assets/6702c694-1875-4de2-a2e5-488af4aa46fa";
/>
<img width="392" height="70" alt="Screenshot 2025-10-30 at 18 41 54"
src="https://github.com/user-attachments/assets/d8e518e1-fe0c-4801-bfd4-666bd089f6f6";
/>
### TESTING INSTRUCTIONS
**Test in SQL Lab:**
1. Navigate to **SQL Lab** → **SQL Editor**
2. Observe the **Schema** selector field
3. Verify the refresh icon is horizontally aligned with the schema select
input (not the label)
4. Observe the **See table schema** selector field
5. Verify the refresh icon is horizontally aligned with the table select
input (not the label)
6. Check that spacing to the left of refresh buttons is consistent (4px)
**Test in Add Dataset:**
1. Navigate to **Data** → **Datasets**
2. Click **+ Dataset** button
3. In the left panel, observe the **Schema** selector
4. Verify the refresh icon is horizontally aligned with the schema select
input
5. Observe the **Table** selector (note: shows "Table" label instead of "See
table schema" when `sqlLabMode={false}`)
6. Verify the refresh icon is horizontally aligned with the table select
input
### ADDITIONAL INFORMATION
- [x] Changes UI
- [ ] Has associated issue:
- [ ] Required feature flags:
- [ ] Includes DB Migration (follow approval process in
[SIP-59](https://github.com/apache/superset/issues/13351))
- [ ] Migration is atomic, supports rollback & is backwards-compatible
- [ ] Confirm DB migration upgrade and downgrade tested
- [ ] Runtime estimates and downtime expectations provided
- [ ] Introduces new feature or API
- [ ] Removes existing feature or API
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
