Fix slideshow content container borders

[andrewetchen]

Why are these changes introduced?

Fixes #1288

What approach did you take?

Slideshow section

For slideshow section image bocks, when the Show container on desktop setting is unchecked/disabled, the content container shows left and right borders. These borders show up when using global Content container > Border settings

Currently, in the component.slideshow.css, the following rule applies to the slideshow content container when the Grid layout setting is enabled:

slideshow-component.page-width .slideshow__text {
  border-right: var(--text-boxes-border-width) solid rgba(var(--color-foreground), var(--text-boxes-border-opacity));
  border-left: var(--text-boxes-border-width) solid rgba(var(--color-foreground), var(--text-boxes-border-opacity));
}

Wrapping the above in a media query fixes this issue:

@media screen and (max-width: 749px) {
  slideshow-component.page-width .slideshow__text {
    border-right: var(--text-boxes-border-width) solid rgba(var(--color-foreground), var(--text-boxes-border-opacity));
    border-left: var(--text-boxes-border-width) solid rgba(var(--color-foreground), var(--text-boxes-border-opacity));
  }
}

• Tested with Chrome, FireFox, and Safari

Other considerations

As noted here: #1288 (comment), I initially thought removing the slideshow-component.page-width .slideshow__text rule entirely from component-slideshow.css would fix the issue but I didn't account for left and right borders on mobile, which is being handled here:

dawn/assets/base.css

Lines 2708 to 2711 in ad989e6

	@media screen and (max-width: 749px) {
	.content-container--full-width-mobile {
	border-left: none;
	border-right: none;

Testing steps/scenarios

• Add a slideshow section with the Grid layout setting enabled
• Add an image slide with the Show container on desktop setting disabled.
• Add a second image slide with Show container on desktop enabled to compare.
• Make sure to test mobile with the Show content below images on mobile setting enabled.

Demo links

• Store
• Editor

Checklist

• Followed theme code principles
• Linted with Theme Check
• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility

[duygukalaycioglu]

• Add a slideshow section with the Grid layout setting enabled
• Add an image slide with the Show container on desktop setting disabled.
• Add a second image slide with Show container on desktop enabled to compare.
• Make sure to test mobile with the Show content below images on mobile setting enabled.

It would be ideal if there is no auto-rotation on slides as you interact on the slide blocks settings. This ticket has solution ideas for editor only JS fixes. (no impact on performance)

cc: @nicklepine @melissaperreault

[ludoboludo]

Looks good 👍