Fix creators input styling on mobile

mick-schroeder · Jul 1, 2021 · 837f86d · 837f86d
1 parent 73033e3
commit 837f86d
Showing 1 changed file with 15 additions and 7 deletions.
diff --git a/src/scss/components/_creators.scss b/src/scss/components/_creators.scss
@@ -87,7 +87,9 @@
 			}
 		}
 
-		justify-content: flex-end;
+		@media (min-width: $bp-md) {
+			justify-content: flex-end;
+		}
 
 		.input-group {
 			flex: 0 0 auto;
@@ -110,6 +112,11 @@
 				padding: 0;
 				box-shadow: none;
 
+				@media (max-width: $bp-md - 1px) {
+					flex-direction: row-reverse;
+					padding: ($input-btn-padding-y-sm + 1px) 0;
+				}
+
 				@include state(".select-component:hover", ".select-component.is-focused") {
 					@include state(".select-component:not(.is-disabled)") {
 						cursor: pointer;
@@ -185,13 +192,14 @@
 			}
 		}
 
+		@media (min-width: $bp-md) {
+			> *:not(:first-child) {
+				margin-left: 2px;
+			}
 
-		> *:not(:first-child) {
-			margin-left: 2px;
-		}
-
-		> *:not(:last-child) {
-			margin-right: 2px;
+			> *:not(:last-child) {
+				margin-right: 2px;
+			}
 		}
 
 		.editable {