---
task: Fix the bulk-apply "Apply" buttons on AddProductsToStore Step 2 (mobile layout broken)
cycles: 5
context: true
private: false
started: 2026-05-16T17:49:31Z
finished: 2026-05-16T17:49:35Z
---

## files
- resources/js/Pages/AddProductsToStore.vue [lines 303-332] — Step 2 bulk-apply card with broken input-group layout

## steps
1. In `AddProductsToStore.vue` at lines ~308-313 (price bulk-apply), replace `<div class="input-group">` with `<div class="d-flex gap-2 align-items-center">` and change the button class from `btn btn-primary rounded-end-pill` to `btn btn-primary rounded-pill flex-shrink-0`
2. In `AddProductsToStore.vue` at lines ~319-324 (availability bulk-apply), apply the identical replacement — `input-group` → `d-flex gap-2 align-items-center`, button class → `btn btn-primary rounded-pill flex-shrink-0`

## context
Bulk apply card (lines 303-332):
```html
<CardSimple class="mb-3">
    <div class="fw_6 mb-3">Bulk apply</div>
    <div class="row g-3 align-items-end">
        <div class="col-12 col-sm-5">
            <label class="form-label smallest text-muted mb-1">Set all prices (₱)</label>
            <div class="input-group">                                          <!-- CHANGE THIS -->
                <input v-model="bulkPrice" type="number" min="0" step="0.01" class="form-control"
                    placeholder="e.g. 50" />
                <button class="btn btn-primary rounded-end-pill" @click="applyBulkPrice">  <!-- AND THIS -->
                    Apply
                </button>
            </div>
        </div>
        <div class="col-12 col-sm-5">
            <label class="form-label smallest text-muted mb-1">Set all availability</label>
            <div class="input-group">                                          <!-- CHANGE THIS -->
                <input v-model="bulkAvailable" type="number" min="0" step="1" class="form-control"
                    placeholder="e.g. 100" />
                <button class="btn btn-primary rounded-end-pill" @click="applyBulkAvailable">  <!-- AND THIS -->
                    Apply
                </button>
            </div>
        </div>
        <div class="col-12 col-sm-2 d-flex align-items-end">
            <button class="btn btn-outline-secondary rounded-pill w-100" @click="backToPick">
                <i class="fas fa-arrow-left me-1"></i> Back
            </button>
        </div>
    </div>
</CardSimple>
```

Target (apply to both price and availability rows):
```html
<div class="d-flex gap-2 align-items-center">
    <input v-model="bulkPrice" type="number" min="0" step="0.01" class="form-control"
        placeholder="e.g. 50" />
    <button class="btn btn-primary rounded-pill flex-shrink-0" @click="applyBulkPrice">
        Apply
    </button>
</div>
```

## notes
- dictionary: ai-docs/dictionary.md
- linters: none detected
- constraints: mobile-first fix only — no backend changes, no new files, no route changes