Fix: Hide thumbnails in mobile portrait

.stylelintrc

@@ -7,7 +7,7 @@
     "rules": {
         "indentation": 4,
         "at-rule-no-vendor-prefix": true,
-        "at-rule-no-unknown": [true, { "ignoreAtRules": ["include", "mixin"] }],
+        "at-rule-no-unknown": [true, { "ignoreAtRules": ["include", "mixin", "content"] }],
         "media-feature-name-no-vendor-prefix": true,
         "property-no-vendor-prefix": true,
         "selector-no-vendor-prefix": true,

src/lib/viewers/doc/_docBase.scss

@@ -4,6 +4,10 @@ $thumbnail-border-radius: 3px;
 // Accounts for the 1px border on the right so the remaining width is actually 225
 $thumbnail-sidebar-width: 226px;
 
+@mixin for-phone-only {
+    @media (max-width: 599px) { @content; }
+}
+
 .bp {
     .bp-thumbnails-container {
         border-right: solid 1px $seesee;
@@ -16,6 +20,10 @@ $thumbnail-sidebar-width: 226px;
         transform: translateX(-$thumbnail-sidebar-width);
         transition: transform 300ms cubic-bezier(.4, 0, .2, 1);
         width: $thumbnail-sidebar-width;
+
+        @include for-phone-only {
+            display: none;
+        }
     }
 
     &.bp-thumbnails-open {
@@ -25,6 +33,10 @@ $thumbnail-sidebar-width: 226px;
 
         .bp-content {
             left: $thumbnail-sidebar-width;
+
+            @include for-phone-only {
+                left: 0;
+            }
         }
     }
 
@@ -217,3 +229,9 @@ $thumbnail-sidebar-width: 226px;
 .bp-content.bp-is-fullscreen .bp-toggle-thumbnails-icon {
     display: none;
 }
+
+.bp-controls-btn.bp-toggle-thumbnails-icon {
+    @include for-phone-only {
+        display: none;
+    }
+}