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.

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

Set icon width of hassio content card to prevent content shift of title/description #24641

Open
wants to merge 1 commit into
base: dev
Choose a base branch
from

Conversation

niklaswa
Copy link

@niklaswa niklaswa commented Mar 15, 2025

Proposed change

Just a small fix to prevent the content shift of the addon title and description when the icon loads.
Setting the width to 40 tells the HTML DOM that there will be an image and keep the space until the icon is loaded.
We can hardcode the width because it's also hardcoded in the CSS. I didn't set the height as there can be icons that have different aspect ratios (to prevent distortion).

Content shift I'm speaking of:

Screen.Recording.2025-03-15.at.12.05.27.mov

Type of change

  • Dependency upgrade
  • Bugfix (non-breaking change which fixes an issue)
  • New feature (thank you!)
  • Breaking change (fix/feature causing existing functionality to break)
  • Code quality improvements to existing code or addition of tests

Additional information

⚠️ Unfortunately I couldn't test it as I have setup the frontend to connect to my production instance and I couldn't get the hassio/addon settings to load!
But it's such a small change, it shouldn't produce any problems. But I would be glad if someone who has the correct dev stup could test it...

Checklist

  • The code change is tested and works locally.
  • There is no commented out code in this PR.
  • Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

@github-actions github-actions bot added the Supervisor Related to the supervisor panel label Mar 15, 2025
@niklaswa niklaswa changed the title Set icon width to 40px to prevent content shift Set icon width of hassio content card to prevent content shift of title/description Mar 15, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
cla-signed Supervisor Related to the supervisor panel
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant