From 02058e82fdd9a8ef639c542fd19eb749ea379e17 Mon Sep 17 00:00:00 2001
From: neon <18559658+neonsolstice@users.noreply.github.com>
Date: Sun, 9 Aug 2026 05:52:01 +0000
Subject: [PATCH] fix(series): stop the series name input collapsing on narrow
 screens

The membership row used a fixed grid whose non-name columns take about 326px, so the
minmax(0,1fr) name column shrank to zero in any container narrower than that. On phones,
and on tablets where the series field only gets half the form width, the input disappeared
behind the index and total boxes.

Lay the row out with flex wrapping instead: the name keeps a minimum width and the index,
total and row actions move to a second line when they no longer fit. Wide layouts render
exactly as before, and the reflow follows the container rather than a viewport breakpoint,
which is what the tablet case needs.

Closes #949
---
 .../detail/tabs/SeriesMembershipEditor.vue    | 116 +++++++++---------
 1 file changed, 57 insertions(+), 59 deletions(-)

diff --git a/client/src/features/book/components/detail/tabs/SeriesMembershipEditor.vue b/client/src/features/book/components/detail/tabs/SeriesMembershipEditor.vue
index 6991ccc5c..d4ec9c959 100644
--- a/client/src/features/book/components/detail/tabs/SeriesMembershipEditor.vue
+++ b/client/src/features/book/components/detail/tabs/SeriesMembershipEditor.vue
@@ -104,82 +104,80 @@ function moveMembership(index: number, offset: -1 | 1) {
 
 <template>
   <div class="flex flex-col gap-2">
-    <div
-      v-for="(membership, index) in visibleMemberships"
-      :key="getRowKey(index)"
-      class="grid grid-cols-[2rem_minmax(0,1fr)_5.5rem_5.5rem_auto] items-center gap-2"
-    >
+    <div v-for="(membership, index) in visibleMemberships" :key="getRowKey(index)" class="flex flex-wrap items-center gap-2">
       <button
         v-if="index === 0"
         type="button"
-        class="flex h-8 w-8 items-center justify-center rounded-md border border-input bg-background text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-50"
+        class="flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-input bg-background text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-50"
         :disabled="disabled"
         :title="t('book.detail.seriesMembership.addSeries')"
         @click="addMembership"
       >
         <Plus class="size-3.5" />
       </button>
-      <div v-else class="h-8 w-8" aria-hidden="true" />
+      <div v-else class="h-8 w-8 shrink-0" aria-hidden="true" />
 
       <InputWithSuggestions
         :model-value="membership.seriesName"
         :search-fn="searchFn"
         :disabled="disabled"
         :placeholder="t('book.detail.seriesMembership.seriesPlaceholder')"
-        :class="'h-8 w-full rounded-lg border border-input bg-background px-3 text-sm outline-none transition-shadow focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50'"
+        :class="'h-8 min-w-40 flex-1 rounded-lg border border-input bg-background px-3 text-sm outline-none transition-shadow focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50'"
         @update:model-value="updateSeriesName(index, $event)"
       />
-      <input
-        :value="membership.seriesIndex ?? ''"
-        type="number"
-        step="0.1"
-        min="0"
-        class="h-8 w-full rounded-lg border border-input bg-background px-2 text-sm outline-none transition-shadow focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
-        :disabled="disabled"
-        placeholder="#"
-        :aria-label="t('book.detail.seriesMembership.seriesIndexLabel')"
-        @input="updateSeriesIndex(index, $event)"
-      />
-      <input
-        :value="membership.expectedBookCount ?? ''"
-        type="number"
-        step="1"
-        min="1"
-        class="h-8 w-full rounded-lg border border-input bg-background px-2 text-sm outline-none transition-shadow focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
-        :disabled="disabled"
-        :placeholder="t('book.detail.seriesMembership.totalPlaceholder')"
-        :aria-label="t('book.detail.seriesMembership.totalLabel')"
-        :title="t('book.detail.seriesMembership.totalHint')"
-        @input="updateExpectedBookCount(index, $event)"
-      />
-      <div class="flex items-center gap-1">
-        <button
-          type="button"
-          class="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-40"
-          :disabled="disabled || index === 0"
-          :title="t('book.detail.seriesMembership.moveUp')"
-          @click="moveMembership(index, -1)"
-        >
-          <ArrowUp class="size-3.5" />
-        </button>
-        <button
-          type="button"
-          class="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-40"
-          :disabled="disabled || modelValue.length < 2 || index === visibleMemberships.length - 1"
-          :title="t('book.detail.seriesMembership.moveDown')"
-          @click="moveMembership(index, 1)"
-        >
-          <ArrowDown class="size-3.5" />
-        </button>
-        <button
-          type="button"
-          class="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive disabled:pointer-events-none disabled:opacity-40"
-          :disabled="disabled || modelValue.length === 0"
-          :title="t('book.detail.seriesMembership.removeSeries')"
-          @click="removeMembership(index)"
-        >
-          <Trash2 class="size-3.5" />
-        </button>
+      <div class="flex flex-wrap items-center gap-2">
+        <input
+          :value="membership.seriesIndex ?? ''"
+          type="number"
+          step="0.1"
+          min="0"
+          class="h-8 min-w-16 max-w-22 flex-1 rounded-lg border border-input bg-background px-2 text-sm outline-none transition-shadow focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+          :disabled="disabled"
+          placeholder="#"
+          :aria-label="t('book.detail.seriesMembership.seriesIndexLabel')"
+          @input="updateSeriesIndex(index, $event)"
+        />
+        <input
+          :value="membership.expectedBookCount ?? ''"
+          type="number"
+          step="1"
+          min="1"
+          class="h-8 min-w-16 max-w-22 flex-1 rounded-lg border border-input bg-background px-2 text-sm outline-none transition-shadow focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+          :disabled="disabled"
+          :placeholder="t('book.detail.seriesMembership.totalPlaceholder')"
+          :aria-label="t('book.detail.seriesMembership.totalLabel')"
+          :title="t('book.detail.seriesMembership.totalHint')"
+          @input="updateExpectedBookCount(index, $event)"
+        />
+        <div class="flex items-center gap-1">
+          <button
+            type="button"
+            class="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-40"
+            :disabled="disabled || index === 0"
+            :title="t('book.detail.seriesMembership.moveUp')"
+            @click="moveMembership(index, -1)"
+          >
+            <ArrowUp class="size-3.5" />
+          </button>
+          <button
+            type="button"
+            class="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-40"
+            :disabled="disabled || modelValue.length < 2 || index === visibleMemberships.length - 1"
+            :title="t('book.detail.seriesMembership.moveDown')"
+            @click="moveMembership(index, 1)"
+          >
+            <ArrowDown class="size-3.5" />
+          </button>
+          <button
+            type="button"
+            class="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive disabled:pointer-events-none disabled:opacity-40"
+            :disabled="disabled || modelValue.length === 0"
+            :title="t('book.detail.seriesMembership.removeSeries')"
+            @click="removeMembership(index)"
+          >
+            <Trash2 class="size-3.5" />
+          </button>
+        </div>
       </div>
     </div>
   </div>