From eac9cbdfb918755e4be4477f5f98d9658aae1eb0 Mon Sep 17 00:00:00 2001
From: yyh <yuanyouhuilyz@gmail.com>
Date: Fri, 13 Feb 2026 11:23:31 +0800
Subject: [PATCH] fix: sandbox provider icon sizing and alignment issues

Scale Docker SVG icon proportionally for small containers and fix E2B
PNG icon vertical offset by making its border wrapper a flex container.
---
 .../account-setting/sandbox-provider-page/provider-icon.tsx  | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/web/app/components/header/account-setting/sandbox-provider-page/provider-icon.tsx b/web/app/components/header/account-setting/sandbox-provider-page/provider-icon.tsx
index b780555ba5..42096aa269 100644
--- a/web/app/components/header/account-setting/sandbox-provider-page/provider-icon.tsx
+++ b/web/app/components/header/account-setting/sandbox-provider-page/provider-icon.tsx
@@ -20,6 +20,7 @@ const ProviderIcon = ({
   withBorder = false,
 }: ProviderIconProps) => {
   const sizeClass = size === 'sm' ? 'h-4 w-4' : 'h-6 w-6'
+  const dockerIconClass = size === 'sm' ? 'h-2.5 w-2.5' : 'h-6 w-6'
   const sshIconClass = size === 'sm' ? 'h-[5px] w-auto max-w-[70%]' : 'h-[6px] w-auto max-w-[70%]'
 
   if (providerType === 'docker') {
@@ -31,7 +32,7 @@ const ProviderIcon = ({
         )}
         style={{ backgroundColor: DOCKER_BRAND_BLUE }}
       >
-        <DockerMarkWhite className="h-6 w-6" />
+        <DockerMarkWhite className={dockerIconClass} />
       </div>
     )
     if (withBorder) {
@@ -59,7 +60,7 @@ const ProviderIcon = ({
       return (
         <div
           className={cn(
-            'shrink-0 overflow-hidden rounded border-[0.5px] border-divider-subtle',
+            'flex shrink-0 overflow-hidden rounded border-[0.5px] border-divider-subtle',
             sizeClass,
           )}
         >