From 1e5f83a33bf77eb257a25662b6f577a63ea8cc30 Mon Sep 17 00:00:00 2001
From: Alex Hemard <alex.hemard@goteleport.com>
Date: Thu, 14 Aug 2025 10:53:05 -0500
Subject: [PATCH 1/3] bug(Integrations): fix icon size

---
 .../Enroll/IntegrationTiles/IntegrationTiles.tsx             | 4 ++--
 web/packages/teleport/src/Integrations/Enroll/common.tsx     | 5 ++---
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/web/packages/teleport/src/Integrations/Enroll/IntegrationTiles/IntegrationTiles.tsx b/web/packages/teleport/src/Integrations/Enroll/IntegrationTiles/IntegrationTiles.tsx
index 1c121286faf16..b56dedf9dc368 100644
--- a/web/packages/teleport/src/Integrations/Enroll/IntegrationTiles/IntegrationTiles.tsx
+++ b/web/packages/teleport/src/Integrations/Enroll/IntegrationTiles/IntegrationTiles.tsx
@@ -72,7 +72,7 @@ export function IntegrationTileWithSpec({
         data-testid="tile-external-audit-storage"
       >
         <Flex flexBasis={100}>
-          <IntegrationIcon name={spec.icon} size={80} />
+          <IntegrationIcon name={spec.icon} />
         </Flex>
         <Flex>
           <Text>{spec.name}</Text>
@@ -152,7 +152,7 @@ export function GenericIntegrationTile({
       data-testid={`tile-${kind}`}
     >
       <Flex flexBasis={100}>
-        <IntegrationIcon name={icon} size={80} />
+        <IntegrationIcon name={icon} />
       </Flex>
       <Flex>
         <Text>{name}</Text>
diff --git a/web/packages/teleport/src/Integrations/Enroll/common.tsx b/web/packages/teleport/src/Integrations/Enroll/common.tsx
index b8a3d6be5f7bd..dc83c46f0db6d 100644
--- a/web/packages/teleport/src/Integrations/Enroll/common.tsx
+++ b/web/packages/teleport/src/Integrations/Enroll/common.tsx
@@ -71,10 +71,9 @@ export const NoCodeIntegrationDescription = () => (
  * IntegrationIcon wraps ResourceIcon with css required for integration
  * and plugin tiles.
  */
-export const IntegrationIcon = styled(ResourceIcon)<{ size?: number }>`
-  display: inline-block;
+export const IntegrationIcon = styled(ResourceIcon)`
   margin: 0 auto;
   height: 100%;
   min-width: 0;
-  ${({ size }) => size && `max-width: ${size}px;`}
+  max-width: 80px;
 `;

From 907873a322414005da3074cc0a92c05ca7131624 Mon Sep 17 00:00:00 2001
From: Alex Hemard <alex.hemard@goteleport.com>
Date: Thu, 21 Aug 2025 09:43:59 -0500
Subject: [PATCH 2/3] don't forward size prop

---
 .../Enroll/IntegrationTiles/IntegrationTiles.tsx          | 4 ++--
 web/packages/teleport/src/Integrations/Enroll/common.tsx  | 8 +++++---
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/web/packages/teleport/src/Integrations/Enroll/IntegrationTiles/IntegrationTiles.tsx b/web/packages/teleport/src/Integrations/Enroll/IntegrationTiles/IntegrationTiles.tsx
index b56dedf9dc368..1c121286faf16 100644
--- a/web/packages/teleport/src/Integrations/Enroll/IntegrationTiles/IntegrationTiles.tsx
+++ b/web/packages/teleport/src/Integrations/Enroll/IntegrationTiles/IntegrationTiles.tsx
@@ -72,7 +72,7 @@ export function IntegrationTileWithSpec({
         data-testid="tile-external-audit-storage"
       >
         <Flex flexBasis={100}>
-          <IntegrationIcon name={spec.icon} />
+          <IntegrationIcon name={spec.icon} size={80} />
         </Flex>
         <Flex>
           <Text>{spec.name}</Text>
@@ -152,7 +152,7 @@ export function GenericIntegrationTile({
       data-testid={`tile-${kind}`}
     >
       <Flex flexBasis={100}>
-        <IntegrationIcon name={icon} />
+        <IntegrationIcon name={icon} size={80} />
       </Flex>
       <Flex>
         <Text>{name}</Text>
diff --git a/web/packages/teleport/src/Integrations/Enroll/common.tsx b/web/packages/teleport/src/Integrations/Enroll/common.tsx
index dc83c46f0db6d..a3451e2ed2fbb 100644
--- a/web/packages/teleport/src/Integrations/Enroll/common.tsx
+++ b/web/packages/teleport/src/Integrations/Enroll/common.tsx
@@ -71,9 +71,11 @@ export const NoCodeIntegrationDescription = () => (
  * IntegrationIcon wraps ResourceIcon with css required for integration
  * and plugin tiles.
  */
-export const IntegrationIcon = styled(ResourceIcon)`
+export const IntegrationIcon = styled(ResourceIcon).withConfig({
+  shouldForwardProp: (prop) => prop !== 'size',
+})<{ size?: number }>`
   margin: 0 auto;
-  height: 100%;
   min-width: 0;
-  max-width: 80px;
+  height: 100%;
+  ${({ size }) => size && `max-width: ${size}px;`}
 `;

From d0668fa07a0bed2db76861457a404fd50c5a92ce Mon Sep 17 00:00:00 2001
From: Alex Hemard <alex.hemard@goteleport.com>
Date: Thu, 21 Aug 2025 09:46:19 -0500
Subject: [PATCH 3/3] cleanup

---
 web/packages/teleport/src/Integrations/Enroll/common.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/packages/teleport/src/Integrations/Enroll/common.tsx b/web/packages/teleport/src/Integrations/Enroll/common.tsx
index a3451e2ed2fbb..d22b50ccb78ec 100644
--- a/web/packages/teleport/src/Integrations/Enroll/common.tsx
+++ b/web/packages/teleport/src/Integrations/Enroll/common.tsx
@@ -72,10 +72,10 @@ export const NoCodeIntegrationDescription = () => (
  * and plugin tiles.
  */
 export const IntegrationIcon = styled(ResourceIcon).withConfig({
-  shouldForwardProp: (prop) => prop !== 'size',
+  shouldForwardProp: prop => prop !== 'size',
 })<{ size?: number }>`
   margin: 0 auto;
-  min-width: 0;
   height: 100%;
+  min-width: 0;
   ${({ size }) => size && `max-width: ${size}px;`}
 `;