diff --git a/app/lib/components/Filmstrip.jsx b/app/lib/components/Filmstrip.jsx
index e0a16e9..f1607fd 100644
--- a/app/lib/components/Filmstrip.jsx
+++ b/app/lib/components/Filmstrip.jsx
@@ -48,10 +48,12 @@ class Filmstrip extends Component
active : activeSpeakerName === peerName
})}
>
-
+
))}
diff --git a/app/stylus/components/Filmstrip.styl b/app/stylus/components/Filmstrip.styl
index 051249c..1b1d590 100644
--- a/app/stylus/components/Filmstrip.styl
+++ b/app/stylus/components/Filmstrip.styl
@@ -17,30 +17,42 @@
> .filmstrip {
display: flex;
- padding: 0.5vmin;
- cursor: pointer;
+ background: rgba(0, 0, 0 , 0.5);
+ width: 100%;
+ overflow-x: auto;
+ padding: 1vmin 0;
> .film {
height: 15vmin;
- margin: 1vmin;
- border: 1px solid rgba(255, 255, 255, 0.15);
- box-shadow: 0px 5px 12px 2px rgba(17, 17, 17, 0.5);
+ flex-shrink: 0;
+ padding-left: 1vmin;
- > [data-component='Peer'] {
- max-width: 15vmin * (4 / 3);
+ &:last-child {
+ padding-right: 1vmin;
+ }
- &.screen {
- max-width: 15vmin * (2 * 4 / 3);
- border: 0;
+ > .film-content {
+ height: 100%;
+ width: 100%;
+ border: 1px solid rgba(255,255,255,0.15);
+
+ > [data-component='Peer'] {
+ max-width: 15vmin * (4 / 3);
+ cursor: pointer;
+
+ &.screen {
+ max-width: 15vmin * (2 * 4 / 3);
+ border: 0;
+ }
}
- }
- &.active {
- border-color: #FFF;
- }
+ &.active {
+ border-color: #FFF;
+ }
- &.selected {
- border-color: #377EFF;
+ &.selected {
+ border-color: #377EFF;
+ }
}
}
}