fix: Public page destortion on different resolution

[maze-runnar]

Fixes #4001

• Desired image ratio is 1:1.
• Compared the same page in different resolutions.
• fixed displaced text

Checklist

• I have read the Contribution & Best practices Guide.
• My branch is up-to-date with the Upstream development branch.
• The acceptance, integration, unit tests and linter pass locally with my changes
• I have added tests that prove my fix is effective or that my feature works
• I have added necessary documentation (if appropriate)

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/eventyay/open-event-frontend/2e568ekv0
✅ Preview: https://open-event-frontend-git-publicpage-destortion.eventyay.vercel.app

[mariobehling]

Problem is not solved. Instead

• images appear smaller on some screen resolutions
• there is now a bigger white space between images
• in small resolutions the image is not 1:1 and there is no space between images

[codecov]

Codecov Report

Merging #5501 (4fa4b87) into development (5bbb10c) will decrease coverage by 0.18%.
The diff coverage is n/a.

@@               Coverage Diff               @@
##           development    #5501      +/-   ##
===============================================
- Coverage        23.25%   23.07%   -0.19%     
===============================================
  Files              493      494       +1     
  Lines             5182     5210      +28     
  Branches            38       38              
===============================================
- Hits              1205     1202       -3     
- Misses            3972     4003      +31     
  Partials             5        5              

Impacted Files	Coverage Δ
app/components/tabbed-navigation.js	33.33% <0.00%> (-20.00%)	⬇️
app/controllers/register.js	34.28% <0.00%> (ø)
app/controllers/events/view.js	0.00% <0.00%> (ø)
app/routes/public/cfs/index.js	0.00% <0.00%> (ø)
app/controllers/events/view/index.js	0.00% <0.00%> (ø)
app/controllers/events/view/sessions.js	0.00% <0.00%> (ø)
app/controllers/events/view/settings.js	0.00% <0.00%> (ø)
app/controllers/events/view/speakers.js	0.00% <0.00%> (ø)
app/controllers/events/view/scheduler.js	0.00% <0.00%> (ø)
app/controllers/events/view/sessions/edit.js	0.00% <0.00%> (ø)
... and 11 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 5bbb10c...4fa4b87. Read the comment docs.

[iamareebjamal]

Create a new class instead of modifying previous one

[iamareebjamal]

Why are you changing the class, it will break every other place this class it used

[maze-runnar]

that thumbnail class is also present their. I have added new class for featured -speaker only on public page in speaker-item.

.thumbnail-square {
  height: 300px;
  overflow: hidden;
}

.thumbnail-square img {
  min-height: 100%;
  object-fit: cover;
}

.featured-speaker {
  height: auto;
  overflow: hidden;
  width: 100%;
}

.featured-speaker img {
  min-height: 100%;
  min-width: 100%;
  object-fit: cover;
}

[maze-runnar]

@iamareebjamal please review this PR.

[maze-runnar]

@mariobehling I have made changes as per requirement.