[fix][ui] about dialog Icon cutoff in safari

fix #12144
env 10.78.96.167
Signed-off-by: Yogi_Wang <yawang@vmware.com>

src/portal/src/app/shared/about-dialog/about-dialog.component.scss

@@ -12,10 +12,15 @@
 .content {
     margin:0 10px 10px 10px;
     outline: none;
+    width: 470px;
 }
 
 .harbor-icon {
-    transform: translateX(-100%);
     width: 56px;
     filter: drop-shadow(rgb(0, 0, 0) 58px 2px);
+}
+
+.harbor-logo-black {
+    width: 60px;
+    overflow: hidden;
 }
\ No newline at end of file

src/portal/src/css/common.scss

@@ -17,7 +17,8 @@
 }
 
 .harbor-icon {
-  filter: drop-shadow($fill-color1 58px 2px) !important;
+  transform: translateX($harbor-icon-translate-x) !important;
+  filter: drop-shadow($fill-color1 $harbor-icon-drop-shadow-x 2px) !important;
 }
 
 .color-white-dark {

src/portal/src/css/dark-theme.scss

@@ -26,4 +26,7 @@ $color-657b83: none;
 $color-fdf6e3:  none;
 $header-color: hsl(198, 100%, 15%)!important;
 
+$harbor-icon-translate-x: 0;
+$harbor-icon-drop-shadow-x: 58px;
+
 @import "./common.scss";

src/portal/src/css/light-theme.scss

@@ -28,4 +28,7 @@ $color-657b83: #657b83;
 $color-fdf6e3:  #fdf6e3;
 $header-color: rgb(0, 74, 112);
 
+$harbor-icon-translate-x: 100%;
+$harbor-icon-drop-shadow-x: -56px;
+
 @import "./common.scss";