fix(search): flex basis and card highlighting

quartz/components/scripts/search.inline.ts

@@ -163,13 +163,11 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
   let previewInner: HTMLDivElement | undefined = undefined
   const results = document.createElement("div")
   results.id = "results-container"
-  results.style.flexBasis = enablePreview ? "min(30%, 450px)" : "100%"
   appendLayout(results)
 
   if (enablePreview) {
     preview = document.createElement("div")
     preview.id = "preview-container"
-    preview.style.flexBasis = "100%"
     appendLayout(preview)
   }
 

quartz/components/styles/search.scss

@@ -61,7 +61,7 @@
 
       & > * {
         width: 100%;
-        border-radius: 5px;
+        border-radius: 7px;
         background: var(--light);
         box-shadow:
           0 14px 50px rgba(27, 33, 48, 0.12),
@@ -86,69 +86,70 @@
         display: none;
         flex-direction: row;
         border: 1px solid var(--lightgray);
+        flex: 0 0 100%;
+        box-sizing: border-box;
 
         &.display-results {
           display: flex;
         }
 
+        &[data-preview] > #results-container {
+          flex: 0 0 min(30%, 450px);
+        }
+
         @media all and (min-width: $tabletBreakpoint) {
           &[data-preview] {
             & .result-card > p.preview {
               display: none;
             }
+
+            & > div {
+              &:first-child {
+                border-right: 1px solid var(--lightgray);
+                border-top-right-radius: unset;
+                border-bottom-right-radius: unset;
+              }
+
+              &:last-child {
+                border-top-left-radius: unset;
+                border-bottom-left-radius: unset;
+              }
+            }
           }
         }
 
         & > div {
-          // vh - #search-space.margin-top
           height: calc(75vh - 12vh);
-          background: none;
-
-          &:first-child {
-            border-top-left-radius: 5px;
-            border-bottom-left-radius: 5px;
-            border-right: 1px solid var(--lightgray);
-          }
-
-          &:last-child {
-            border-top-right-radius: 5px;
-            border-bottom-right-radius: 5px;
-          }
+          border-radius: 5px;
         }
 
         @media all and (max-width: $tabletBreakpoint) {
-          display: block !important;
-
-          & > *:not(#results-container) {
+          & > #preview-container {
             display: none !important;
           }
 
-          & > #results-container {
+          &[data-preview] > #results-container {
             width: 100%;
             height: auto;
+            flex: 0 0 100%;
           }
         }
 
         & .highlight {
-          background: color-mix(in srgb, var(--tertiary) 60%, transparent);
+          background: color-mix(in srgb, var(--tertiary) 60%, rgba(255, 255, 255, 0));
           border-radius: 5px;
           scroll-margin-top: 2rem;
         }
 
         & > #preview-container {
           display: block;
-          box-sizing: border-box;
           overflow: hidden;
-          box-sizing: border-box;
           font-family: inherit;
           color: var(--dark);
           line-height: 1.5em;
           font-weight: $normalWeight;
-          background: var(--light);
-          border-top-right-radius: 5px;
-          border-bottom-right-radius: 5px;
           overflow-y: auto;
-          padding: 1rem;
+          padding: 0 2rem;
 
           & .preview-inner {
             margin: 0 auto;
@@ -160,6 +161,7 @@
           overflow-y: auto;
 
           & .result-card {
+            overflow: hidden;
             padding: 1em;
             cursor: pointer;
             transition: background 0.2s ease;
@@ -175,7 +177,6 @@
             margin: 0;
             text-transform: none;
             text-align: left;
-            background: var(--light);
             outline: none;
             font-weight: inherit;
 

quartz/styles/base.scss

@@ -26,7 +26,7 @@ section {
 }
 
 ::selection {
-  background: color-mix(in srgb, var(--tertiary) 60%, transparent);
+  background: color-mix(in srgb, var(--tertiary) 60%, rgba(255, 255, 255, 0));
   color: var(--darkgray);
 }