Update rendered evaluations fetching and styles in hypercerts view page

[bitbeckers]

• Cleans up path invalidation method into single method in app/actions dir
• Updates evaluation fetching to wrapper component with paginated fetching
• Updates card styling to be more efficient with screen real estate
• Cleans up pagination components that are now also used for evaluations

For review, the following hypercertID has enough attestations to demo the impact of the changes: 11155111-0xa16DFb32Eb140a6f3F2AC68f41dAd8c7e83C4941-254871492823782909134067580966394390380544

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
hypercerts-app	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 21, 2024 1:23pm

[holkexyz]

1. Organization of boxes

Depending on the window size, I'm getting 2 rows with the second row having a lot of white space:

I think it would be great to limit it to one row and show only as many as fit in one row, but I guess that might be a bit complicated.

Maybe an alternative is the horizontal scrolling that Shu implemented for the self-reports? i.e. instead of the pagination, the user can scroll through additional evaluations.

2. Design of boxes

There is a lot of white space, when the comments are short. I assume that it is the easiest to have a set height and width. I think we can increase the width to 320px (from 280px, if I see it correctly). And allow only for about 2 lines of text. If the text is longer, the button "show full comment" is shown. If it is clicked, the box height increases to show the full comment (up to 280 characters). It is ok, if all boxes increase in height, when the button on one is clicked.

Currently there is a lot of space between the button and the text, which with the above changes shouldn't be there:

[bitbeckers]

@holkexyz updated based on your comments. I'm meeting with Shu on Tuesday and we can pick the best of both implementations and align on it.