Elgato_dark/fleet
1
0
Fork 0
mirror of https://github.com/fleetdm/fleet synced 2026-05-23 00:49:03 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 106

Fix UI self service icons on the my device page (#21593)

Browse source 
relates to #21496

Fix a rendering bug on the self service section of the my device page
where the icon was rendering too large

**Before**


![image](https://github.com/user-attachments/assets/450c242e-9096-4a67-9003-6ef1675c9618)

**After**


![image](https://github.com/user-attachments/assets/9b6ccda1-17d8-4ad8-acc0-2a9438a306d9)

- [x] Manual QA for all new/changed functionality
This commit is contained in:
Gabriel Hernandez 2024-08-27 16:48:42 +01:00 committed by GitHub
parent 38669539e4
commit 0c28236482
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 20 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
frontend/pages/SoftwarePage/components/icons/SoftwareIcon/_styles.scss
View file

@ -22,6 +22,10 @@
display: block;
}
// These following classs are when a software icon is passed a url prop. In
// this case we need to add custom width,height, and padding to show these
// icons correctly.
// we use this selector to give higher specifity than the selector
// ".core-wrapper a img" which is in /styles/global/_styles.scss
// TODO: we should change ".core-wrapper a img" selector in that file
@ -34,6 +38,22 @@
margin-left: 0;
}
>img.software-icon__software-img-medium {
width: 38px;
height: 38px;
border-radius: $border-radius-xlarge;
padding: 1px;
margin-left: 0;
}
>img.software-icon__software-img-large {
width: 60px;
height: 60px;
border-radius: $border-radius-xxlarge;
padding: 1px;
margin-left: 0;
}
>img.software-icon__software-img-xlarge {
width: 88px;
height: 88px;