feat: improve appearing controls styles

[Raubzeug]

closes #1045

Stand

CI Results

Test Status: ✅ PASSED

📊 Full Report

Total	Passed	Failed	Flaky	Skipped
134	134	0	0	0

Bundle Size: 🔽

Current: 78.94 MB | Main: 78.97 MB
Diff: 0.03 MB (-0.04%)

✅ Bundle size decreased.

ℹ️ CI Information

• Test recordings for failed tests are available in the full report.
• Bundle size is measured for the entire 'dist' directory.
• 📊 indicates links to detailed reports.
• 🔺 indicates increase, 🔽 decrease, and ✅ no change in bundle size.

[astandrik]

I suppose we can use Button Icons as here

<Button size="xs">
    <Button.Icon>
        <ArrowsRotateLeft />
    </Button.Icon>
</Button>;

and icon size should be set automatically according to button size

[Raubzeug]

Discussed with uikit team, button doesn't affect it's icon size. We should explicitly set icon size we want.

[artemmufazalov]

Since you add padding only here, you should also add padding for focused state. Now if I select button with Tab, it won't have right padding

[Raubzeug]

I refactored styles. Wrapper is only needed on hover. If buttons are focused from keyboard, they should be shown separately.

[artemmufazalov]

DeveloperUIButton is controlled by display: none and display: inline-block. It cannot be selected with Tab. Two ways possible:

1. All buttons in the UI should be keyboard accessible, so this DeveloperUIButton button should be updated too

2. We don't need to make buttons in table keyboard accessible (for me in tables it doesn't make much sense anyway), so we can stick to previous solution, but update only ClipboardButton

[Raubzeug]

Lets try the hardest way number 1. I hope I've found a solution.