From fbf3597984cfc6543f74dd53ea0663ceca6c6c2c Mon Sep 17 00:00:00 2001
From: mace <safemind@posteo.net>
Date: Sat, 13 Jun 2026 11:48:45 +0200
Subject: [PATCH] improve desktop readable for article view

---
 .gitignore                      |  1 +
 vue/src/components/RssFeeds.vue | 15 +++++++++++++++
 2 files changed, 16 insertions(+)

diff --git a/.gitignore b/.gitignore
index 07599d8..b3ae1c1 100755
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,4 @@
 .claude
 CLAUDE.md
 LEARNINGS.md
+PLAN.md
diff --git a/vue/src/components/RssFeeds.vue b/vue/src/components/RssFeeds.vue
index 114cce0..1a20dca 100644
--- a/vue/src/components/RssFeeds.vue
+++ b/vue/src/components/RssFeeds.vue
@@ -440,6 +440,21 @@ onMounted(async () => {
   transform: none;
 }
 
+/* On desktop the viewport is much wider than the article column, so the
+   full-bleed 100vw treatment above would blow images up far beyond their
+   natural resolution. Keep them at natural size, centered in the text. */
+@media (min-width: 720px) {
+  .article-feature__content--readable :deep(img),
+  .article-feature__content--readable :deep(video) {
+    display: block;
+    width: auto;
+    max-width: 100%;
+    height: auto;
+    margin: 1.5em auto;
+    transform: none;
+  }
+}
+
 .article-feature__content :deep(a) {
   color: var(--color-accent);
   text-decoration-color: var(--color-accent-hover);