padding for article view

Cargo.lock

@@ -2550,7 +2550,7 @@ dependencies = [
 
 [[package]]
 name = "rss-reader"
-version = "0.1.0"
+version = "0.9.1"
 dependencies = [
  "actix-cors",
  "actix-governor",

vue/src/assets/base.css

@@ -27,6 +27,8 @@
   --content-font-family: Merriweather, Georgia, 'Times New Roman', Times, serif;
   --headline-font-size-scale: 1;
   --content-font-size-scale: 1;
+  --content-text-align: left;
+  --content-padding: 1rem;
 
   --color-background: var(--vt-c-white);
   --color-background-soft: var(--vt-c-white-soft);

vue/src/assets/main.css

@@ -86,7 +86,8 @@ a,
 .feed-content {
   font-family: var(--content-font-family);
   font-size: calc(clamp(1rem, 3.5vw, 1.25rem) * var(--content-font-size-scale));
-  padding: 0 1em 1em;
+  text-align: var(--content-text-align);
+  padding: 0 var(--content-padding) 1em;
   overflow-wrap: break-word;
 }
 

vue/src/components/AdminSettings.vue

@@ -14,6 +14,13 @@ const {
   setContentSize,
   setHeadlineFont,
   setContentFont,
+  textAlignKey,
+  contentPadding,
+  TEXT_ALIGN_OPTIONS,
+  PADDING_STEPS,
+  PADDING_LABELS,
+  setTextAlign,
+  setContentPadding,
 } = useSettings()
 </script>
 
@@ -78,6 +85,34 @@ const {
         >{{ opt.label }}</option>
       </select>
     </section>
+
+    <section class="settings__section">
+      <h2 class="settings__section-title">Text Alignment</h2>
+      <div class="settings__strip">
+        <button
+          v-for="opt in TEXT_ALIGN_OPTIONS"
+          :key="opt.key"
+          class="settings__btn"
+          :class="{ 'settings__btn--active': textAlignKey === opt.key }"
+          type="button"
+          @click="setTextAlign(opt.key)"
+        >{{ opt.label }}</button>
+      </div>
+    </section>
+
+    <section class="settings__section">
+      <h2 class="settings__section-title">Content Padding</h2>
+      <div class="settings__strip">
+        <button
+          v-for="(step, i) in PADDING_STEPS"
+          :key="step"
+          class="settings__btn"
+          :class="{ 'settings__btn--active': contentPadding === step }"
+          type="button"
+          @click="setContentPadding(step)"
+        >{{ PADDING_LABELS[i] }}</button>
+      </div>
+    </section>
   </div>
 </template>
 

vue/src/components/AppNav.vue

@@ -11,6 +11,9 @@ const { sync, showModal, viewMode, toggleViewMode, layout, toggleLayout, markAll
 const headerRef = ref(null)
 
 onMounted(() => {
+  // Drives #app's padding-top / RssFeeds' scroll-margin-top so content below
+  // the fixed header isn't hidden behind it at scroll position 0. The header is
+  // a fixed size, so this is measured once on mount and never changes.
   const h = headerRef.value?.getBoundingClientRect().height ?? 0
   document.documentElement.style.setProperty('--app-nav-height', `${h}px`)
 })
@@ -123,6 +126,7 @@ function handleToggleLayout() {
   right: 0;
   z-index: 20;
   background: var(--color-background);
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
 }
 
 .app-nav__wrapper {
@@ -131,12 +135,12 @@ function handleToggleLayout() {
   align-items: center;
   justify-content: space-between;
   gap: 0.5rem;
-  padding: 0.75rem 1rem;
+  padding: 0.375rem 1rem;
 }
 
 .app-nav__title {
   font-weight: bold;
-  font-size: clamp(1.1rem, 4vw, 1.4rem);
+  font-size: clamp(0.95rem, 3.5vw, 1.1rem);
 }
 
 .app-nav__unread {
@@ -228,7 +232,7 @@ function handleToggleLayout() {
 
 @media (min-width: 768px) {
   .app-nav__wrapper {
-    padding: 1rem 2rem;
+    padding: 0.5rem 2rem;
   }
 }
 </style>

vue/src/components/RssFeeds.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, computed, nextTick, watch } from 'vue';
+import { onMounted, onBeforeUnmount, computed, nextTick, watch } from 'vue';
 import { useFeeds } from '@/composables/useFeeds';
 
 const {
@@ -14,6 +14,7 @@ const {
   fetchData,
   sync,
   getReadable,
+  disconnectObserver,
   setInitialLoad,
   showMessageForXSeconds,
 } = useFeeds()
@@ -74,6 +75,11 @@ async function shareUrl(url) {
   }
 }
 
+onBeforeUnmount(() => {
+  disconnectObserver()
+  setInitialLoad(false)
+})
+
 onMounted(async () => {
   setInitialLoad(false)
   await fetchData()
@@ -302,6 +308,7 @@ onMounted(async () => {
   display: flex;
   flex-direction: column;
   align-items: center;
+  padding-top: 1em;
   padding-bottom: 5rem;
 }
 
@@ -351,7 +358,8 @@ onMounted(async () => {
 }
 
 .article-feature__content {
-  padding: 0 1rem;
+  padding: 0 var(--content-padding);
+  text-align: var(--content-text-align);
   font-family: var(--content-font-family);
   font-size: calc(clamp(1rem, 3.5vw, 1.25rem) * var(--content-font-size-scale));
   line-height: 1.75;

vue/src/components/__tests__/AppNav.spec.js

@@ -1,4 +1,4 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
 import { mount, flushPromises } from '@vue/test-utils'
 import { createRouter, createWebHistory } from 'vue-router'
 import axios from 'axios'
@@ -44,15 +44,35 @@ describe('AppNav', () => {
     await router.isReady()
   })
 
+  // Unmount every AppNav mounted via mountNav() after each test so mounted
+  // instances (and their router/menu listeners) don't pile up across the file.
+  let mountedWrappers = []
+  function mountNav(options = { global: { plugins: [router] } }) {
+    const wrapper = mount(AppNav, options)
+    mountedWrappers.push(wrapper)
+    return wrapper
+  }
+
+  afterEach(() => {
+    for (const wrapper of mountedWrappers) {
+      try {
+        wrapper.unmount()
+      } catch {
+        // already unmounted by the test itself — fine
+      }
+    }
+    mountedWrappers = []
+  })
+
   async function mountWithMenuOpen() {
-    const wrapper = mount(AppNav, { global: { plugins: [router] } })
+    const wrapper = mountNav()
     await wrapper.find('.app-nav__hamburger').trigger('click')
     await flushPromises()
     return wrapper
   }
 
   it('toggles the menu open and closed via the hamburger button', async () => {
-    const wrapper = mount(AppNav, { global: { plugins: [router] } })
+    const wrapper = mountNav()
 
     expect(wrapper.find('.app-nav__menu').exists()).toBe(false)
 
@@ -164,7 +184,7 @@ describe('AppNav', () => {
       { id: 2, title: 'Article two', content: '', url: 'https://example.test/2', timestamp: '2026-01-02' },
     ]
 
-    const wrapper = mount(AppNav, { global: { plugins: [router] } })
+    const wrapper = mountNav()
     await flushPromises()
 
     expect(wrapper.find('.app-nav__title').text()).toContain('(2)')
@@ -177,14 +197,14 @@ describe('AppNav', () => {
       { id: 2, title: 'Article two', read: false, content: '', url: 'https://example.test/2', timestamp: '2026-01-02' },
     ]
 
-    const wrapper = mount(AppNav, { global: { plugins: [router] } })
+    const wrapper = mountNav()
     await flushPromises()
 
     expect(wrapper.find('.app-nav__title').text()).toContain('(1)')
   })
 
   it('hides the unread count when there are no articles', async () => {
-    const wrapper = mount(AppNav, { global: { plugins: [router] } })
+    const wrapper = mountNav()
     await flushPromises()
 
     expect(wrapper.find('.app-nav__unread').exists()).toBe(false)
@@ -208,4 +228,5 @@ describe('AppNav', () => {
 
     confirmSpy.mockRestore()
   })
+
 })

vue/src/composables/__tests__/useFeeds.spec.js

@@ -1,4 +1,5 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { flushPromises } from '@vue/test-utils'
 import axios from 'axios'
 import { useFeeds } from '../useFeeds'
 

vue/src/composables/useFeeds.js

@@ -134,12 +134,16 @@ async function getReadable(feed, index) {
     })
     // taz "Mehr zum Thema" related-articles teaser section.
     doc.querySelectorAll('#articleTeaser').forEach(el => el.remove())
-    // taz subsidiary magazine promo blocks (e.g. taz FUTURZWEI): the promo
+    // taz subsidiary magazine promo blocks (e.g. taz FUTURZWEI): either the
-    // <article> carries an aria-label containing "Abo".
+    // <article> itself or its direct <a> child carries an aria-label containing "Abo".
     doc.querySelectorAll('article[aria-label*="Abo"]').forEach(el => {
       const container = el.closest('section') ?? el
       container.remove()
     })
+    doc.querySelectorAll('article > a[aria-label*="Abo"]').forEach(el => {
+      const container = el.closest('section') ?? el.closest('article')
+      if (container) container.remove()
+    })
     const article = new Readability(doc).parse();
     if (!article) {
       showMessageForXSeconds('Could not extract readable content.', 5)
@@ -268,6 +272,13 @@ function handleIntersection(entries, topbarHeight = 0) {
   })
 }
 
+function disconnectObserver() {
+  if (observer) {
+    observer.disconnect()
+    observer = null
+  }
+}
+
 function setInitialLoad(value) {
   initialLoad = value
 }
@@ -375,6 +386,7 @@ export function useFeeds() {
     markAllRead,
     showMessageForXSeconds,
     setupIntersectionObserver,
+    disconnectObserver,
     setInitialLoad,
     handleIntersection,
   }

vue/src/composables/useSettings.js

@@ -19,10 +19,20 @@ const CONTENT_FONT_OPTIONS = [
 const SIZE_STEPS = [0.85, 1, 1.2, 1.45]
 const SIZE_LABELS = ['S', 'M', 'L', 'XL']
 
+const TEXT_ALIGN_OPTIONS = [
+  { key: 'left',    label: 'Left' },
+  { key: 'justify', label: 'Justified' },
+]
+
+const PADDING_STEPS  = [1, 0.5, 0.15]
+const PADDING_LABELS = ['Default', 'Compact', 'Minimal']
+
 const headlineSizeScale = ref(parseFloat(localStorage.getItem('s-headline-size') ?? '1'))
 const contentSizeScale  = ref(parseFloat(localStorage.getItem('s-content-size')  ?? '1'))
 const headlineFontKey   = ref(localStorage.getItem('s-headline-font') ?? 'default')
 const contentFontKey    = ref(localStorage.getItem('s-content-font')  ?? 'default')
+const textAlignKey      = ref(localStorage.getItem('s-text-align')    ?? 'left')
+const contentPadding    = ref(parseFloat(localStorage.getItem('s-content-padding') ?? '1'))
 
 function fontValue(options, key) {
   return (options.find(o => o.key === key) ?? options[0]).value
@@ -34,6 +44,8 @@ function applySettings() {
   s.setProperty('--content-font-size-scale',  contentSizeScale.value)
   s.setProperty('--headline-font-family',     fontValue(HEADLINE_FONT_OPTIONS, headlineFontKey.value))
   s.setProperty('--content-font-family',      fontValue(CONTENT_FONT_OPTIONS,  contentFontKey.value))
+  s.setProperty('--content-text-align',      textAlignKey.value)
+  s.setProperty('--content-padding',         contentPadding.value + 'rem')
 }
 
 function setHeadlineSize(scale) {
@@ -60,6 +72,18 @@ function setContentFont(key) {
   applySettings()
 }
 
+function setTextAlign(key) {
+  textAlignKey.value = key
+  localStorage.setItem('s-text-align', key)
+  applySettings()
+}
+
+function setContentPadding(step) {
+  contentPadding.value = step
+  localStorage.setItem('s-content-padding', step)
+  applySettings()
+}
+
 export function useSettings() {
   return {
     headlineSizeScale,
@@ -70,10 +94,17 @@ export function useSettings() {
     SIZE_LABELS,
     HEADLINE_FONT_OPTIONS,
     CONTENT_FONT_OPTIONS,
+    TEXT_ALIGN_OPTIONS,
+    PADDING_STEPS,
+    PADDING_LABELS,
     applySettings,
     setHeadlineSize,
     setContentSize,
     setHeadlineFont,
     setContentFont,
+    setTextAlign,
+    setContentPadding,
+    textAlignKey,
+    contentPadding,
   }
 }