UI issues on project pages from Endaoment

[divine-comedian]

On the Endaoment banner shown above project information on projects imported from Endaoment, it appears that the bottom padding is missing from the element

In addition it seems some projects have broken images, which prevents the banner image but also the project description from loading...

Two examples I found here, but probably more...
https://giveth.io/project/Homeless-Not-Toothless
https://giveth.io/project/Careers-Through-Culinary-Arts-Program-(C-CAP)

[LatifatAbdullahi]

@divine-comedian @kkatusic

This issue is now fixed on Staging

https://staging.giveth.io/project/Homeless-Not-Toothless

https://staging.giveth.io/project/Careers-Through-Culinary-Arts-Program-(C-CAP)

Checking the banners of random Endaoment projects

Easterseals.Crossroads._.Giveth.-.Google.Chrome.2025-01-21.11-12-10.mp4

[divine-comedian]

@WhyldWanderer found 100+ projects on production that experienced this issue: keeping this spreadsheet here to we can ensure it's resolved post-release on production: https://docs.google.com/spreadsheets/d/10dN_hgW8_OzIo7yYPl4wGD9dNYXclBurp55uQujfg2M/edit?usp=sharing

[kkatusic]

@divine-comedian I checked randomly some projects and there are fine, main cause of this issue was our default economics image has been misspelled.

[WhyldWanderer]

@kkatusic @divine-comedian - it looks like there are still some Endaoment projects that are missing banner images.
I marked them in orange in the spreadsheet above. I think these ones werent suffering from the misspelling but rather got missed in the original integration?

[kkatusic]

@WhyldWanderer can you share one of that project?

[WhyldWanderer]

They are marked in orange on this spreadsheet:
https://docs.google.com/spreadsheets/d/10dN_hgW8_OzIo7yYPl4wGD9dNYXclBurp55uQujfg2M/edit?usp=sharing

[kkatusic]

They are marked in orange on this spreadsheet: https://docs.google.com/spreadsheets/d/10dN_hgW8_OzIo7yYPl4wGD9dNYXclBurp55uQujfg2M/edit?usp=sharing

I don't have problem, can you try in another browser or incognito window/tab?

[WhyldWanderer]

Yes. Still happening even after clearing cache and using incognito browser. Do you see an image on this project in your browser?
https://giveth.io/project/UNO-DE-SIETE-MIGRANDO-AC

[kkatusic]

@WhyldWanderer yes I see image, what is problem with that image? If project had image in first load it should be that image, if not we provide some of default for main category.

[WhyldWanderer]

The Endaoment projects should each have a cover image based on the category that they are in. This is showing a Giveth default image that we don't usually have listed on the projects page.

I think these Endaoment projects must have gotten missed when they were imported and never received the correct banner image for their respective categories.

[kkatusic]

Let's check this one, previous has been unlisted from endaoment:

https://giveth.io/project/Ythan-Valley-Rotary

it's loaded data is:

  {
    name: 'Ythan Valley Rotary',
    description:
      'Although Ythan Valley Rotary is a new club, it is very active in the local community. Working IN and FOR our communities.',
    logoUrl: 'https://www.globalgiving.org/pfil/organ/85132/orglogo.jpg',
    nteeCode: 'Y00',
    nteeDescription: 'Mutual & Membership Benefit',
    mainnetAddress: '0x787712aca2f938dc801f5d9bfccd072edc237adf',
    opAddress: '0x787712aca2f938dc801f5d9bfccd072edc237adf',
    baseAddress: '0xe3a2afe58b80bea2c866a2fe5c47ec1eee10b154',
  }

and Y00 code represent this category:

{
    nteeCode: 'Y00',
    nteeDescription: 'Mutual & Membership Benefit',
    category1: 'Endaoment',
    category2: 'Other',
    category3: '',
    category4: '',
  }

as I can see it don't represent nothing than other category and as I can see inside loaded data that this project don't have any cover image or any of the projects as I saw, just holding logo URL:

https://app.endaoment.org/orgs/272b2cf1-45eb-bec3-d99c-d52c0540b210

You can check all projects on this link that have been loaded:

https://raw.githubusercontent.com/Giveth/impact-graph/refs/heads/staging/migration/data/importedEndaomentProjects.ts

[maryjaf]

Detailed Test Steps for UI Testing:

1. Open the webpage displaying imported projects from Endaoment.
2. Inspect the Endaoment banner element for the missing bottom padding.
3. Verify the layout and positioning of the banner element relative to project information.
4. Check for broken images in imported projects.
5. Click on projects with images to ensure proper loading and display.
6. Analyze the behavior of the project description area in relation to banner images.

Positive Test Scenarios:

1. Verify that the Endaoment banner displays correctly with appropriate bottom padding.
2. Confirm that projects without broken images load correctly and display both banner images and project descriptions.
3. Ensure that clicking on a project navigates to the project details page seamlessly.
4. Validate that the project information is consistent with the displayed banner images.

Negative Test Scenarios:

1. Test the scenario where the Endaoment banner is missing the bottom padding.
2. Simulate the situation where multiple projects have broken images to check the impact on the banner and description display.
3. Check the responsiveness of the UI when encountering broken images or missing padding.
4. Attempt to interact with the banner area when broken images are present to evaluate error handling.

[divine-comedian]

This is correct @kkatusic - projects that are marked as Other didn't have a banner created for them.

Honestly it's not very important for these "other" projects. The categories we're assigned based on the category given by Endaoment so it is possible the categorization seems funny since we didn't individually asses all 3000+ projects. If there's a good reason that we should change the categories of these projects we can follow it up in a new issue, but I don't see one that could justify the extra work imho.

@maryjaf did report that there is some padding missing, which is an easy fix

[kkatusic]

Thx @divine-comedian, @maryjaf when you check padding and it's not there open new issue, thx