kyuno/batchCooking
1
0
Fork 0
Code Issues 3 Pull requests Projects Releases 4 Packages Wiki Activity Actions

fix(layout): barre de navigation mobile en icônes seules (#105) #118

Merged
kyuno merged 1 commit from fix/mobile-bottom-nav-icons-only into main 2026-09-08 05:22:00 +02:00
Conversation 0 Commits 1 Files changed 2 +29 -10
kyuno commented 2026-09-08 04:50:44 +02:00
Owner
Copy link

Contexte

Closes #105.

Sur téléphone, l'onglet « Liste de courses » (16 caractères) passait sur 2 lignes dans un onglet à ~90 px alors que « Planning »/« Recettes »/« Plus » tenaient sur 1 ligne : son bloc icône+libellé centré (justify-content: center) était plus haut, donc son icône visiblement plus haute que les autres.

Changements

  • AppLayout.scss .app-bottom-nav : le .label est masqué visuellement (à la manière du rail desktop replié — position: absolute; clip; clip-path: inset(50%); …), pas retiré du DOM, donc chaque <NavLink>/bouton garde son nom accessible (un lecteur d'écran annonce toujours « Planning », « Liste de courses »…) sans aria-label qui dupliquerait la chaîne i18n. Icônes légèrement agrandies (1.375rem → 1.5rem) puisqu'elles sont désormais seules.

Tests

  • layout.cy.ts : l'assertion « le libellé de l'onglet est visible » devient « span.label est dans le DOM mais not.be.visible, l'icône svg visible » (même traitement que sidebar.cy.ts pour le rail replié). sidebar.cy.ts / nav desktop inchangés.
  • Local : pnpm lint + pnpm --filter web build OK ; layout.cy.ts + sidebar.cy.ts → 16/16.

🤖 Generated with Claude Code

## Contexte `Closes #105`. Sur téléphone, l'onglet « Liste de courses » (16 caractères) passait sur 2 lignes dans un onglet à ~90 px alors que « Planning »/« Recettes »/« Plus » tenaient sur 1 ligne : son bloc icône+libellé centré (`justify-content: center`) était plus haut, donc son icône visiblement plus haute que les autres. ## Changements - `AppLayout.scss` `.app-bottom-nav` : le `.label` est **masqué visuellement** (à la manière du rail desktop replié — `position: absolute; clip; clip-path: inset(50%); …`), pas retiré du DOM, donc chaque `<NavLink>`/bouton garde son nom accessible (un lecteur d'écran annonce toujours « Planning », « Liste de courses »…) sans `aria-label` qui dupliquerait la chaîne i18n. Icônes légèrement agrandies (1.375rem → 1.5rem) puisqu'elles sont désormais seules. ## Tests - `layout.cy.ts` : l'assertion « le libellé de l'onglet est visible » devient « `span.label` est dans le DOM mais `not.be.visible`, l'icône `svg` visible » (même traitement que `sidebar.cy.ts` pour le rail replié). `sidebar.cy.ts` / nav desktop inchangés. - Local : `pnpm lint` + `pnpm --filter web build` OK ; `layout.cy.ts` + `sidebar.cy.ts` → 16/16. 🤖 Generated with [Claude Code](https://claude.com/claude-code)
kyuno added the
Low
bug
planned
 labels 2026-09-08 04:50:44 +02:00
kyuno added 1 commit 2026-09-08 04:50:44 +02:00
fix(layout): barre de navigation mobile en icônes seules (#105)
All checks were successful
CI / lint (push) Successful in 4m37s
Details
CI / build (push) Successful in 3m17s
Details
CI / intent-service-test (push) Successful in 5m34s
Details
CI / e2e (push) Successful in 8m59s
Details
CI / test (push) Successful in 30m12s
Details
CI / build-android (push) Has been skipped
Details
e702e21296 
Sur téléphone, l'onglet « Liste de courses » (16 caractères) passait sur 2
lignes dans un onglet à ~90px alors que « Planning »/« Recettes »/« Plus »
tenaient sur 1 ligne : son bloc icône+libellé centré était plus haut, donc
son icône visiblement plus haute que les autres.

`AppLayout.scss` `.app-bottom-nav` : le `.label` est masqué visuellement (à
la manière du rail desktop replié — `position: absolute; clip; …`), pas
retiré du DOM, donc chaque `<NavLink>`/bouton garde son nom accessible (un
lecteur d'écran annonce toujours « Planning », « Liste de courses »…) sans
`aria-label` qui dupliquerait la chaîne i18n. Icônes légèrement agrandies
(1.375rem → 1.5rem) puisqu'elles sont désormais seules.

Tests : `layout.cy.ts` — l'onglet expose son `span.label` dans le DOM mais
`not.be.visible`, l'icône `svg` visible (mise à jour de l'assertion qui
attendait le libellé visible). `sidebar.cy.ts` / `planning-page.cy.ts`
(nav desktop) inchangés. Suite layout/sidebar/planning revérifiée, 27/27.

Closes #105

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
kyuno merged commit 1b96b891db into main 2026-09-08 05:22:00 +02:00
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels   
High

   
Low

   
Medium

   
bug

Something is not working

  
duplicate

This issue or pull request already exists

  
enhancement

New feature

  
help wanted

Need some help

  
invalid

Something is wrong

  
planned

   
question

More information is needed

  
to plan

   
wontfix

This won't be fixed

No labels
High
Low
Medium
bug
duplicate
enhancement
help wanted
invalid
planned
question
to plan
wontfix
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: kyuno/batchCooking#118
No description provided.
Delete branch "fix/mobile-bottom-nav-icons-only"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?