diff --git a/front/src/Components/MyCamera.svelte b/front/src/Components/MyCamera.svelte
index c9062008..06a86e58 100644
--- a/front/src/Components/MyCamera.svelte
+++ b/front/src/Components/MyCamera.svelte
@@ -65,8 +65,12 @@
max-height: 20%;
transition: transform 1000ms;
padding: 0;
- background-color: #00000099;
overflow: hidden;
+ line-height: 0;
+
+ &.nes-container.is-rounded {
+ border-image-outset: 1;
+ }
}
.my-cam-video-container.hide {
@@ -76,6 +80,7 @@
.my-cam-video {
background-color: #00000099;
max-height: 20vh;
+ max-width: max(25vw, 150px);
width: 100%;
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
@@ -86,14 +91,4 @@
color: white;
padding: 40px 20px;
}
-
- @include media-breakpoint-up(md) {
- .my-cam-video {
- width: 150px;
- }
-
- .my-cam-video-container.hide {
- right: -160px;
- }
- }
diff --git a/front/src/Components/Video/MediaBox.svelte b/front/src/Components/Video/MediaBox.svelte
index a59420c2..eca34aa5 100644
--- a/front/src/Components/Video/MediaBox.svelte
+++ b/front/src/Components/Video/MediaBox.svelte
@@ -5,6 +5,7 @@
import { ScreenSharingPeer } from "../../WebRtc/ScreenSharingPeer";
import LocalStreamMediaBox from "./LocalStreamMediaBox.svelte";
import type { Streamable } from "../../Stores/StreamableCollectionStore";
+ import PixelContainer from "../Container/PixelContainer.svelte";
export let streamable: Streamable;
export let isHightlighted = false;
@@ -19,13 +20,15 @@
class:mozaic-full-width={mozaicFullWidth}
class:mozaic-quarter={mozaicQuarter}
>
- {#if streamable instanceof VideoPeer}
-