Bug: Repository page avatar image disproportionately smaller than title on small screens

[nickytonline]

The avatar for a repository page is really small compared to the title on a small screen. Here it is on my iPhone 13

[github-actions]

Thanks for the issue, our team will look into it as soon as possible! If you would like to work on this issue, please wait for us to decide if it's ready. The issue will be ready to work on once we remove the "needs triage" label.

To claim an issue that does not have the "needs triage" label, please leave a comment that says ".take". If you have any questions, please reach out to us on Discord or follow up on the issue itself.

For full info on how to contribute, please check out our contributors guide.

[nickytonline]

The avatar should be beside the tile on a smaller screen and sized to match the size of the title font size and the description below it.

It should probably be handle this way as well for any size screen. Right now it looks like the title and description are in one flex child and the avatar in another.

[nickytonline]

Maybe something like this on a smaller screen.

            <header className="flex flex-col gap-4 pt-4">
              <div className="flex gap-2">
                <Avatar size={48} avatarURL={image} />
                <a
                  href={`https://github.com/${repoData.full_name}`}
                  target="_blank"
                  className="group hover:underline underline-offset-2 text-xl md:text-3xl font-bold flex gap-2 items-center"
                >
                  <h1>{repoData.full_name}</h1>
                  <HiOutlineExternalLink className="group-hover:text-sauced-orange text-lg lg:text-xl" />
                </a>
              </div>
              <p className="md:text-xl">{repoData.description}</p>
            </header>