From 63a17c9973339bbe76c75f46178162ab84869e8d Mon Sep 17 00:00:00 2001
From: Marcin Kulik <m@ku1ik.com>
Date: Mon, 18 Mar 2024 09:52:00 +0100
Subject: [PATCH] Reduce flashing of preview cards on page loads

---
 assets/css/_recording_card.scss                     | 13 +++----------
 .../controllers/recording/thumbnail.html.heex       |  5 ++++-
 2 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/assets/css/_recording_card.scss b/assets/css/_recording_card.scss
index 44a0d095c..9344dc114 100644
--- a/assets/css/_recording_card.scss
+++ b/assets/css/_recording_card.scss
@@ -55,22 +55,15 @@ div.asciicast-card {
   }
 
   .thumbnail {
+    min-height: calc(1.333333 * 16em);
+    font-size: 14px;
+    font-family: Consolas, Menlo, 'Bitstream Vera Sans Mono', monospace, 'Powerline Symbols';
     overflow: hidden;
     padding: 0;
     background-color: #000;
     border-radius: 3px;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
-
-    .ap-terminal {
-      .ap-line {
-        height: 1.3333333333em;
-
-        span {
-          position: inherit;
-        }
-      }
-    }
   }
 
   .info {
diff --git a/lib/asciinema_web/controllers/recording/thumbnail.html.heex b/lib/asciinema_web/controllers/recording/thumbnail.html.heex
index e3a92b0cf..5ae18794c 100644
--- a/lib/asciinema_web/controllers/recording/thumbnail.html.heex
+++ b/lib/asciinema_web/controllers/recording/thumbnail.html.heex
@@ -1,3 +1,6 @@
-<div class="thumbnail" style={"border-right: 1ch solid #{theme(@asciicast).bg}"}>
+<div
+  class="thumbnail"
+  style={"background-color: #{theme(@asciicast).bg}; border-right: 1ch solid #{theme(@asciicast).bg}"}
+>
   <img src={~p"/a/#{@asciicast}" <> ".svg?v=t"} />
 </div>