diff --git a/frontend/src/components/EditModeOverlay.css b/frontend/src/components/EditModeOverlay.css index 3df00d2..16f77ff 100644 --- a/frontend/src/components/EditModeOverlay.css +++ b/frontend/src/components/EditModeOverlay.css @@ -58,6 +58,10 @@ .edit-mode-toast--contrib .edit-mode-toast-short { display: inline; } } +/* « Terminé » dans la barre du bas fait déjà sortir de l'édition : pas de seconde croix dans la bulle (Patch, 27/10) */ +body:has(.nav-annot-exit) .edit-mode-toast-close { display: none; } +body:has(.nav-annot-exit) .edit-mode-toast:not(.edit-mode-toast--with-submit) { padding-right: 16px; } + /* Téléphone : le texte de l'éditeur se coupait en « Vous modifi… » à côté du bouton, qui suffit à lui seul. L'invité garde son texte court, qui tient sur une ligne. */ @media (max-width: 480px) { diff --git a/frontend/src/components/Galaxy.css b/frontend/src/components/Galaxy.css index ba1f5f9..1f5606d 100644 --- a/frontend/src/components/Galaxy.css +++ b/frontend/src/components/Galaxy.css @@ -110,7 +110,10 @@ @media (max-width: 768px) { .family-tabs { top: 10px; left: 10px; max-width: calc(100vw - 84px); } - .family-tabs--lowered { top: 64px; max-width: calc(100vw - 20px); } + /* Le message « Vous proposez » est sous la première ligne sur téléphone (EditModeOverlay.css, top: 68px) : + la barre reste en haut, à côté de la loupe, au lieu de passer dessous (Patch, 27/10) */ + .family-tabs--lowered { top: 10px; max-width: calc(100vw - 84px); } + body:has(.edit-mode-toast):has(.expandable-search.expanded) .family-tabs { top: 124px; } /* Recherche ouverte sur téléphone : elle prend toute la largeur du haut, la barre passe dessous */ body:has(.expandable-search.expanded) .family-tabs { top: 80px; max-width: calc(100vw - 20px); } .family-tab { font-size: 14px; padding: 6px 12px 7px; } diff --git a/frontend/src/components/navbar/ContextualNavbar.css b/frontend/src/components/navbar/ContextualNavbar.css index 82cc466..908c1cb 100644 --- a/frontend/src/components/navbar/ContextualNavbar.css +++ b/frontend/src/components/navbar/ContextualNavbar.css @@ -180,29 +180,31 @@ } /* --- Exit edit mode button --- */ +/* Même hauteur que le « + » à côté (46 px), zone de tap comprise (Patch, 27/10) */ .nav-annot-exit { - width: 36px; - height: 36px; + height: 46px; + padding: 0 18px; display: flex; align-items: center; justify-content: center; border: none; - border-radius: 50%; + border-radius: 999px; background: rgba(42, 38, 34, 0.08); - color: #6B645D; + color: #2A2622; + font: 500 15px/1 var(--pz-sans); + white-space: nowrap; cursor: pointer; - transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1); + transition: background-color 160ms ease, transform 140ms var(--pz-ease); flex-shrink: 0; + -webkit-tap-highlight-color: transparent; } -.nav-annot-exit:hover { - background: rgba(42, 38, 34, 0.16); - color: #2A2622; - transform: rotate(90deg); +@media (hover: hover) and (pointer: fine) { + .nav-annot-exit:hover { background: rgba(42, 38, 34, 0.14); } } .nav-annot-exit:active { - transform: rotate(90deg) scale(0.88); + transform: scale(0.97); } /* --- Separator --- */ diff --git a/frontend/src/components/navbar/ContextualNavbar.jsx b/frontend/src/components/navbar/ContextualNavbar.jsx index 2ac2a6f..a824f39 100644 --- a/frontend/src/components/navbar/ContextualNavbar.jsx +++ b/frontend/src/components/navbar/ContextualNavbar.jsx @@ -1,6 +1,6 @@ import { useState, useRef, useEffect } from 'react' import { - Brush, ImagePlus, Plus, UserPlus, User, X, MousePointer2, Pencil, Type, Star, Trash2, Image, ArrowLeft, Search, + Brush, ImagePlus, Plus, UserPlus, User, MousePointer2, Pencil, Type, Star, Trash2, Image, ArrowLeft, Search, } from 'lucide-react' import { NavMenu, NavMenuGroup, NavMenuItem } from './NavMenu' import AvatarMenu from './AvatarMenu' @@ -292,13 +292,14 @@ function ContextualNavbar({