Fix theme catalogue card images#2227
Conversation
✅ Deploy Preview for astro-www-2 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
I'm not sure why the page doesn't work. Maybe there is an uncaught runtime error or something like that because of the Locally, I noticed Typescript wasn't complaining about the missing Using type Props<T extends HTMLTag = "h3"> = Polymorphic<{as: T;}> & {
theme: ThemeAndAuthor;
};fixes the inference! Now, for the actual issue, I'm not sure what has changed but you're right the dimensions seem to be the issue. Replacing both |
|
Thanks @ArmandPhilippot - replacing Is this good enough to at least make the theme cards look better now? 😄 |
|
Will note, that although it's stupid to have this IDX file in here, someone with the same problem I had (Firebase Studio would simply just ignore any So, I kind of do need this IDX file merged in at some point to be able to test that theory. 😅 |
ArmandPhilippot
left a comment
There was a problem hiding this comment.
I don't know if inferSize is the best solution, but at least this works! I expected layout to work here... maybe this is related to the Netlify adapter or remote/public images. I don't know and I don't see any alternatives, so this LGTM!
And, I don't mind the IDX file. I mean for an occasional contributor this is probably too much but you're often in this repo... so, this makes sense to me if this helps you!
Still, this is odd we don't get any error because of a missing width or height... I'll try to reproduce that because this looks like a bug to me. Hopefully this is not related to Netlify because this might be harder to reproduce. 😅
Updated solution: replace
widthandheightwithinferSizeas a temporary solution because the images for the theme catalogue cards were oddly cropped.Also, thanks Firebase Studio 😅
Original message:
I don't know why the deploy preview won't show our theme pages, but working locally removing the
height={400}seems to fix the image displays.Current theme cards:
After removing height from theme cards:
Will note that setting a
layoutproperty did not fix the issue, neither on the<Image />component in the<ThemeCard>nor as animageconfiguration option. The only thing that worked was removing either the height or the width.Browser Test Checklist
I have tested this PR on at least three of the following browsers:
Note: I am also trying to get this to work in IDX, so am experimenting with a
dev.nixfile, too.