45 lines
2.1 KiB
Markdown
45 lines
2.1 KiB
Markdown
---
|
|
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.
|