diff --git a/app/assets/stylesheets/bar.css b/app/assets/stylesheets/bar.css index eb8ebef6d..b27c50731 100644 --- a/app/assets/stylesheets/bar.css +++ b/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); } } } diff --git a/app/assets/stylesheets/search.css b/app/assets/stylesheets/search.css index 39a755077..c09e02da5 100644 --- a/app/assets/stylesheets/search.css +++ b/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 { diff --git a/app/views/bar/_bar.html.erb b/app/views/bar/_bar.html.erb index e0c88248a..623fc15c4 100644 --- a/app/views/bar/_bar.html.erb +++ b/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 %>