Remove force full width and use JS to adjust element positions if needed

[pookmish]

NOT READY FOR REVIEW

• (Edit the above to reflect status)

Summary

• TL;DR - what's this PR for?

Review By (Date)

• When does this need to be reviewed by?

Criticality

• How critical is this PR on a 1-10 scale? Also see Severity Assessment.
• E.g., it affects one site, or every site and product?

Urgency

• How urgent is this? (Normal, High)

Review Tasks

Setup tasks and/or behavior to test

1. Check out this branch
2. Rebuild Cache and import config drush cr ; drush ci
3. Navigate to...
4. Verify...

Site Configuration Sync

• Is there a config:export in this PR that changes the config sync directory?

Front End Validation

• Design is approved by @ user?
• HTML validation: Is the markup using the appropriate semantic tags and passes validation? Or, QA request ticket created?
• Cross-browser testing: Has been performed? Or, QA request ticket created?
• Automated accessibility: Scans performed? Or, QA request ticket created?
• Manual accessibility: Manually tested? Or, QA request ticket created?

Backend / Functional Validation

Code

• Are the naming conventions following our standards?
• Does the code have sufficient inline comments?
• Is there anything in this code that would be hidden or hard to discover through the UI?
• Are there any code smells?
• Are tests provided? eg (unit, behat, or codeception)

Code security

• Are all forms properly sanitized?
• Any obvious security flaws or new areas for attack?

General

• Is there anything included in this PR that is not related to the problem it is trying to solve?
• Is the approach to the problem appropriate?

Affected Projects or Products

• Does this PR impact any particular projects, products, or modules?

Associated Issues and/or People

• JIRA ticket(s)
• Other PRs
• Any other contextual information that might be helpful (e.g., description of a bug that this PR fixes, new functionality that it adds, etc.)
• Anyone who should be notified? (@mention them here)

Resources

• AMP Tool
• Accessibility Manual Test Script
• HTML Validator
• Browserstack and link to Browserstack Credentials

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
summer	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 24, 2024 4:55pm

[pookmish]

@rebeccahongsf what do you think about this approach? It's not my favorite, but it would allow those pages to have a side navigation as well as full width banners.

[rebeccahongsf]

Suggested change

	<div ref={ref} className="relative left-1/2 w-screen -translate-x-1/2">
	<div ref={ref} className="relative left-1/2 w-screen -translate-x-1/2 m-0">

Just this little change to remove the white space between banners and we should be good to go!

[rebeccahongsf]

Pre-approving since this approach makes sense to me 🫡
Thank you for putting this solution together, @pookmish!

[pookmish]

FWIW, I showed this to the client and she said to hold on it for now