Refactor FancyHeader to Use CSS Grid for Dynamic Height

[betsyecastro]

Replaces the fixed-height background-image approach with an <img> tag and CSS Grid. This allows the header height to adjust dynamically based on either the image or the content, whichever is taller.
Changes

• Replaced inline background-image style with <img class="banner-img"> element
• Used CSS Grid to layer the image and content on top of each other in the same cell
• Removed fixed height: 85vh in favor of dynamic sizing
• Added object-fit: cover and object-position: center for consistent image scaling
• Removed max-height and overflow-y: auto from .contact_info to let content flow naturally
• Overrode .profile-header padding and background on .fancy_header to prevent style conflicts

[betsyecastro]

The last commit hides the banner image on screens below lg breakpoint (992px).

[shukla-m]

@betsyecastro, @wunc, I pulled in the changes and tested the following functionality (used Docker instead of Valet):

• Tested image upload (Profile/Banner)
• Verified database media records were created with collection_name values set to images/banners respectively
• Verified file storage - storage/app/public/media

Unrelated to PR changes, and quite likely due to using Docker, I got a 403 error for the actual image URLs and was not able to test the visual rendering of the images on the front end. I might switch to Valet to test it, but wanted to give feedback that the image upload worked as expected on the backend.

[shukla-m]

See comments. I did NOT test the visual rendering of the uploaded image, but the code changes look fine.

[betsyecastro]

Hi @shukla-m, as I mentioned yesterday, I'm almost sure that the reason why you couldn't render the images is related to the transition from valet to Docker. These are similar issues I ran into when reviewing PR #222:

• 403 Forbidden error to retrieve images: remove any existing symlink before starting the container: rm public/storage
• Failing automated tests: set up the profiles_testing database and adjust the DB environment variables in .env.testing
• HEIC not being converted to JPEG or PNG: clear the stale package cache. Laravel was still trying to register Intervention\Image\ImageServiceProvider

Refer to this comment, where I mentioned what worked for me.

[shukla-m]

this comment

Hi @betsyecastro, thanks for the suggestions! I removed the existing symlinks via rm public/storage and restarted the container, which seemed to work. The profile/banner images and fancy header settings seem to work as expected.