ConnectScreen: make button full width on small screens (#21683)

Automattic · Nov 25, 2021 · 28b3cbc · 28b3cbc
1 parent 357f504
commit 28b3cbc
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/projects/js-packages/connection/changelog/fix-connection-screen-cta-width b/projects/js-packages/connection/changelog/fix-connection-screen-cta-width
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+ConnectScreen: make button full width on small viewports
diff --git a/projects/js-packages/connection/components/connect-screen/basic/style.scss b/projects/js-packages/connection/components/connect-screen/basic/style.scss
@@ -2,7 +2,6 @@
 @import '@wordpress/base-styles/mixins';
 
 .jp-connection__connect-screen {
-
 	&__loading {
 		display: none;
 	}
@@ -19,7 +18,12 @@
 			max-width: 100%;
 
 			&:disabled {
-				color: hsla(0,0%,100%,.4);
+				color: hsla( 0, 0%, 100%, 0.4 );
+			}
+
+			@media ( max-width: $break-medium ) {
+				max-width: none;
+				width: 100%;
 			}
 		}
 	}