diff --git a/app/components/post_gallery_component/post_gallery_component.html.erb b/app/components/post_gallery_component/post_gallery_component.html.erb index 6375023bb..1ee3a4e13 100644 --- a/app/components/post_gallery_component/post_gallery_component.html.erb +++ b/app/components/post_gallery_component/post_gallery_component.html.erb @@ -2,7 +2,7 @@ <% if posts.empty? %>

No posts found.

<% else %> -
+
<% posts.each do |post| -%> <% %><%= post -%> <% end -%> diff --git a/app/components/post_gallery_component/post_gallery_component.scss b/app/components/post_gallery_component/post_gallery_component.scss index cceed7d85..6f52c3cc7 100644 --- a/app/components/post_gallery_component/post_gallery_component.scss +++ b/app/components/post_gallery_component/post_gallery_component.scss @@ -1,6 +1,14 @@ +.post-gallery { + .post-preview-image { + max-width: 100%; + } +} + .post-gallery-inline { - overflow-x: auto; - white-space: nowrap; + .posts-container { + overflow-x: auto; + white-space: nowrap; + } article.post-preview { width: auto; @@ -12,13 +20,10 @@ } } -.post-gallery { +.post-gallery-grid { .posts-container { - place-items: center; - } - - .post-preview-image { - max-width: 100%; + display: grid; + gap: 0.5rem; } &.post-gallery-150 .posts-container { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }