fix(radio): portal add/edit station modal to avoid clipping (#699)

* fix(radio): portal add/edit station modal to document.body

* docs: changelog and credits for radio edit modal portal (PR #699)
This commit is contained in:
cucadmuh
2026-05-14 22:26:44 +03:00
committed by GitHub
parent d94e5c75b3
commit f054fe425c
4 changed files with 13 additions and 3 deletions
@@ -1,4 +1,5 @@
import React, { useRef, useState } from 'react';
import { createPortal } from 'react-dom';
import { useTranslation } from 'react-i18next';
import { Camera, Cast, Loader2, X } from 'lucide-react';
import { buildCoverArtUrl, coverArtCacheKey } from '../../api/subsonicStreamUrl';
@@ -62,7 +63,9 @@ export default function RadioEditModal({ station, onClose, onSave }: RadioEditMo
if (e.target === e.currentTarget) onClose();
};
return (
/* Portal to document.body: nested .content-body uses contain:paint — in-tree
* modals are clipped when the station list is empty (short layout). Same pattern as RadioDirectoryModal. */
return createPortal(
<div className="modal-overlay" style={{ alignItems: 'center', paddingTop: 0, overflowY: 'auto' }} onClick={handleOverlayClick}>
<div
className="modal-content"
@@ -158,6 +161,7 @@ export default function RadioEditModal({ station, onClose, onSave }: RadioEditMo
</button>
</div>
</div>
</div>
</div>,
document.body
);
}