diff --git a/app/assets/stylesheets/events.css b/app/assets/stylesheets/events.css index 49b193c16..067ef0c52 100644 --- a/app/assets/stylesheets/events.css +++ b/app/assets/stylesheets/events.css @@ -13,6 +13,7 @@ display: grid; gap: var(--grid-lines); justify-items: center; + margin: var(--grid-lines); padding: calc(var(--grid-lines) / 2); .event { @@ -47,9 +48,15 @@ border-radius: 0; display: flex; inline-size: 100%; - margin: var(--grid-lines); } .events__index { --row-gap: calc(4 * var(--block-space)); } + +.event-grid-column-title { + background-color: var(--color-bg); + inset-block-start: 0; + padding-block: var(--grid-lines); + z-index: 1; +} diff --git a/app/helpers/events_helper.rb b/app/helpers/events_helper.rb index 2d867e943..0a512e5d8 100644 --- a/app/helpers/events_helper.rb +++ b/app/helpers/events_helper.rb @@ -45,7 +45,7 @@ module EventsHelper def render_column_headers [ "Touched", "Discussed", "Added", "Popped" ].map do |header| - content_tag(:h3, header, class: "event-grid-column-title margin-block-end-half") + content_tag(:h3, header, class: "event-grid-column-title margin-block-end-half position-sticky") end.join.html_safe end end