From 83fdb464afbfe91d003d0d6e4bcf72e1977605a3 Mon Sep 17 00:00:00 2001
From: mace <safemind@posteo.net>
Date: Mon, 8 Jun 2026 16:59:30 +0200
Subject: [PATCH] fix card layout

---
 vue/src/components/RssFeeds.vue               | 40 ++++++++-----------
 vue/src/components/__tests__/RssFeeds.spec.js | 13 +++---
 2 files changed, 24 insertions(+), 29 deletions(-)

diff --git a/vue/src/components/RssFeeds.vue b/vue/src/components/RssFeeds.vue
index 49ac2bf..dbe2156 100644
--- a/vue/src/components/RssFeeds.vue
+++ b/vue/src/components/RssFeeds.vue
@@ -50,7 +50,7 @@ onMounted(async () => {
           <p v-if="!feed.readable" class="feed-original-link">
             <a :href="feed.url" target="_blank" rel="noopener noreferrer">Read original article &#8599;</a>
           </p>
-          <p class="feed-content" :class="{ 'feed-content--clamped': layout === 'cards' && !feed.readable }" v-html='feed.content'></p>
+          <p class="feed-content" v-html='feed.content'></p>
         </div>
       </template>
     </div>
@@ -89,22 +89,20 @@ onMounted(async () => {
 </template>
 
 <style scoped>
-.article--cards {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
-  align-items: start;
-  gap: 1rem;
-}
-
+/* Plain vertical stack of bordered "cards" — deliberately not flex/grid, and
+   with no truncation/max-height: normal block flow lets each card grow to fit
+   its own full content (images included), with no cross-element interaction. */
 .article--cards .observe {
-  display: flex;
-  flex-direction: column;
   border: 1px solid var(--color-border);
   border-radius: 8px;
   overflow: hidden;
   background: var(--color-background-soft);
 }
 
+.article--cards .observe + .observe {
+  margin-top: 1rem;
+}
+
 .article--cards .feed-title {
   border-bottom: none;
 }
@@ -114,19 +112,15 @@ onMounted(async () => {
   padding: 0 1em 0.5em;
 }
 
-.article--cards .feed-content {
-  flex: 1;
-}
-
-.article--cards .feed-content--clamped {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 4;
-  overflow: hidden;
-}
-
-.article--cards .feed-content img {
-  display: none;
+/* `v-html` content isn't part of the component's render output, so it never
+   gets the scoped `data-v-*` attribute — `:deep()` is required for this rule
+   to actually reach the injected <img> tags (without it, the selector silently
+   never matches). Cap the height so a large article photo reads as a tidy
+   preview thumbnail; the card itself is left to grow to whatever height its
+   content (image included) naturally needs — no clamping, no max-height. */
+.article--cards .feed-content :deep(img) {
+  max-height: 220px;
+  width: auto;
 }
 
 .feed-original-link a {
diff --git a/vue/src/components/__tests__/RssFeeds.spec.js b/vue/src/components/__tests__/RssFeeds.spec.js
index 551729b..44ecbcd 100644
--- a/vue/src/components/__tests__/RssFeeds.spec.js
+++ b/vue/src/components/__tests__/RssFeeds.spec.js
@@ -100,7 +100,7 @@ describe('RssFeeds', () => {
     expect(wrapper.find('.article').classes()).toContain('article--cards')
   })
 
-  it('lets a card grow to fit the full article once its readable content has loaded', async () => {
+  it('shows the full article content in cards with no truncation, growing the card to fit', async () => {
     axios.get.mockResolvedValueOnce({
       data: {
         feeds: [
@@ -110,7 +110,7 @@ describe('RssFeeds', () => {
               {
                 id: 1,
                 title: 'Article one',
-                content: '<p>short summary</p>',
+                content: '<img src="https://example.test/photo.jpg" alt="photo"><br>short summary',
                 url: 'https://example.test/1',
                 timestamp: '2026-01-01',
               },
@@ -127,14 +127,15 @@ describe('RssFeeds', () => {
     const wrapper = mount(RssFeeds)
     await flushPromises()
 
-    // Clamped to a fixed number of lines while only the short summary is shown...
-    expect(wrapper.find('.feed-content').classes()).toContain('feed-content--clamped')
+    // Preview images are shown (not hidden/truncated) and the snippet isn't clamped.
+    expect(wrapper.find('.feed-content img').exists()).toBe(true)
+    expect(wrapper.find('.feed-content').classes()).not.toContain('feed-content--clamped')
+    expect(wrapper.text()).toContain('short summary')
 
     await wrapper.find('.feed-title').trigger('click')
     await flushPromises()
 
-    // ...but allowed to grow once the user has loaded the full readable article.
-    expect(wrapper.find('.feed-content').classes()).not.toContain('feed-content--clamped')
+    expect(wrapper.text()).toContain('full text')
   })
 
   it('sorts articles by date across feeds, newest first', async () => {