fix(web): панели не уезжают за экран (правка после замечания линтера)
Позиционирование переведено на прямые стили и класс `gl-anchored-panel`: React не управляет left/top/max-height, поэтому повторный рендер не сбрасывает раскладку, а `data-placement` задаёт направление анимации (панель может развернуться вниз, если сверху мало места). Линтер по хукам чистый, 289 тестов зелёные.
This commit is contained in:
@@ -54,7 +54,7 @@ export function Menu({
|
||||
}: MenuProps) {
|
||||
const panelRef = useRef<HTMLDivElement | null>(null);
|
||||
const fallbackAnchor = useRef<HTMLElement | null>(null);
|
||||
const position = useAnchoredPosition({
|
||||
useAnchoredPosition({
|
||||
open,
|
||||
anchorRef: anchorRef ?? fallbackAnchor,
|
||||
panelRef,
|
||||
@@ -164,16 +164,8 @@ export function Menu({
|
||||
aria-label={label}
|
||||
onKeyDown={onKeyDown}
|
||||
data-testid="menu-panel"
|
||||
style={{
|
||||
position: 'fixed',
|
||||
left: position?.left ?? -9999,
|
||||
top: position?.top ?? -9999,
|
||||
maxHeight: position?.maxHeight,
|
||||
visibility: position === null ? 'hidden' : 'visible',
|
||||
}}
|
||||
className={`z-40 flex min-w-56 flex-col overflow-hidden rounded-[var(--radius-md)] border border-border/60 bg-surface-2 shadow-[var(--shadow-3)] ${
|
||||
position?.placement === 'bottom' ? 'gl-popover-down' : 'gl-popover'
|
||||
} ${className}`}
|
||||
data-placement={placement}
|
||||
className={`gl-anchored-panel flex min-w-56 flex-col overflow-hidden rounded-[var(--radius-md)] border border-border/60 bg-surface-2 shadow-[var(--shadow-3)] ${className}`}
|
||||
>
|
||||
<div className="gl-composer-scroll min-h-0 flex-1 overflow-y-auto p-1">{children}</div>
|
||||
</div>
|
||||
|
||||
@@ -36,7 +36,7 @@ export function Popover({
|
||||
}: PopoverProps) {
|
||||
const panelRef = useRef<HTMLDivElement | null>(null);
|
||||
const fallbackAnchor = useRef<HTMLElement | null>(null);
|
||||
const position = useAnchoredPosition({
|
||||
useAnchoredPosition({
|
||||
open,
|
||||
anchorRef: anchorRef ?? fallbackAnchor,
|
||||
panelRef,
|
||||
@@ -100,16 +100,8 @@ export function Popover({
|
||||
role="dialog"
|
||||
aria-label={label}
|
||||
data-testid="popover-panel"
|
||||
style={{
|
||||
position: 'fixed',
|
||||
left: position?.left ?? -9999,
|
||||
top: position?.top ?? -9999,
|
||||
maxHeight: position?.maxHeight,
|
||||
visibility: position === null ? 'hidden' : 'visible',
|
||||
}}
|
||||
className={`z-40 flex flex-col overflow-hidden rounded-[var(--radius-md)] border border-border/60 bg-surface-2 shadow-[var(--shadow-3)] ${
|
||||
position?.placement === 'bottom' ? 'gl-popover-down' : 'gl-popover'
|
||||
} w-64 ${className}`}
|
||||
data-placement={placement}
|
||||
className={`gl-anchored-panel flex flex-col overflow-hidden rounded-[var(--radius-md)] border border-border/60 bg-surface-2 shadow-[var(--shadow-3)] w-64 ${className}`}
|
||||
>
|
||||
{/* Содержимое прокручивается: иначе при нехватке места не дотянуться
|
||||
до слайдера громкости (жалоба пользователя). */}
|
||||
|
||||
Reference in New Issue
Block a user