josh/BarangaySystem
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
BarangaySystem/.claude/plans/a5e5578620a10c7aab0cd01c89592421-complete.md
Jonathan Sykes eb4a5731fb initial: bootstrap from BukidBountyApp base
2026-06-06 18:43:00 +08:00

2.1 KiB
Raw Permalink Blame History

task, cycles, context, private, started, finished
task cycles context private started finished
Fix Cancel button on Create Product (Store Owner) being clipped by the fixed bottom navigation bar 3 true false 2026-05-16T08:42:00Z 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.