fix(#1999): fix search autocomplete width for mobile

majornista · majornista · commit 879a5c0efc38 · 2022-11-29T11:26:02.000-05:00
improve css selector specificity so that autocomplete width is inherited correctly
diff --git a/packages/dev/docs/src/docs.css b/packages/dev/docs/src/docs.css
@@ -632,13 +632,13 @@ h2.sectionHeader {
 
 .docSearchBoxThemeProvider {
   height: var(--spectrum-global-dimension-size-400);
-}
 
-.docSearchBox {
-  margin-inline-start: auto;
-  width: var(--spectrum-global-dimension-size-3000) !important;
-  > div {
-    width: 100%;
+  .docSearchBox {
+    margin-inline-start: auto;
+    width: var(--spectrum-global-dimension-size-3000);
+    > div {
+      width: 100%;
+    }
   }
 }
 
@@ -802,9 +802,11 @@ h2.sectionHeader {
   }
 }
 
-@media (max-width: 569px) {
-  .docSearchBox {
-    width: var(--spectrum-global-dimension-size-2400);
+@media (max-width: 375px) {
+  .docSearchBoxThemeProvider {
+    .docSearchBox {
+      width: var(--spectrum-global-dimension-size-2400);
+    }
   }
 }
 

Original file line number	Diff line number	Diff line change
`@@ -632,13 +632,13 @@ h2.sectionHeader {`
`632`	`632`
`633`	`633`	`.docSearchBoxThemeProvider {`
`634`	`634`	`height: var(--spectrum-global-dimension-size-400);`
`635`		`-}`
`636`	`635`
`637`		`-.docSearchBox {`
`638`		`- margin-inline-start: auto;`
`639`		`- width: var(--spectrum-global-dimension-size-3000) !important;`
`640`		`- > div {`
`641`		`- width: 100%;`
	`636`	`+ .docSearchBox {`
	`637`	`+ margin-inline-start: auto;`
	`638`	`+ width: var(--spectrum-global-dimension-size-3000);`
	`639`	`+ > div {`
	`640`	`+ width: 100%;`
	`641`	`+ }`
`642`	`642`	`}`
`643`	`643`	`}`
`644`	`644`
`@@ -802,9 +802,11 @@ h2.sectionHeader {`
`802`	`802`	`}`
`803`	`803`	`}`
`804`	`804`
`805`		`-@media (max-width: 569px) {`
`806`		`- .docSearchBox {`
`807`		`- width: var(--spectrum-global-dimension-size-2400);`
	`805`	`+@media (max-width: 375px) {`
	`806`	`+ .docSearchBoxThemeProvider {`
	`807`	`+ .docSearchBox {`
	`808`	`+ width: var(--spectrum-global-dimension-size-2400);`
	`809`	`+ }`
`808`	`810`	`}`
`809`	`811`	`}`
`810`	`812`