Bug 2029977 - Logos in Dev Catalog are skewed
Summary: Logos in Dev Catalog are skewed
Keywords:
Status: CLOSED ERRATA
Alias: None
Product: OpenShift Container Platform
Classification: Red Hat
Component: Dev Console
Version: 4.9
Hardware: Unspecified
OS: Unspecified
high
medium
Target Milestone: ---
: 4.11.0
Assignee: Jaivardhan Kumar
QA Contact: spathak@redhat.com
URL:
Whiteboard:
Depends On:
Blocks:
TreeView+ depends on / blocked
 
Reported: 2021-12-07 17:42 UTC by Serena
Modified: 2022-09-28 05:57 UTC (History)
6 users (show)

Fixed In Version:
Doc Type: If docs needed, set a value
Doc Text:
Clone Of:
Environment:
Last Closed: 2022-09-28 05:57:37 UTC
Target Upstream Version:
Embargoed:


Attachments (Terms of Use)
Logo is skewed (50.88 KB, image/png)
2021-12-07 17:42 UTC, Serena
no flags Details


Links
System ID Private Priority Status Summary Last Updated
Red Hat Product Errata RHBA-2022:6659 0 None None None 2022-09-28 05:57:42 UTC

Description Serena 2021-12-07 17:42:25 UTC
Created attachment 1845112 [details]
Logo is skewed

Description of problem:
Some logos in the Dev Catalog are skewed (disproportional).  Although this is visual and does not affect the ability to perform an action, it is a bad user experience.  Based on the size/shape of the supplied logos provided for the operator backed services, we could be mistakenly altering the logo.

This is an issue for Red Hat brand as well as partner/ISVs.

Version-Release number of selected component (if applicable):


How reproducible:
Very reproducible with SOME of the icons.  

Steps to Reproduce:
1.Be sure that RH Data Science operator is installed
2.Go to Dev Perspective
3.Make sure you are in a project
4.Go to Add -> Operator Backed Services
5. Search for Science

Actual results:


Expected results:


Additional info:

Comment 2 Serena 2021-12-07 17:46:01 UTC
@cvogt I think you mentioned this may be a PF issue, please add relevant notes here.

Also, this should be backported once we have a fix.

Comment 3 cvogt 2021-12-17 15:01:05 UTC
The PF catalog item has a max width and a fixed height for the logo. This results in a distortion when the image is wider than the max available width.
The image should only be constrained in size in one direction instead of both. That way the image can resize to fill the available space while maintaining the correct ratio.

Comment 5 Abhinandan Das 2022-03-23 15:17:30 UTC
Logged issue https://github.com/patternfly/patternfly-quickstarts/issues/147 for patternfly-quickstarts

Comment 7 Abhinandan Das 2022-03-23 15:24:35 UTC
Logged issue for Patternfly
https://github.com/patternfly/patternfly-react/issues/7113

Comment 8 Abhinandan Das 2022-03-23 15:28:16 UTC
This styles are also applied by the patternfly Quickstart

catalog-tile-pf-icon { //from patternfly quickStarts
    font-size: 40px;
    height: 40px;
    max-width: 60px;
    min-width: 40px;
}

.catalog-tile-pf-icon { // from patternfly catalog
    font-size: 40px;
    height: 40px;
    max-width: 60px;
    min-width: 40px;
}

Comment 9 Christoph Jerolimov 2022-09-20 06:55:06 UTC
This is fixed when we implemented the dark theme support with 4.11.

Comment 12 errata-xmlrpc 2022-09-28 05:57:37 UTC
Since the problem described in this bug report should be
resolved in a recent advisory, it has been closed with a
resolution of ERRATA.

For information on the advisory (OpenShift Container Platform 4.11.6 bug fix update), and where to find the updated
files, follow the link below.

If the solution does not work for you, open a new bug report.

https://access.redhat.com/errata/RHBA-2022:6659


Note You need to log in before you can comment on or make changes to this bug.