fix: desktop sidebar layout and accessibility

frontend/src/style.test.ts

@@ -2,11 +2,12 @@ import { readFileSync } from 'node:fs'
 import { describe, expect, it } from 'vitest'
 
 const css = readFileSync('src/style.css', 'utf8')
+const app = readFileSync('src/App.vue', 'utf8')
 
 describe('mobile navigation styles', () => {
   it('keeps the mobile More sheet visible when it is rendered', () => {
     expect(css).not.toContain('.more-mask{display:none}')
-    expect(css).toContain('@media(max-width:800px){.shell')
+    expect(css).toContain('@media(max-width:930px){.shell')
     expect(css).toContain('.more-mask{position:fixed;z-index:45;')
   })
 })
@@ -30,8 +31,33 @@ describe('mobile touch targets', () => {
 })
 
 describe('sidebar layout', () => {
+  it('switches to the compact layout before the desktop grid can be clipped', () => {
+    expect(css).toContain('@media(max-width:930px){.shell')
+    expect(css).not.toContain('@media(max-width:800px){.shell')
+  })
+
   it('lets the list area flex and scroll inside the fixed sidebar', () => {
     expect(css).toContain('.folders{flex:1;min-height:0;')
     expect(css).toContain('overflow-y:auto')
   })
+
+  it('uses valid sibling controls for sidebar rows', () => {
+    expect(app).toContain('class="list-row"')
+    expect(app).toContain('class="list-row-main"')
+    expect(app).not.toMatch(/<button[^>]*class="list-row"/)
+  })
+
+  it('reveals row actions for pointer and keyboard focus without reserving desktop width', () => {
+    expect(css).toContain('.folder-row:hover .row-actions,.folder-row:focus-within .row-actions,.list-row:hover .row-actions,.list-row:focus-within .row-actions')
+    expect(css).toContain('.row-actions{display:flex;position:absolute;right:0;opacity:0;pointer-events:none;')
+  })
+
+  it('exposes full list and folder names to assistive labels and native tooltips', () => {
+    expect(app).toContain(':title="folder.name" :aria-label="folder.name"')
+    expect(app).toContain(':title="list.name" :aria-label="list.name"')
+  })
+
+  it('styles archived rows through the new list-row-main structure', () => {
+    expect(css).toContain('.archived-row .list-row-main>svg{color:#c9a45c}')
+  })
 })