From 5a72ec7433628104ccb07c485585a8cfd3827199 Mon Sep 17 00:00:00 2001
From: Kelly Dwan <ryelle@users.noreply.github.com>
Date: Tue, 7 Jan 2025 10:23:37 -0500
Subject: [PATCH] Download: Fix the button styles on small screens

After the modal button was added, the buttons would not wrap correctly, and the button styles were not switched correctly. This fixes the two by enabling wrapping, and using more specific class names.

Fixes #535, includes the content update from #536.
---
 .../wporg-main-2022/patterns/download.php     |  2 +-
 .../wporg-main-2022/src/style/style.scss      | 20 +++++++++++++++----
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/source/wp-content/themes/wporg-main-2022/patterns/download.php b/source/wp-content/themes/wporg-main-2022/patterns/download.php
index 572b20fb..d92413ff 100644
--- a/source/wp-content/themes/wporg-main-2022/patterns/download.php
+++ b/source/wp-content/themes/wporg-main-2022/patterns/download.php
@@ -28,7 +28,7 @@
 <p class="is-style-short-text"><?php _e( 'For anyone comfortable getting their own hosting and domain.', 'wporg' ); ?></p>
 <!-- /wp:paragraph -->
 
-<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|10"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
+<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|10"}},"layout":{"type":"flex","flexWrap":"wrap"}} -->
 <div class="wp-block-group"><!-- wp:wporg/modal {"closeButtonColor":"white","customCloseButtonColor":"#ffffff","href":"[download_link]","label":"<?php /* translators: [latest_version] is a shortcode and should not be translated. */ _e( 'Download WordPress [latest_version]', 'wporg' ); ?>"} -->
 <!-- wp:group {"style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}},"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|30","left":"var:preset|spacing|40","right":"var:preset|spacing|40"},"blockGap":"var:preset|spacing|10"}},"backgroundColor":"blueberry-1","textColor":"white","layout":{"type":"constrained"}} -->
 <div class="wp-block-group has-white-color has-blueberry-1-background-color has-text-color has-background has-link-color" style="padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--40)"><!-- wp:heading {"style":{"spacing":{"margin":{"top":"0"}}}} -->
diff --git a/source/wp-content/themes/wporg-main-2022/src/style/style.scss b/source/wp-content/themes/wporg-main-2022/src/style/style.scss
index 6e6a71f5..19be65ea 100644
--- a/source/wp-content/themes/wporg-main-2022/src/style/style.scss
+++ b/source/wp-content/themes/wporg-main-2022/src/style/style.scss
@@ -422,7 +422,7 @@ $wporg-about-breakpoint-max: 1920px;
 		border-bottom: 1px solid var(--wp--preset--color--light-grey-1);
 	}
 
-	#download-hosting .wp-block-columns > .wp-block-column .wp-block-group,
+	#download-hosting .wp-block-columns > .wp-block-column > .wp-block-group,
 	#features .wp-block-columns > .wp-block-column:last-child {
 		padding-left: var(--wp--preset--spacing--edge-space) !important;
 		padding-right: var(--wp--preset--spacing--edge-space) !important;
@@ -484,8 +484,12 @@ $wporg-about-breakpoint-max: 1920px;
 		width: 100% !important;
 	}
 
-	#download-install .wp-block-button:nth-child(1) a {
-		padding: 0;
+	#download-install > .wp-block-group {
+		flex-direction: column;
+	}
+
+	#download-install .wp-block-button__link.wporg-modal__toggle {
+		padding: 0.25em;
 		background-color: transparent;
 		color: var(--wp--custom--link--color--text);
 		font-weight: 400;
@@ -498,7 +502,7 @@ $wporg-about-breakpoint-max: 1920px;
 		}
 	}
 
-	#download-install .wp-block-button:nth-child(2) a {
+	#download-install .is-style-outline .wp-block-button__link {
 		--wp--custom--button--outline--color--background: var(--wp--preset--color--blueberry-1);
 		--wp--custom--button--outline--color--text: var(--wp--preset--color--white);
 		--wp--custom--button--outline--hover--color--background: var(--wp--preset--color--deep-blueberry);
@@ -514,6 +518,14 @@ $wporg-about-breakpoint-max: 1920px;
 			color: var(--wp--custom--button--outline--hover--color--text);
 		}
 
+		&:focus {
+			// Prevent the extra space for the border, which does not exist anymore.
+			padding-top: var(--wp--custom--button--spacing--padding--top);
+			padding-bottom: var(--wp--custom--button--spacing--padding--bottom);
+			padding-left: var(--wp--custom--button--spacing--padding--left);
+			padding-right: var(--wp--custom--button--spacing--padding--right);
+		}
+
 		&:active {
 			background-color: var(--wp--custom--button--outline--active--color--background);
 			color: var(--wp--custom--button--outline--active--color--text);