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

CODEX - Fixed Clipping of the menues in Melodies List

Browse Source
This commit is contained in:
Vasileios Kousaridas
2026-02-23 12:05:11 +02:00
parent 9195f143a2
commit 342fc06ce7
1 changed files with 31 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -243,6 +243,7 @@ function buildOfflineCppCode(rows) {
export default function MelodyList() {
const [melodies, setMelodies] = useState([]);
const [total, setTotal] = useState(0);
const [allMelodyCount, setAllMelodyCount] = useState(0);
const [loading, setLoading] = useState(true);
const [error, setError] = useState("");
const [search, setSearch] = useState("");
@@ -317,9 +318,13 @@ export default function MelodyList() {
if (toneFilter) params.set("tone", toneFilter);
if (statusFilter) params.set("status", statusFilter);
const qs = params.toString();
const data = await api.get(`/melodies${qs ? `?${qs}` : ""}`);
const [data, allData] = await Promise.all([
api.get(`/melodies${qs ? `?${qs}` : ""}`),
api.get("/melodies"),
]);
setMelodies(data.melodies || []);
setTotal(data.total || 0);
setAllMelodyCount(allData.total || (allData.melodies || []).length || 0);
} catch (err) {
setError(err.message);
} finally {
@@ -371,18 +376,20 @@ export default function MelodyList() {
: null;
const source = built?.binary_url ? "Archetype" : (url ? "Melody URL" : null);
const filename = (() => {
if (!url) return null;
if (built?.pid) return `${built.pid}.bsm`;
if (row?.pid) return `${row.pid}.bsm`;
if (url) {
try {
const parsed = new URL(url, window.location.origin);
const path = decodeURIComponent(parsed.pathname || "");
const parts = path.split("/");
const name = parts[parts.length - 1];
if (name) return name;
if (name && name.toLowerCase().endsWith(".bsm")) return name;
} catch {
// fallback below
}
if (built?.pid) return `${built.pid}.bsm`;
return row?.pid ? `${row.pid}.bsm` : "melody.bsm";
}
return "melody.bsm";
})();
return { url, filename, source, built };
};
@@ -951,8 +958,9 @@ 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 overflow-x-hidden">
<div className="flex items-center justify-between mb-6 w-full">
<div className="w-full min-w-0 max-w-full" style={{ overflowX: "clip" }}>
<div className="w-full max-w-full overflow-x-hidden">
<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 && (
<button
@@ -965,12 +973,12 @@ export default function MelodyList() {
)}
</div>
<div className="mb-4 space-y-3 w-full">
<div className="mb-4 space-y-3 w-full min-w-0">
<SearchBar
onSearch={setSearch}
placeholder="Search by name, description, or tags..."
/>
<div className="flex flex-wrap gap-3 items-center w-full">
<div className="flex flex-wrap gap-3 items-center w-full min-w-0">
<select
value={typeFilter}
onChange={(e) => setTypeFilter(e.target.value)}
@@ -1139,12 +1147,12 @@ export default function MelodyList() {
)}
</div>
<div className="ml-auto flex items-center gap-3 flex-nowrap">
<div className="ml-auto flex items-center gap-3 flex-nowrap min-w-0">
<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} / ${melodies.length} Melodies | ${offlineTaggedCount} Melodies tagged for Offline`
: `Showing all (${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`}
</span>
</span>
{canEdit && (
@@ -1164,6 +1172,7 @@ export default function MelodyList() {
</div>
</div>
</div>
</div>
{error && (
<div
@@ -1193,14 +1202,14 @@ export default function MelodyList() {
</div>
) : (
<div
className="rounded-lg overflow-hidden border max-w-full"
className="rounded-lg border max-w-full"
style={{
backgroundColor: "var(--bg-card)",
borderColor: "var(--border-primary)",
}}
>
<div className="overflow-x-auto max-w-full">
<table className="w-full text-sm min-w-max">
<div className="w-full max-w-full overflow-x-auto">
<table className="text-sm min-w-max">
<thead>
<tr style={{ backgroundColor: "var(--bg-primary)", borderBottom: "1px solid var(--border-primary)" }}>
{activeColumns.map((col) => (