Compatta archivio replay senza scroll orizzontale.

Riduce le colonne, impila dettagli e stato su due righe e usa date brevi per stare nel layout della pagina.

Co-authored-by: Cursor <cursoragent@cursor.com>

backend/app/views/layouts/marketing.html.erb

@@ -8,7 +8,7 @@
     <%= render "shared/meta_tags" %>
     <%= yield :head %>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer">
-    <link rel="stylesheet" href="/marketing.css?v=37">
+    <link rel="stylesheet" href="/marketing.css?v=38">
   </head>
   <body<% if MatchLiveTv.google_analytics_configured? %> data-ga-id="<%= MatchLiveTv.google_analytics_measurement_id %>"<% end %>>
     <%= render "shared/cookie_banner" %>

backend/app/views/public/club_recordings/index.html.erb

@@ -49,112 +49,100 @@
 
   <% if @recordings.any? %>
     <div class="card replay-archive__card">
-      <div class="replay-archive__table-wrap">
+      <table class="data replay-archive-table">
-        <table class="data replay-archive-table">
+        <thead>
-          <thead>
+          <tr>
+            <th class="replay-archive-table__col-thumb" scope="col"><span class="visually-hidden">Anteprima</span></th>
+            <th scope="col">Partita</th>
+            <th scope="col">Dettagli</th>
+            <th scope="col">Stato e visibilità</th>
+            <th class="replay-archive-table__col-actions" scope="col">Azioni</th>
+          </tr>
+        </thead>
+        <tbody>
+          <% @recordings.each do |rec| %>
+            <% ent = rec.team.entitlements %>
+            <% can_play = rec.ready? && rec.replay_url.present? %>
             <tr>
-              <th class="replay-archive-table__col-thumb" scope="col"><span class="visually-hidden">Anteprima</span></th>
+              <td class="replay-archive-table__col-thumb">
-              <th scope="col">Titolo</th>
+                <% if can_play %>
-              <th scope="col">Piattaforma</th>
+                  <%= link_to rec.replay_url, class: "replay-archive__thumb", target: "_blank", rel: "noopener", title: "Guarda replay" do %>
-              <th scope="col">Data</th>
+                    <% if rec.thumbnail_url %>
-              <th scope="col">Durata</th>
+                      <img src="<%= rec.thumbnail_url %>" alt="" class="replay-archive__thumb-img" width="80" height="45" loading="lazy">
-              <th scope="col">Views</th>
+                    <% else %>
-              <th scope="col">Scadenza</th>
+                      <span class="replay-archive__thumb-placeholder" aria-hidden="true">▶</span>
-              <th scope="col">Stato</th>
-              <th scope="col">Visibilità</th>
-              <th class="replay-archive-table__col-actions" scope="col">Azioni</th>
-            </tr>
-          </thead>
-          <tbody>
-            <% @recordings.each do |rec| %>
-              <% ent = rec.team.entitlements %>
-              <% can_play = rec.ready? && rec.replay_url.present? %>
-              <tr>
-                <td class="replay-archive-table__col-thumb">
-                  <% if can_play %>
-                    <%= link_to rec.replay_url, class: "replay-archive__thumb", target: "_blank", rel: "noopener", title: "Guarda replay" do %>
-                      <% if rec.thumbnail_url %>
-                        <img src="<%= rec.thumbnail_url %>" alt="" class="replay-archive__thumb-img" width="96" height="54" loading="lazy">
-                      <% else %>
-                        <span class="replay-archive__thumb-placeholder" aria-hidden="true">▶</span>
-                      <% end %>
-                      <span class="replay-archive__play-btn" aria-hidden="true">▶</span>
                     <% end %>
-                  <% else %>
+                    <span class="replay-archive__play-btn" aria-hidden="true">▶</span>
-                    <div class="replay-archive__thumb replay-archive__thumb--static" title="<%= rec.status == "processing" ? "Elaborazione in corso" : "Replay non disponibile" %>">
-                      <% if rec.thumbnail_url %>
-                        <img src="<%= rec.thumbnail_url %>" alt="" class="replay-archive__thumb-img" width="96" height="54" loading="lazy">
-                      <% else %>
-                        <span class="replay-archive__thumb-placeholder" aria-hidden="true"><%= rec.status == "processing" ? "…" : "—" %></span>
-                      <% end %>
-                    </div>
                   <% end %>
-                </td>
+                <% else %>
-                <td class="replay-archive-table__col-title">
+                  <div class="replay-archive__thumb replay-archive__thumb--static" title="<%= rec.status == "processing" ? "Elaborazione in corso" : "Replay non disponibile" %>">
-                  <%= form_with url: public_club_recording_path(@club, rec), method: :patch, local: true, class: "replay-archive__title-form" do %>
+                    <% if rec.thumbnail_url %>
-                    <%= hidden_field_tag :team_id, @filter_team_id if @filter_team_id.present? %>
+                      <img src="<%= rec.thumbnail_url %>" alt="" class="replay-archive__thumb-img" width="80" height="45" loading="lazy">
-                    <%= hidden_field_tag :status, @filter_status if @filter_status.present? %>
+                    <% else %>
-                    <%= text_field_tag "recording[title]", rec.title_or_default, class: "replay-archive__title-input", onchange: "this.form.submit()" %>
+                      <span class="replay-archive__thumb-placeholder" aria-hidden="true"><%= rec.status == "processing" ? "…" : "—" %></span>
-                  <% end %>
-                </td>
-                <td><%= rec.source_platform_label %></td>
-                <td class="replay-archive-table__nowrap"><%= l_local(rec.recorded_at_or_fallback) %></td>
-                <td><%= rec.duration_label %></td>
-                <td><%= rec.view_count %></td>
-                <td class="replay-archive-table__nowrap">
-                  <% if rec.expires_at %>
-                    <%= l_local(rec.expires_at) %>
-                    <% if rec.days_until_expiry && rec.days_until_expiry.positive? %>
-                      <span class="muted replay-archive-table__sub">(<%= rec.days_until_expiry %> gg)</span>
-                    <% end %>
-                  <% else %>
-                    —
-                  <% end %>
-                </td>
-                <td>
-                  <span class="replay-archive__status replay-archive__status--<%= rec.status %>"><%= rec.status_label %></span>
-                </td>
-                <td class="replay-archive-table__col-privacy">
-                  <%= form_with url: public_club_recording_path(@club, rec), method: :patch, local: true, class: "replay-archive__privacy-form" do %>
-                    <%= hidden_field_tag :team_id, @filter_team_id if @filter_team_id.present? %>
-                    <%= hidden_field_tag :status, @filter_status if @filter_status.present? %>
-                    <%= select_tag "recording[privacy_status]",
-                        options_for_select([["Pubblico", "public"], ["Privato", "unlisted"]], rec.privacy_status),
-                        class: "replay-archive__privacy-select",
-                        onchange: "this.form.submit()" %>
-                  <% end %>
-                </td>
-                <td class="replay-archive-table__col-actions">
-                  <div class="replay-archive__actions">
-                    <% if can_play %>
-                      <%= link_to rec.replay_url, class: "replay-archive__action replay-archive__action--play", target: "_blank", rel: "noopener", title: "Guarda replay" do %>
-                        <span aria-hidden="true">▶</span>
-                        <span class="replay-archive__action-label">Play</span>
-                      <% end %>
-                    <% end %>
-                    <% if ent.phone_download_enabled? && rec.ready? %>
-                      <%= link_to "MP4", public_replay_download_path(rec.stream_session_id), class: "replay-archive__action replay-archive__action--secondary", title: "Scarica MP4" %>
-                    <% end %>
-                    <% if ent.premium_full? && ent.youtube_enabled? && rec.ready? && rec.youtube_video_id.blank? %>
-                      <%= button_to "YT", public_club_recording_publish_youtube_path(@club, rec), method: :post, class: "replay-archive__action replay-archive__action--secondary", title: "Pubblica su YouTube" %>
-                    <% elsif rec.youtube_watch_url %>
-                      <%= link_to "YT", rec.youtube_watch_url, class: "replay-archive__action replay-archive__action--secondary", target: "_blank", rel: "noopener", title: "Apri su YouTube" %>
-                    <% end %>
-                    <%= button_to public_club_recording_path(@club, rec), method: :delete,
-                        params: { team_id: @filter_team_id, status: @filter_status }.compact,
-                        class: "replay-archive__action replay-archive__action--danger",
-                        title: "Elimina replay",
-                        form: { data: { turbo_confirm: "Eliminare definitivamente questo replay? Verranno rimossi i file sul server e il video YouTube collegato." }, class: "replay-archive__action-form" } do %>
-                      <span aria-hidden="true">✕</span>
-                      <span class="replay-archive__action-label">Elimina</span>
                     <% end %>
                   </div>
-                </td>
+                <% end %>
-              </tr>
+              </td>
-            <% end %>
+              <td class="replay-archive-table__col-match">
-          </tbody>
+                <%= form_with url: public_club_recording_path(@club, rec), method: :patch, local: true, class: "replay-archive__title-form" do %>
-        </table>
+                  <%= hidden_field_tag :team_id, @filter_team_id if @filter_team_id.present? %>
-      </div>
+                  <%= hidden_field_tag :status, @filter_status if @filter_status.present? %>
+                  <%= text_field_tag "recording[title]", rec.title_or_default, class: "replay-archive__title-input", onchange: "this.form.submit()" %>
+                <% end %>
+                <span class="replay-archive__meta-line"><%= rec.source_platform_label %></span>
+              </td>
+              <td class="replay-archive-table__col-details">
+                <span class="replay-archive__detail-line">
+                  <%= l_local(rec.recorded_at_or_fallback, format: :short) %>
+                  · <%= rec.duration_label %>
+                  · <%= rec.view_count %> vis.
+                </span>
+                <span class="replay-archive__meta-line">
+                  <% if rec.expires_at %>
+                    Scade <%= l_local(rec.expires_at, format: :short) %>
+                    <% if rec.days_until_expiry && rec.days_until_expiry.positive? %>
+                      (<%= rec.days_until_expiry %> gg)
+                    <% end %>
+                  <% else %>
+                    Nessuna scadenza
+                  <% end %>
+                </span>
+              </td>
+              <td class="replay-archive-table__col-status">
+                <span class="replay-archive__status replay-archive__status--<%= rec.status %>"><%= rec.status_label %></span>
+                <%= form_with url: public_club_recording_path(@club, rec), method: :patch, local: true, class: "replay-archive__privacy-form" do %>
+                  <%= hidden_field_tag :team_id, @filter_team_id if @filter_team_id.present? %>
+                  <%= hidden_field_tag :status, @filter_status if @filter_status.present? %>
+                  <%= select_tag "recording[privacy_status]",
+                      options_for_select([["Pubblico", "public"], ["Privato", "unlisted"]], rec.privacy_status),
+                      class: "replay-archive__privacy-select",
+                      onchange: "this.form.submit()" %>
+                <% end %>
+              </td>
+              <td class="replay-archive-table__col-actions">
+                <div class="replay-archive__actions">
+                  <% if ent.phone_download_enabled? && rec.ready? %>
+                    <%= link_to "MP4", public_replay_download_path(rec.stream_session_id), class: "replay-archive__action replay-archive__action--secondary", title: "Scarica MP4" %>
+                  <% end %>
+                  <% if ent.premium_full? && ent.youtube_enabled? && rec.ready? && rec.youtube_video_id.blank? %>
+                    <%= button_to "YT", public_club_recording_publish_youtube_path(@club, rec), method: :post, class: "replay-archive__action replay-archive__action--secondary", title: "Pubblica su YouTube" %>
+                  <% elsif rec.youtube_watch_url %>
+                    <%= link_to "YT", rec.youtube_watch_url, class: "replay-archive__action replay-archive__action--secondary", target: "_blank", rel: "noopener", title: "Apri su YouTube" %>
+                  <% end %>
+                  <%= button_to public_club_recording_path(@club, rec), method: :delete,
+                      params: { team_id: @filter_team_id, status: @filter_status }.compact,
+                      class: "replay-archive__action replay-archive__action--danger",
+                      title: "Elimina replay",
+                      form: { data: { turbo_confirm: "Eliminare definitivamente questo replay? Verranno rimossi i file sul server e il video YouTube collegato." }, class: "replay-archive__action-form" } do %>
+                    ✕
+                  <% end %>
+                </div>
+              </td>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
     </div>
   <% else %>
     <p class="muted">Nessuna registrazione ancora. I replay compaiono al termine delle dirette Premium.</p>

backend/public/marketing.css

@@ -1361,26 +1361,21 @@ body.cookie-banner-visible {
   overflow: hidden;
 }
 
-.replay-archive__table-wrap {
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch;
-}
-
 .replay-archive-table {
   width: 100%;
-  min-width: 920px;
+  table-layout: fixed;
   border-collapse: collapse;
 }
 
 .replay-archive-table th,
 .replay-archive-table td {
-  padding: 12px 10px;
+  padding: 10px 8px;
   border-bottom: 1px solid #2a2a36;
   vertical-align: middle;
 }
 
 .replay-archive-table th {
-  font-size: 0.78rem;
+  font-size: 0.72rem;
   font-weight: 600;
   color: #9a9aaa;
   text-transform: uppercase;
@@ -1388,38 +1383,49 @@ body.cookie-banner-visible {
 }
 
 .replay-archive-table__col-thumb {
-  width: 108px;
+  width: 92px;
 }
 
-.replay-archive-table__col-title {
+.replay-archive-table__col-match {
-  min-width: 11rem;
+  width: 22%;
 }
 
-.replay-archive-table__col-privacy {
+.replay-archive-table__col-details {
-  width: 8.5rem;
+  width: 30%;
+}
+
+.replay-archive-table__col-status {
+  width: 18%;
 }
 
 .replay-archive-table__col-actions {
-  width: 1%;
+  width: 12%;
-  white-space: nowrap;
 }
 
-.replay-archive-table__nowrap {
+.replay-archive__detail-line {
-  white-space: nowrap;
-  font-size: 0.9rem;
-}
-
-.replay-archive-table__sub {
   display: block;
-  font-size: 0.75rem;
+  font-size: 0.88rem;
-  margin-top: 2px;
+  line-height: 1.35;
+  color: #e8e8f0;
+}
+
+.replay-archive__meta-line {
+  display: block;
+  margin-top: 4px;
+  font-size: 0.78rem;
+  line-height: 1.35;
+  color: #9a9aaa;
+}
+
+.replay-archive-table__col-status .replay-archive__status {
+  margin-bottom: 6px;
 }
 
 .replay-archive__thumb {
   position: relative;
   display: block;
-  width: 96px;
+  width: 80px;
-  height: 54px;
+  height: 45px;
   border-radius: 8px;
   overflow: hidden;
   background: #0f0f14;
@@ -1460,15 +1466,15 @@ a.replay-archive__thumb:hover {
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
-  width: 36px;
+  width: 32px;
-  height: 36px;
+  height: 32px;
   border-radius: 50%;
   background: rgba(229, 57, 53, 0.95);
   color: #fff;
-  font-size: 0.85rem;
+  font-size: 0.75rem;
-  line-height: 36px;
+  line-height: 32px;
   text-align: center;
-  padding-left: 3px;
+  padding-left: 2px;
   box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
   pointer-events: none;
 }
@@ -1482,19 +1488,16 @@ a.replay-archive__thumb:hover {
 
 .replay-archive__title-input {
   width: 100%;
-  min-width: 10rem;
-  max-width: 18rem;
   margin: 0;
-  padding: 8px 10px;
+  padding: 7px 8px;
-  font-size: 0.92rem;
+  font-size: 0.88rem;
 }
 
 .replay-archive__privacy-select {
   width: 100%;
-  min-width: 7.5rem;
   margin: 0;
-  padding: 8px 10px;
+  padding: 6px 8px;
-  font-size: 0.85rem;
+  font-size: 0.8rem;
 }
 
 .replay-archive__status {
@@ -1527,16 +1530,17 @@ a.replay-archive__thumb:hover {
   flex-wrap: wrap;
   align-items: center;
   justify-content: flex-end;
-  gap: 6px;
+  gap: 4px;
 }
 
 .replay-archive__action {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 4px;
+  gap: 2px;
-  min-height: 34px;
+  min-height: 30px;
-  padding: 0 10px;
+  min-width: 30px;
+  padding: 0 7px;
   border-radius: 8px;
   border: 1px solid #3d3d4a;
   background: #1c1c26;
@@ -1555,23 +1559,9 @@ a.replay-archive__thumb:hover {
   color: #fff;
 }
 
-.replay-archive__action--play {
-  background: #e53935;
-  border-color: #e53935;
-  color: #fff;
-  min-width: 34px;
-  padding: 0 12px;
-}
-
-.replay-archive__action--play:hover {
-  background: #c62828;
-  border-color: #c62828;
-  color: #fff;
-}
-
 .replay-archive__action--secondary {
-  font-size: 0.75rem;
+  font-size: 0.72rem;
-  padding: 0 8px;
+  padding: 0 6px;
 }
 
 .replay-archive__action--danger {
@@ -1615,17 +1605,35 @@ a.replay-archive__thumb:hover {
   border: 0;
 }
 
-@media (max-width: 720px) {
+@media (max-width: 900px) {
-  .replay-archive__action-label {
+  .replay-archive-table thead {
-    position: absolute;
+    display: none;
-    width: 1px;
-    height: 1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
   }
 
-  .replay-archive__action--play {
+  .replay-archive-table,
-    min-width: 40px;
+  .replay-archive-table tbody,
-    padding: 0;
+  .replay-archive-table tr,
+  .replay-archive-table td {
+    display: block;
+    width: 100%;
+  }
+
+  .replay-archive-table tr {
+    padding: 12px 14px;
+    border-bottom: 1px solid #2a2a36;
+  }
+
+  .replay-archive-table td {
+    padding: 4px 0;
+    border: none;
+  }
+
+  .replay-archive-table__col-thumb {
+    margin-bottom: 8px;
+  }
+
+  .replay-archive-table__col-actions .replay-archive__actions {
+    justify-content: flex-start;
+    margin-top: 8px;
   }
 }