Increase width of event columns on Events page

[jdingeman]

Overview

The white columns on the Events page are very narrow, which causes the events and meeting title text to wrap. We want to make the columns on the Events page wider so that the content is easier to read.

Action Items

• Edit the code in /sass/components/_events.scss to make the columns wider
• First try matching the width of the columns to meet the edge of the "Our Locations" images below it

Referenced edges

• Try out other widths and placements that may look good instead of the current layout
• Add images of different potential solutions to this issue
• Consult with Product/Bonnie on the best layout from your proposals
• Create a pull request with the changes of the final decision

Resources/Instructions

• Guide to Sass Basics
• Emergent Request associated with this issue: ER: Increase width of event cards on Events page #4247

Full page screenshot of Events page

[github-actions]

Hi @kwangric, thank you for taking up this issue! Hfla appreciates you :)

Do let fellow developers know about your:-
i. Availability: (When are you available to work on the issue/answer questions other programmers might have about your issue?)
ii. ETA: (When do you expect this issue to be completed?)

You're awesome!

P.S. - You may not take up another issue until this issue gets merged (or closed). Thanks again :)

[kwangric]

i. Availability: Weekdays after 1pm PDT
ii. ETA: 3/28 afternoon

[kwangric]

Below are two potential solutions.

Solution A

• Increased overall width of the event columns to match the width of the "Our Locations" images below. Also centered time zone text.
• Increased margins between the event columns to 32px to match the margins between the location images.

Solution B

• Same changes as Solution A but kept the margins between the event columns the same as before (16 px).

Current Layout

[jdingeman]

@kwangric - nice job! I think both layouts look really good, but let's hear from @ExperimentsInHonesty for which solution may be the best to go with. I am going to put this into Questions/In Review and add the label so she has visibility of your potential solutions.

[ExperimentsInHonesty]

@kwangric I literally can't tell the difference between A and B

Perhaps screenshots of the parts that are different side by side or put stars next to the difference.

lol, this is like one of those can you spot the differences games!

[kwangric]

@ExperimentsInHonesty Below are the differences between A and B circled in green. The only difference is the width between the columns. Solution B has the original width, while in Solution A I increased the width to match the location pictures at the bottom of the page. Let me know if that makes it any more clear!

[ExperimentsInHonesty]

@kwangric Thank you!!! that was really helpful. Solution A please.