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/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 {
-  min-width: 11rem;
+.replay-archive-table__col-match {
+  width: 22%;
 }
 
-.replay-archive-table__col-privacy {
-  width: 8.5rem;
+.replay-archive-table__col-details {
+  width: 30%;
+}
+
+.replay-archive-table__col-status {
+  width: 18%;
 }
 
 .replay-archive-table__col-actions {
-  width: 1%;
-  white-space: nowrap;
+  width: 12%;
 }
 
-.replay-archive-table__nowrap {
-  white-space: nowrap;
-  font-size: 0.9rem;
-}
-
-.replay-archive-table__sub {
+.replay-archive__detail-line {
   display: block;
-  font-size: 0.75rem;
-  margin-top: 2px;
+  font-size: 0.88rem;
+  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;
-  height: 54px;
+  width: 80px;
+  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;
-  height: 36px;
+  width: 32px;
+  height: 32px;
   border-radius: 50%;
   background: rgba(229, 57, 53, 0.95);
   color: #fff;
-  font-size: 0.85rem;
-  line-height: 36px;
+  font-size: 0.75rem;
+  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;
-  font-size: 0.92rem;
+  padding: 7px 8px;
+  font-size: 0.88rem;
 }
 
 .replay-archive__privacy-select {
   width: 100%;
-  min-width: 7.5rem;
   margin: 0;
-  padding: 8px 10px;
-  font-size: 0.85rem;
+  padding: 6px 8px;
+  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;
-  min-height: 34px;
-  padding: 0 10px;
+  gap: 2px;
+  min-height: 30px;
+  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;
-  padding: 0 8px;
+  font-size: 0.72rem;
+  padding: 0 6px;
 }
 
 .replay-archive__action--danger {
@@ -1615,17 +1605,35 @@ a.replay-archive__thumb:hover {
   border: 0;
 }
 
-@media (max-width: 720px) {
-  .replay-archive__action-label {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
+@media (max-width: 900px) {
+  .replay-archive-table thead {
+    display: none;
   }
 
-  .replay-archive__action--play {
-    min-width: 40px;
-    padding: 0;
+  .replay-archive-table,
+  .replay-archive-table tbody,
+  .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;
   }
 }