CODEX - Fixed Clipping of the menues in Melodies List

frontend/src/melodies/MelodyList.jsx

@@ -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="w-full min-w-0 max-w-full" style={{ overflowX: "clip" }}>
-      <div className="flex items-center justify-between mb-6 w-full">
+      <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`
+                  ? `Filtered - Showing ${displayRows.length} / ${allMelodyCount || melodies.length} Melodies | ${offlineTaggedCount} Melodies tagged for Offline`
-                  : `Showing all (${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">
+          <div className="w-full max-w-full overflow-x-auto">
-            <table className="w-full text-sm min-w-max">
+            <table className="text-sm min-w-max">
               <thead>
                 <tr style={{ backgroundColor: "var(--bg-primary)", borderBottom: "1px solid var(--border-primary)" }}>
                   {activeColumns.map((col) => (