FIX: Allow slight overflow on all sticky elements

dwhieb · Jul 18, 2024 · 015c789 · 015c789
1 parent 919b9f7
commit 015c789
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 7 deletions.
diff --git a/pages/Search/Search.css b/pages/Search/Search.css
@@ -19,9 +19,9 @@
 
 .sticky {
   align-items:     center;
-  inline-size:     calc(100vw - 1em);
+  inline-size:     100vw;
   inset-inline:    0;
-  max-inline-size: calc(100vw - 1em);
+  max-inline-size: 100vw;
   position:        sticky;
 }
 
@@ -89,11 +89,19 @@ h2 {
 }
 
 #language-select {
-  all:         revert;                    /* Use default browser styles. */
-  font-family: 'Times New Roman', serif;  /* This is necessary because the adjustments to ligatures don't apply within the <select> element. */
-  font-size:   100%;
-  line-height: 1.5;
-  padding:     0.25em;
+
+  all:           revert;                    /* Use default browser styles. */
+  border-radius: var(--border-radius);
+  font-family:   'Times New Roman', serif;  /* This is necessary because the adjustments to ligatures don't apply within the <select> element. */
+  font-size:     100%;
+  line-height:   1.5;
+  padding:       0.25em;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--off-black);
+    color:            var(--off-white);
+  }
+
 }
 
 #main {

diff --git a/pages/Search/Search.test.js b/pages/Search/Search.test.js
@@ -117,6 +117,10 @@ describe(`Search`, function() {
       cy.get(`#results tbody tr`).should(`have.length`, 1)
     })
 
+    it.only(`saves the user's selection across visits`, function() {
+      cy.visit(`/search`)
+    })
+
   })
 
   describe(`Pagination`, function() {