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