fix: Center preview frames when fewer than viewport (#191)

seek-oss · Sep 16, 2020 · 5b93498 · 5b93498
1 parent ef02a73
commit 5b93498
Showing 1 changed file with 9 additions and 6 deletions.
diff --git a/src/Playroom/Frames/Frames.less b/src/Playroom/Frames/Frames.less
@@ -7,9 +7,16 @@
   overflow-x: auto;
   overflow-y: hidden;
   white-space: nowrap;
-  padding: @preview-padding 0 (@preview-padding - 10px);
+  padding: @preview-padding 0 (@preview-padding - 10px) @preview-padding;
   text-align: center;
   display: flex;
+
+  // Simulate centering when fewer frames than viewport width.
+  &::before,
+  &::after {
+    content: '';
+    flex: 1;
+  }
 }
 
 .frameContainer {
@@ -18,11 +25,7 @@
   text-align: left;
   display: flex;
   flex-direction: column;
-  margin-right: @preview-padding;
-
-  &:first-child {
-    margin-left: @preview-padding;
-  }
+  padding-right: @preview-padding;
 }
 
 .frame {