Fix mobile torrent table display logic

The mobile torrent table changes were not working correctly due to CSS
specificity and display logic issues.

Fixes:
1. Changed .torrent-meta display logic:
   - Before: display: none by default, then display: flex on mobile
   - After: display: flex by default, display: none !important on desktop
   - This ensures the metadata shows on mobile and is properly hidden on desktop

2. Fixed expanded row colspan:
   - Dynamically calculate colspan based on screen width
   - Mobile (≤768px): colspan = 2 (name + add columns)
   - Desktop (>768px): colspan = 4 (name + seed + size + add columns)
   - Prevents layout issues when expanding torrent names

Why the original didn't work:
- CSS specificity: 'display: none' as default was overriding mobile styles
- The @include mobile wasn't applying correctly due to cascade order
- Using @include desktop with !important ensures proper hiding

Result:
- Mobile: Shows torrent title with size/seeders on second line
- Desktop: Shows full 4-column table with separate columns
- Expanded rows now span correct number of columns on both layouts
This commit is contained in:
2026-02-27 18:37:38 +01:00
parent 73d72c634f
commit f63e10d28d

View File

@@ -108,7 +108,10 @@
expandedCol.dataset[scopedStyleDataVariable] = "";
expandedRow.className = "expanded";
expandedCol.innerText = text;
expandedCol.colSpan = 4;
// Colspan: 2 on mobile (name + add), 4 on desktop (name + seed + size + add)
const isMobile = window.innerWidth <= 768;
expandedCol.colSpan = isMobile ? 2 : 4;
expandedRow.appendChild(expandedCol);
tableRow.insertAdjacentElement("afterend", expandedRow);
@@ -244,15 +247,16 @@
}
.torrent-meta {
display: none; // Hidden on desktop, shown on mobile
font-size: 0.85rem;
color: var(--text-color-60);
@include mobile {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
// Hide on desktop
@include desktop {
display: none !important;
}
.meta-item {