fix(client): stop compact detail covers shrinking

Keep the observer-derived width cap scoped to the fixed-height wide layout so compact covers cannot feed their own height back into width.

Fixes #1279

client/src/features/book/components/detail/tabs/DetailsTab.vue

@@ -1203,7 +1203,10 @@ watch(
           class="w-28 shrink-0 sm:w-36 @min-[46rem]/book-detail:flex @min-[46rem]/book-detail:h-full @min-[46rem]/book-detail:w-full @min-[46rem]/book-detail:items-center @min-[46rem]/book-detail:justify-center"
           :class="hasCover && coverLoaded && !coverFailed ? 'cursor-zoom-in' : ''"
         >
-          <div class="w-full @min-[46rem]/book-detail:max-h-full" :style="{ maxWidth: coverMaxWidth }">
+          <div
+            class="w-full @min-[46rem]/book-detail:max-h-full @min-[46rem]/book-detail:max-w-[var(--detail-cover-max-width)]"
+            :style="{ '--detail-cover-max-width': coverMaxWidth }"
+          >
             <BookCoverSurface
               class="book-cover-surface--spine-fitted group relative w-full overflow-hidden rounded-lg shadow-lg shadow-black/40"
               :disable-spine="isPrimaryAudio"

client/src/features/book/components/detail/tabs/__tests__/DetailsTab.spec.ts

@@ -109,6 +109,7 @@ const RouterLinkStub = defineComponent({
 })
 
 let mountedWrappers: Array<{ unmount: () => void }> = []
+let resizeObserverCallbacks: ResizeObserverCallback[] = []
 
 function mountDetails(book: BookDetail) {
   const wrapper = shallowMount(DetailsTab, {
@@ -147,6 +148,7 @@ describe('DetailsTab cover surface', () => {
   const { bookSpineOverlay, bookCoverDisplayMode } = useDisplaySettings()
 
   beforeEach(() => {
+    resizeObserverCallbacks = []
     mocks.api.mockReset()
     mocks.push.mockReset()
     mocks.hasPermission.mockReset()
@@ -174,6 +176,10 @@ describe('DetailsTab cover surface', () => {
     vi.stubGlobal(
       'ResizeObserver',
       class {
+        constructor(callback: ResizeObserverCallback) {
+          resizeObserverCallbacks.push(callback)
+        }
+
         observe() {}
         unobserve() {}
         disconnect() {}
@@ -224,6 +230,21 @@ describe('DetailsTab cover surface', () => {
     expect(surfaces.every((surface) => surface.attributes('style')?.includes('aspect-ratio: 2 / 1'))).toBe(true)
   })
 
+  it('only constrains cover width from the observed slot height in the wide layout', async () => {
+    const wrapper = mountDetails(makeBook())
+    await flushPromises()
+
+    const surface = wrapper.get('.book-cover-surface')
+    const frame = surface.element.parentElement as HTMLElement
+
+    resizeObserverCallbacks.at(-1)?.([{ contentRect: { height: 220 } } as ResizeObserverEntry], {} as ResizeObserver)
+    await flushPromises()
+
+    expect(frame.style.maxWidth).toBe('')
+    expect(frame.style.getPropertyValue('--detail-cover-max-width')).toBe('146px')
+    expect(frame.classList).toContain('@min-[46rem]/book-detail:max-w-[var(--detail-cover-max-width)]')
+  })
+
   it('forces spine overlay off for audiobook details covers', async () => {
     bookSpineOverlay.value = 'strong'