Fix custom logo quality in header and About modal (#1419)

* fix: improve SVG logo quality in header and About modal

- Created buildLogoSrc helper to handle logo rendering
- SVG logos now decoded from base64 and URI-encoded for crisp rendering
- Raster images (PNG/JPEG) keep base64 encoding
- Added CSS improvements for better image scaling
- Comprehensive test coverage for all logo formats

Fixes image quality issues when using custom branding logos in DevSpaces

Signed-off-by: Oleksii Orel <oorel@redhat.com>

* fix: resolve CSS linting errors in app.css

- Fix CSS property order in .pf-c-page__header-brand-link .pf-c-brand
- Move .pf-c-about-modal-box__brand img selector before more specific selectors
- Add proper empty lines before comments and properties
- Ensure width comes before max-width, and max-width before height

Signed-off-by: Oleksii Orel <oorel@redhat.com>

---------

Signed-off-by: Oleksii Orel <oorel@redhat.com>

Author: olexii4

packages/dashboard-frontend/src/Layout/Header/Tools/AboutMenu/index.tsx

@@ -20,6 +20,7 @@ import React from 'react';
 
 import { AboutModal } from '@/Layout/Header/Tools/AboutMenu/Modal';
 import { BrandingData } from '@/services/bootstrap/branding.constant';
+import { buildLogoSrc } from '@/services/helpers/brandingLogo';
 
 type Props = {
   branding: BrandingData;
@@ -95,10 +96,7 @@ export class AboutMenu extends React.PureComponent<Props, State> {
 
     const { logoFile, name, productVersion } = this.props.branding;
 
-    const logoSrc =
-      dashboardLogo !== undefined
-        ? `data:${dashboardLogo.mediatype};base64,${dashboardLogo.base64data}`
-        : logoFile;
+    const logoSrc = buildLogoSrc(dashboardLogo, logoFile);
 
     return (
       <>

packages/dashboard-frontend/src/Layout/index.tsx

@@ -29,6 +29,7 @@ import { ROUTE } from '@/Routes';
 import { AppAlerts } from '@/services/alerts/appAlerts';
 import { IssuesReporterService } from '@/services/bootstrap/issuesReporter';
 import { WarningsReporterService } from '@/services/bootstrap/warningsReporter';
+import { buildLogoSrc } from '@/services/helpers/brandingLogo';
 import { signOut } from '@/services/helpers/login';
 import { RootState } from '@/store';
 import { selectBranding } from '@/store/Branding/selectors';
@@ -137,10 +138,7 @@ export class Layout extends React.PureComponent<Props, State> {
     const { isHeaderVisible, isSidebarVisible } = this.state;
     const { history, branding, dashboardLogo } = this.props;
 
-    const logoSrc =
-      dashboardLogo !== undefined
-        ? `data:${dashboardLogo.mediatype};base64,${dashboardLogo.base64data}`
-        : branding.logoFile;
+    const logoSrc = buildLogoSrc(dashboardLogo, branding.logoFile);
 
     return (
       <ToggleBarsContext.Provider

packages/dashboard-frontend/src/app.css

@@ -47,6 +47,17 @@ div.tippy-popper a:hover {
   --pf-global--link--Color: #2b9af3;
 }
 
+/* Ensure About modal logo renders with high quality */
+.pf-c-about-modal-box__brand img {
+  max-width: 100%;
+  height: auto;
+
+  object-fit: contain;
+
+  image-rendering: -webkit-optimize-contrast;
+  image-rendering: crisp-edges;
+}
+
 div.main-page-loader {
   position: absolute;
   z-index: 80;
@@ -147,7 +158,15 @@ div.main-page-loader .ide-page-loader-content img {
 }
 
 .pf-c-page__header-brand-link .pf-c-brand {
+  width: auto;
+  max-width: 200px;
   height: 3.17rem;
+
+  object-fit: contain;
+
+  /* Improve rendering quality for scaled images */
+  image-rendering: -webkit-optimize-contrast;
+  image-rendering: crisp-edges;
 }
 
 @keyframes hide {

packages/dashboard-frontend/src/services/helpers/__tests__/brandingLogo.spec.ts

@@ -0,0 +1,111 @@
+/*
+ * Copyright (c) 2018-2025 Red Hat, Inc.
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *   Red Hat, Inc. - initial API and implementation
+ */
+
+import { buildLogoSrc } from '@/services/helpers/brandingLogo';
+
+describe('brandingLogo helper', () => {
+  const fallbackLogo = './assets/branding/che-logo.svg';
+
+  describe('when dashboardLogo is undefined', () => {
+    it('should return fallback logo', () => {
+      const result = buildLogoSrc(undefined, fallbackLogo);
+      expect(result).toBe(fallbackLogo);
+    });
+  });
+
+  describe('when dashboardLogo is SVG', () => {
+    it('should decode base64 and encode with URI encoding', () => {
+      const svgContent = '<svg><circle r="10"/></svg>';
+      const base64Svg = btoa(svgContent);
+      const dashboardLogo = {
+        base64data: base64Svg,
+        mediatype: 'image/svg+xml',
+      };
+
+      const result = buildLogoSrc(dashboardLogo, fallbackLogo);
+
+      expect(result).toContain('data:image/svg+xml;charset=utf-8,');
+      expect(result).toContain(encodeURIComponent(svgContent));
+      expect(result).not.toContain('base64');
+    });
+
+    it('should fallback to base64 if decoding fails', () => {
+      const invalidBase64 = 'invalid!!!base64';
+      const dashboardLogo = {
+        base64data: invalidBase64,
+        mediatype: 'image/svg+xml',
+      };
+
+      const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation();
+
+      const result = buildLogoSrc(dashboardLogo, fallbackLogo);
+
+      expect(result).toBe(`data:image/svg+xml;base64,${invalidBase64}`);
+      expect(consoleErrorSpy).toHaveBeenCalledWith(
+        'Failed to decode SVG logo, falling back to base64:',
+        expect.any(Error),
+      );
+
+      consoleErrorSpy.mockRestore();
+    });
+  });
+
+  describe('when dashboardLogo is PNG', () => {
+    it('should return base64 data URL', () => {
+      const base64data =
+        'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==';
+      const dashboardLogo = {
+        base64data,
+        mediatype: 'image/png',
+      };
+
+      const result = buildLogoSrc(dashboardLogo, fallbackLogo);
+
+      expect(result).toBe(`data:image/png;base64,${base64data}`);
+    });
+  });
+
+  describe('when dashboardLogo is JPEG', () => {
+    it('should return base64 data URL', () => {
+      const base64data =
+        '/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAP//////////////////////////////////////////////////////////////////////////////////////wgALCAABAAEBAREA/8QAFAABAAAAAAAAAAAAAAAAAAAAA//aAAgBAQABPxA=';
+      const dashboardLogo = {
+        base64data,
+        mediatype: 'image/jpeg',
+      };
+
+      const result = buildLogoSrc(dashboardLogo, fallbackLogo);
+
+      expect(result).toBe(`data:image/jpeg;base64,${base64data}`);
+    });
+  });
+
+  describe('SVG encoding quality', () => {
+    it('should preserve SVG structure after encoding/decoding', () => {
+      const svgContent =
+        '<svg width="100" height="100"><rect x="10" y="10" width="80" height="80" fill="red"/></svg>';
+      const base64Svg = btoa(svgContent);
+      const dashboardLogo = {
+        base64data: base64Svg,
+        mediatype: 'image/svg+xml',
+      };
+
+      const result = buildLogoSrc(dashboardLogo, fallbackLogo);
+
+      // Extract the encoded part
+      const encodedPart = result.replace('data:image/svg+xml;charset=utf-8,', '');
+      const decoded = decodeURIComponent(encodedPart);
+
+      expect(decoded).toBe(svgContent);
+    });
+  });
+});

packages/dashboard-frontend/src/services/helpers/brandingLogo.ts

@@ -0,0 +1,44 @@
+/*
+ * Copyright (c) 2018-2025 Red Hat, Inc.
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *   Red Hat, Inc. - initial API and implementation
+ */
+
+/**
+ * Converts dashboard logo with base64 data to a proper data URL.
+ * Handles SVG images specially to ensure crisp rendering.
+ *
+ * @param dashboardLogo - Logo object with base64data and mediatype
+ * @param fallbackLogo - Fallback logo path if dashboardLogo is undefined
+ * @returns Data URL string for use in img src or Brand component
+ */
+export function buildLogoSrc(
+  dashboardLogo: { base64data: string; mediatype: string } | undefined,
+  fallbackLogo: string,
+): string {
+  if (dashboardLogo === undefined) {
+    return fallbackLogo;
+  }
+
+  // Special handling for SVG to ensure crisp rendering
+  // SVG images render better when decoded and URI-encoded rather than base64
+  if (dashboardLogo.mediatype === 'image/svg+xml') {
+    try {
+      const decodedSvg = atob(dashboardLogo.base64data);
+      return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(decodedSvg)}`;
+    } catch (e) {
+      console.error('Failed to decode SVG logo, falling back to base64:', e);
+      // Fallback to base64 if decoding fails
+      return `data:${dashboardLogo.mediatype};base64,${dashboardLogo.base64data}`;
+    }
+  }
+
+  // For non-SVG formats (PNG, JPEG, etc.), use base64 as-is
+  return `data:${dashboardLogo.mediatype};base64,${dashboardLogo.base64data}`;
+}