${this.loadedSnapshots.has(session.id) ? html`
-
+
${this.loadingSnapshots.has(session.id) ? 'Loading...' : 'Loading...'}
`}
diff --git a/web/src/input.css b/web/src/input.css
index e862f1f1..a8bff2be 100644
--- a/web/src/input.css
+++ b/web/src/input.css
@@ -4,15 +4,15 @@
/* Fix asciinema player dimensions */
.ap-player {
- min-width: 640px !important;
- min-height: 480px !important;
+ min-width: unset !important;
+ min-height: unset !important;
width: auto !important;
height: auto !important;
}
.asciinema-player-theme-asciinema {
- min-width: 640px !important;
- min-height: 480px !important;
+ min-width: unset !important;
+ min-height: unset !important;
width: auto !important;
height: auto !important;
}
@@ -47,16 +47,27 @@
/* Force asciinema player to fit within session card bounds */
.session-preview .asciinema-player,
.session-preview .ap-player {
+ min-width: unset !important;
+ min-height: unset !important;
max-width: 100% !important;
- max-height: 120px !important;
+ max-height: 100% !important;
width: 100% !important;
- height: 120px !important;
+ height: 100% !important;
overflow: hidden !important;
+ z-index: 0 !important;
+ object-fit: contain !important;
}
.session-preview .asciinema-player .ap-screen,
.session-preview .ap-player .ap-screen {
- transform-origin: top left !important;
+ transform-origin: center center !important;
max-width: 100% !important;
- max-height: 120px !important;
+ max-height: 100% !important;
+ z-index: 1 !important;
+ object-fit: contain !important;
+}
+
+.session-preview .asciinema-player *,
+.session-preview .ap-player * {
+ z-index: 1 !important;
}
\ No newline at end of file