card view, minor css bugfixes

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

@@ -15,13 +15,14 @@ describe('AppNav', () => {
     localStorage.setItem('user-id', '7')
     vi.clearAllMocks()
 
-    const { feeds, showMessage, message, showModal, viewMode, currentIndex } = useFeeds()
+    const { feeds, showMessage, message, showModal, viewMode, currentIndex, layout } = useFeeds()
     feeds.value = []
     showMessage.value = false
     message.value = ''
     showModal.value = false
     viewMode.value = 'list'
     currentIndex.value = 0
+    layout.value = 'list'
 
     router = createRouter({
       history: createWebHistory(),
@@ -104,6 +105,26 @@ describe('AppNav', () => {
     expect(wrapper.find('.app-nav__menu').exists()).toBe(false)
   })
 
+  it('switches the list layout from the menu and closes it', async () => {
+    const wrapper = await mountWithMenuOpen()
+    const { layout } = useFeeds()
+
+    const layoutButton = wrapper.findAll('.app-nav__menu-item').find(el => el.text() === 'Card layout')
+    await layoutButton.trigger('click')
+
+    expect(layout.value).toBe('cards')
+    expect(wrapper.find('.app-nav__menu').exists()).toBe(false)
+  })
+
+  it('hides the layout toggle while in article view', async () => {
+    const { viewMode } = useFeeds()
+    viewMode.value = 'article'
+
+    const wrapper = await mountWithMenuOpen()
+
+    expect(wrapper.findAll('.app-nav__menu-item').find(el => el.text().includes('layout'))).toBeUndefined()
+  })
+
   it('marks all articles as read from the menu after confirmation', async () => {
     const { feeds } = useFeeds()
     feeds.value = [