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
);
}
+1
View File
@@ -107,6 +107,7 @@ export const CONTRIBUTORS = [
'CachedImage / useCachedUrl: blob URL only for matching cacheKey, layout load reset on key change; fixes broken player cover flash on track switch (#606) (PR #695)',
'OpenSubsonic albumArtists in album header; track artists in player bar, mobile, mini + songToTrack (#552) (PR #696)',
'Search: filter search3 artist rows with zero albums (report: zunoz on Psysonic Discord) (PR #697)',
'Internet Radio: portal add/edit station modal to document.body — fixes clipped modal on empty library (report: voidboywannabe on Psysonic Discord) (PR #699)',
],
},
{
-1
View File
@@ -2,7 +2,6 @@ import { getInternetRadioStations, createInternetRadioStation, updateInternetRad
import { buildCoverArtUrl, coverArtCacheKey } from '../api/subsonicStreamUrl';
import { type InternetRadioStation, type RadioBrowserStation, RADIO_PAGE_SIZE } from '../api/subsonicTypes';
import React, { useEffect, useState, useRef, useMemo, useCallback } from 'react';
import { createPortal } from 'react-dom';
import { Cast, Plus, Trash2, X, Globe, Camera, Loader2, Search, Heart, Check } from 'lucide-react';
import { useDragSource, useDragDrop } from '../contexts/DragDropContext';
import { usePlayerStore } from '../store/playerStore';