Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Symfony UX icons now very small #6670

Closed
hafkenscheid opened this issue Dec 29, 2024 · 3 comments · Fixed by #6679
Closed

Symfony UX icons now very small #6670

hafkenscheid opened this issue Dec 29, 2024 · 3 comments · Fixed by #6679
Labels
bug design good first issue Ideal for your first contribution! (some experience with this bundle may be required) help wanted Issues and PRs which are looking for volunteers to complete them.
Milestone
4.x

Comments

@hafkenscheid
Copy link
Contributor

Describe the bug
Since version 4.20.1 the symfony ux icons in the menu are looking very small
Seems to be related to this commit: ee475fb and more specifically the display: flex; part.

To Reproduce
Use a custom icon for example:

    public function configureAssets(): Assets
    {
        return Assets::new()
            ->useCustomIconSet()
    ;
    }
         
    public function configureMenuItems(): iterable
    {
        yield MenuItem::linktoDashboard('Dashboard', 'ic:twotone-home');
    }

(OPTIONAL) Additional context
Version 4.20.0:
image

Version 4.20.1
image
@javiereguiluz javiereguiluz added this to the 4.x milestone Dec 30, 2024
@javiereguiluz
Copy link
Collaborator

@hafkenscheid sorry about that. This kind of errors usually fix by setting flex-shrink: 0 to the icon element. can you please try if that fixes it for you? If it does, could you please create a PR with that change? Thanks!

@javiereguiluz javiereguiluz added help wanted Issues and PRs which are looking for volunteers to complete them. good first issue Ideal for your first contribution! (some experience with this bundle may be required) labels Dec 30, 2024
@hafkenscheid
Copy link
Contributor Author

@javiereguiluz The display: flex was already removed in: c2687f3
Furthermore, 3be8a66 adds 3 px margin which makes things worse (also for fontawesome icons):

image

@hafkenscheid hafkenscheid mentioned this issue Jan 2, 2025
Merged
hafkenscheid referenced this issue Jan 3, 2025
@javiereguiluz
bug #6671 Align icon and text in a menu item (kniziol)
4eb8174 
This PR was squashed before being merged into the 4.x branch.

Discussion
----------

Align icon and text in a menu item

# Menu configuration

It's not necessary. It's just added to have more menu items than a single, default menu item.

```php
// src/Controller/Admin/DashboardController.php:47

public function configureMenuItems(): iterable
{
    yield MenuItem::linkToDashboard('dashboard', 'fa fa-home');
    yield MenuItem::subMenu('Test', 'fas fa-list')
        ->setSubItems([
            MenuItem::linkToDashboard('dashboard', 'fa fa-home'),
            MenuItem::linkToDashboard('dashboard', 'fa fa-home'),
        ])
    ;
    // yield MenuItem::linkToCrud('The Label', 'fas fa-list', EntityClass::class);
}
```

# Before (the problem)

The icon in the menu item is currently aligned to the top. It would be so much more visually appealing if both the icon and text were centered together. Just take a look at the example below (in the `After` section).

![Icon and text alignment - before](https://github.com/user-attachments/assets/00472066-aff8-438f-9831-f0f9a8785874)

# After (the solution)

![Icon and text alignment - after](https://github.com/user-attachments/assets/8b1606e6-209f-430a-9ba7-65f2094fd4e8)

Commits
-------

3be8a66 Align icon and text in a menu item
@javiereguiluz
Copy link
Collaborator

Hopefully this will be fixed by 0f7613a when it's available in the next stable release.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug design good first issue Ideal for your first contribution! (some experience with this bundle may be required) help wanted Issues and PRs which are looking for volunteers to complete them.
Projects
None yet
Milestone
4.x
Development

Successfully merging a pull request may close this issue.

Fix allignment and size of menu items hafkenscheid/EasyAdmin
2 participants
@javiereguiluz @hafkenscheid