diff --git a/engines/brave/video.php b/engines/brave/video.php
index c59256f..9c20256 100644
--- a/engines/brave/video.php
+++ b/engines/brave/video.php
@@ -51,12 +51,15 @@
$thumbnail = $result["thumbnail"];
echo "
";
+ echo "
";
$page = isset($_REQUEST["p"]) ? (int) $_REQUEST["p"] : 0;
diff --git a/static/css/styles.css b/static/css/styles.css
index edf91c8..a4199fe 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -242,6 +242,11 @@ a:hover,
flex-direction: column;
}
+/* Allow the video wrapper to be a bit bigger */
+.result-container[data-type="2"] .text-result-wrapper {
+ max-width: 700px;
+}
+
#time {
font-size: 13px;
opacity: 0.65;
@@ -303,9 +308,12 @@ a:hover,
color: var(--result-fg);
}
-.video-img {
- height: 115px;
+.video-thumbnail {
+ min-height: 96px;
+ max-height: 96px;
+ background-color: var(--search-container-background-color);
border-radius: 12px;
+ aspect-ratio: 4 / 3;
}
.text-result-wrapper h2 {
@@ -405,6 +413,19 @@ a[title] .image-properties {
vertical-align: bottom;
}
+.video-link {
+ display: inline-flex;
+ flex-direction: row;
+ align-items: flex-start;
+ gap: 1rem;
+}
+
+.video-link .video-img {
+ max-height: 96px;
+ background-color: var(--search-container-background-color);
+ border-radius: 8px;
+}
+
.git-container {
right: 0;
}