VACMS-15967: Fix search bar spacing in Common Tasks Section

[chriskim2311]

Summary

Change the margin property to a larger screen size media query so there is enough left hand space for the search bar at certain screen widths

Related issue(s)

• Link to ticket created in va.gov-team repo
  FE: VA.gov homepage needs spacing adjustments in the Common Tasks (Search, Top Pages) section va.gov-cms#15967

Testing done

Tested across multiple screen lengths to check for common tasks section spacing issues.

Screenshots

Screen width 1010px.

What areas of the site does it impact?

Homepage

Acceptance criteria

[randimays]

We need some adjustments around ~768-923px wide, the Top pages section is still too close to the right edge of the screen

[randimays]

Can we shrink the right padding on Top pages down to 16px? The links are wrapping just a bit too much.

[randimays]

Apologies, I should have worded that a bit more clearly; I was only referring to the padding on the right side of the page (for Top pages). I think we need the wider padding on the left side of Top pages. Did you get a consult with Jordan yet?

[maxx1128]

Should we have equal spacing on the left sides of both "Search" and "Top Pages" for when both sections are squished? This is the page at 865px wide, and the left side spacing being different for both is throwing me off.

[chriskim2311]

@thejordanwood Hi! Can you take a look at this PR env and let me know what you think would be best case forward. Randi and Max have made good points. Let me know what you recommend and I can implement the changes.

http://39ffe3b77fc34ce9f5758fa9dd4c0d1e.review.vetsgov-internal/

[thejordanwood]

@chriskim2311

• The left side of Search should align with the left header content. The right side of Top Pages should align with the right side of the create account box.
• I think we need a bit more spacing on the right side of Search and left side of Top Pages. The spacing can be equal at 32 px each. (Let's try that to see how it looks, it can be tricky trying to determine the pixels in Sketch v a live design.)
• I also think there should be more room between the 2 link columns in Top Pages. Let's try 32 px there too.
• This spacing should only apply to tablet sizes and desktop should stay the same. I say that because it looks like the spacing is changed in the PR environment for desktop.
• My mockup is at 800 px for reference.

I also want to get @aklausmeier's opinion on this, since this is on the homepage and pretty visible.

[aklausmeier]

@chriskim2311 I agree with @thejordanwood's spacing suggestions on her 800px annotated mockup.

[chriskim2311]

@thejordanwood @randimays @aklausmeier
New Screenshots at 800px. I have handled both the initial ask of the search bar touching at certain widths and added more space for the links in the top pages section. Let me know if you see any other necessary changes thanks!

Before:

After:

[randimays]

@chriskim2311 I think there are still some spacing issues to address per Jordan's comment.

Here are some screenshots at a width right above the 768px breakpoint. Notice the search bar is creeping outside of its intended margin. There also should be 32px of padding on either side of the blue/white split in the middle per Jordan's comment.

[thejordanwood]

@randimays @aklausmeier

@chriskim2311 and I met about this to talk through the spacing. It looks like the search bar has a minimum width, which prevents us from using 32px of spacing at smaller screen sizes. I'm fine with the smaller spacing between the Search and Top pages sections shown in Chris' recent screenshot.

The original problem for this ticket has been solved and the search bar no longer touches the edge of the screen on the left side at certain screen widths. With that in mind, this is approved by me but I would like @aklausmeier's final approval on this before merging.

[randimays]

Code LGTM; when design gives the green light I think we're good to go!

[aklausmeier]

@thejordanwood @randimays @chriskim2311 This is approved on my end!