bonamin/bellsystems-cp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CODEX - Thrid Try for the fix

Browse Source
This commit is contained in:
Vasileios Kousaridas
2026-02-23 12:13:52 +02:00
parent 14a7250eef
commit d49a9636e5
1 changed files with 165 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/src/melodies/MelodyList.jsx
View File

@@ -958,8 +958,8 @@ export default function MelodyList() {
const selectClass = "px-3 py-2 rounded-md text-sm cursor-pointer border";
return (
<div className="w-full min-w-0 max-w-full" style={{ overflowX: "clip" }}>
<div className="w-full max-w-full overflow-x-hidden relative z-40">
<div className="w-full min-w-0 max-w-full overflow-hidden">
<div className="w-full min-w-0 relative" style={{ zIndex: 30 }}>
<div className="flex items-center justify-between mb-6 w-full min-w-0">
<h1 className="text-2xl font-bold" style={{ color: "var(--text-heading)" }}>Melodies</h1>
{canEdit && (
@@ -973,12 +973,13 @@ export default function MelodyList() {
)}
</div>
<div className="mb-4 space-y-3 w-full min-w-0">
<div className="mb-4 space-y-3 w-full min-w-0 relative" style={{ zIndex: 40 }}>
<SearchBar
onSearch={setSearch}
placeholder="Search by name, description, or tags..."
/>
<div className="flex flex-wrap gap-3 items-center w-full min-w-0">
<div className="w-full min-w-0 flex items-start justify-between gap-3 flex-wrap">
<div className="min-w-0 flex-1 flex flex-wrap gap-3 items-center">
<select
value={typeFilter}
onChange={(e) => setTypeFilter(e.target.value)}
@@ -1015,7 +1016,7 @@ export default function MelodyList() {
<option value="draft">Drafts</option>
</select>
<div className="relative z-50" ref={creatorPickerRef}>
<div className="relative" ref={creatorPickerRef} style={{ zIndex: 60 }}>
<button
type="button"
onClick={() => setShowCreatorPicker((prev) => !prev)}
@@ -1027,8 +1028,8 @@ export default function MelodyList() {
</button>
{showCreatorPicker && (
<div
className="absolute left-0 top-full mt-1 z-[80] rounded-lg shadow-lg py-2 w-64 border max-h-64 overflow-auto"
style={{ backgroundColor: "var(--bg-card)", borderColor: "var(--border-primary)" }}
className="absolute left-0 top-full mt-1 rounded-lg shadow-lg py-2 w-64 border max-h-64 overflow-auto"
style={{ backgroundColor: "var(--bg-card)", borderColor: "var(--border-primary)", zIndex: 9999 }}
>
{allCreators.length === 0 ? (
<p className="px-3 py-1.5 text-sm" style={{ color: "var(--text-muted)" }}>No creators found</p>
@@ -1077,8 +1078,7 @@ export default function MelodyList() {
</select>
)}
{/* Column visibility dropdown */}
<div className="relative z-50" ref={columnPickerRef}>
<div className="relative" ref={columnPickerRef} style={{ zIndex: 60 }}>
<button
type="button"
onClick={() => setShowColumnPicker((prev) => !prev)}
@@ -1095,10 +1095,11 @@ export default function MelodyList() {
</button>
{showColumnPicker && (
<div
className="absolute right-0 top-full mt-1 z-[80] rounded-lg shadow-lg py-2 w-56 border"
className="absolute right-0 top-full mt-1 rounded-lg shadow-lg py-2 w-56 border"
style={{
backgroundColor: "var(--bg-card)",
borderColor: "var(--border-primary)",
zIndex: 9999,
}}
>
{orderedColumnPickerColumns.map((col) => {
@@ -1146,15 +1147,14 @@ export default function MelodyList() {
</div>
)}
</div>
</div>
<div className="ml-auto flex items-center gap-3 flex-nowrap min-w-0">
<div className="flex items-center justify-end gap-3 shrink-0 flex-wrap ml-auto">
<span className="text-sm whitespace-nowrap" style={{ color: "var(--text-muted)" }}>
<span className="inline-block max-w-[48vw] overflow-hidden text-ellipsis align-bottom">
{hasAnyFilter
? `Filtered - Showing ${displayRows.length} / ${allMelodyCount || melodies.length} Melodies | ${offlineTaggedCount} Melodies tagged for Offline`
: `Showing all (${allMelodyCount || melodies.length}) Melodies | ${offlineTaggedCount} Melodies tagged for Offline`}
</span>
</span>
{canEdit && (
<button
type="button"
@@ -1209,7 +1209,7 @@ export default function MelodyList() {
}}
>
<div className="w-full max-w-full overflow-x-auto relative z-0">
<table className="w-full text-sm min-w-max">
<table className="w-full min-w-full text-sm">
<thead>
<tr style={{ backgroundColor: "var(--bg-primary)", borderBottom: "1px solid var(--border-primary)" }}>
{activeColumns.map((col) => (