---
task: Fix Cancel button on Create Product (Store Owner) being clipped by the fixed bottom navigation bar
cycles: 3
context: true
private: false
started: 2026-05-16T08:42:00Z
finished: 2026-05-16T08:42:30Z
---

## files
- resources/js/Pages/CreateProductStoreOwner.vue [lines 422-424, 500-511, 722-724] — root element uses `pb-5` (48px) which is insufficient to clear the fixed BottomNav; Cancel button in STEP.PICK is obscured
- resources/js/Pages/Core/Fragments/BottomNav.vue [lines 59-73] — fixed bottom bar with `padding: 10px 0 env(safe-area-inset-bottom, 10px)`; total rendered height is ~60-70px plus safe-area inset

## steps
1. In `CreateProductStoreOwner.vue` line 423, change the root `<div class="csop-page pb-5">` bottom padding to clear the fixed BottomNav. Replace `pb-5` with a scoped CSS class that sets `padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px))` so content is never obscured on any device.
2. Add that scoped style rule to the `<style scoped>` block at the bottom of the file (after the existing `.csop-page` implicit styles). Target `.csop-page { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }` — remove `pb-5` from the class attribute at the same time.
3. Verify all five steps (PICK, NEW_GLOBAL, DESCRIPTION, ASSIGN_STORES, PER_STORE) still have their bottom nav-bar / button rows visible; they all sit inside the same `.csop-page` root, so the padding fix covers all steps.

## context
```
// CreateProductStoreOwner.vue:422-424
<template>
  <div class="csop-page pb-5">   ← pb-5 = 48px; not enough to clear ~65px BottomNav

// STEP.PICK Cancel button block: lines 506-510
<div class="text-center mt-3">
  <button class="btn-text" @click="navigate({ page: 'Home' })">
    <i class="fas fa-chevron-left me-2"></i> Cancel
  </button>
</div>

// BottomNav.vue:59-73 — fixed bar
.bottom-navigation-bar {
  position: fixed;
  bottom: 0;
  padding: 10px 0 env(safe-area-inset-bottom, 10px);
  ...
}
```

## notes
- dictionary: ai-docs/dictionary.md
- linters: none
- constraints: Do NOT add `bg-white` or `bg-light` to the page. Do NOT hardcode dark-mode overrides for the padding rule — padding does not need theme overrides.