Tidy search results, make it scrollable

app/assets/stylesheets/bar.css

@@ -26,12 +26,12 @@
     inline-size: 100vw;
     inset: auto 0 0 0;
     max-inline-size: 100vw;
-    padding-block-end: calc(var(--footer-height) - var(--block-space-half));
+    margin-block-end: calc(var(--footer-height) - 0.5rem);
     position: fixed;
     z-index: -1;
 
-    &::backdrop {
-      /* background-color: oklch(var(--lch-black) / 50%); */
+    @media (prefers-color-scheme: dark) {
+      border-block: 1px solid var(--color-ink-lighter);
     }
   }
 }

app/assets/stylesheets/search.css

@@ -2,14 +2,13 @@
   .search {
     --gap: 4vmin;
 
-    display: grid;
+    display: flex;
+    flex-direction: column;
     gap: var(--gap);
-    max-inline-size: 960px;
     margin-inline: auto;
-
-    @media (min-width: 640px) {
-      grid-template-columns: 2fr 1fr;
-    }
+    max-block-size: 100%;
+    overflow-y: auto;
+    padding: var(--block-space) calc(var(--block-space-double) + var(--btn-size));
   }
 
   /* Form
@@ -53,7 +52,7 @@
     display: flex;
     inset: 0 0 auto 0;
     justify-content: flex-end;
-    padding: var(--block-space-half);
+    padding: var(--block-space-half) var(--block-space);
     position: absolute;
   }
 
@@ -67,12 +66,7 @@
   }
 
   .search__results {
-    /* Full-width when there isn't a search history */
-    @media (min-width: 640px) {
-      &:not(:has(+ .search__history li)) {
-        grid-column: 1 / -1;
-      }
-    }
+
   }
 
   .search__empty {

app/views/bar/_bar.html.erb

@@ -38,11 +38,10 @@
 
   <%= tag.dialog \
     id: "bar-modal",
-    class: "bar__modal shadow",
+    class: "bar__modal",
     data: {
       controller: "dialog",
       dialog_target: "dialog",
-      dialog_modal_value: "false",
       action: "keydown.esc->bar#reset" } do %>
     <%= turbo_frame_tag "bar-content", data: { bar_target: "turboFrame" } %>
   <% end %>