From 0c28236482cfcae5a3c3e7bd5ec56b3416ec4bdb Mon Sep 17 00:00:00 2001
From: Gabriel Hernandez <ghernandez345@gmail.com>
Date: Tue, 27 Aug 2024 16:48:42 +0100
Subject: [PATCH] Fix UI self service icons on the my device page (#21593)

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
---
 .../icons/SoftwareIcon/_styles.scss           | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/frontend/pages/SoftwarePage/components/icons/SoftwareIcon/_styles.scss b/frontend/pages/SoftwarePage/components/icons/SoftwareIcon/_styles.scss
index a94db1daa5..bb62bd5cb8 100644
--- a/frontend/pages/SoftwarePage/components/icons/SoftwareIcon/_styles.scss
+++ b/frontend/pages/SoftwarePage/components/icons/SoftwareIcon/_styles.scss
@@ -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;