refactor(MetaDetails): landscape mobile styles

src/common/screen-sizes.less

@@ -9,4 +9,17 @@
 @large: 2200px;
 @xlarge: 2500px;
 @xxlarge: 2800px;
-@xxxlarge: 3800px;
+@xxxlarge: 3800px;
+
+@small-phone-landscape-size: 400px;
+@small-phone-portrait-size: 700px;
+
+@phone-landscape-size: 500px;
+@phone-portrait-size: 1000px;
+
+@small-phone-landscape: ~"screen and (max-width: @{small-phone-portrait-size}) and (max-height: @{small-phone-landscape-size}) and (orientation: landscape)";
+@small-phone-portrait: ~"screen and (max-width: @{small-phone-landscape-size}) and (max-height: @{small-phone-portrait-size}) and (orientation: portrait)";
+
+@phone-landscape: ~"screen and (max-width: @{phone-portrait-size}) and (max-height: @{phone-landscape-size}) and (orientation: landscape)";
+@phone-portrait: ~"screen and (max-width: @{phone-portrait-size}) and (max-height: @{phone-portrait-size}) and (orientation: portrait)";
+

src/components/MetaPreview/ActionButton/styles.less

@@ -51,6 +51,14 @@
     }
 }
 
+@media @phone-landscape {
+    .action-button-container {
+        .label-container {
+            display: none;
+        }
+    }
+}
+
 @media only screen and (max-width: @minimum) {
     .action-button-container {
         flex-direction: row;

src/components/MetaPreview/styles.less

@@ -213,6 +213,28 @@
     width: 30rem;
 }
 
+
+@media @phone-landscape {
+    .meta-preview-container {
+        .meta-info-container {
+            .logo {
+                height: 5rem;
+                margin-bottom: 1rem;
+            }
+        }
+
+        .action-buttons-container {
+            padding-top: 1.5rem;
+
+            .action-button {
+                padding: 0 1.5rem !important;
+                height: 3rem;
+                border-radius: 2rem;
+            }
+        }
+    }
+}
+
 @media only screen and (max-width: @minimum) {
     .meta-preview-container {
         .meta-info-container {
@@ -229,16 +251,16 @@
             }
         }
 
-            .action-buttons-container {
-                flex-shrink: 0;
-                margin-top: 3rem;
-                overflow: visible;
-                scrollbar-width: none;
-    
-                &::-webkit-scrollbar {
-                    display: none;
-                }
+        .action-buttons-container {
+            flex-shrink: 0;
+            margin-top: 3rem;
+            overflow: visible;
+            scrollbar-width: none;
+
+            &::-webkit-scrollbar {
+                display: none;
             }
+        }
     }
 
     .share-prompt {

src/routes/MetaDetails/styles.less

@@ -124,6 +124,24 @@
         }
     }
 }
+@media @small-phone-landscape {
+    .metadetails-container {
+        .metadetails-content {
+            .videos-list, .streams-list {
+                flex: 0 0 25rem;
+            }
+        }
+    }
+}
+@media @phone-landscape {
+    .metadetails-container {
+        .metadetails-content {
+            .meta-preview {
+                padding: 0 1.5rem 1rem;
+            }
+        }
+    }
+}
 
 @media only screen and (max-width: @minimum) {
     .metadetails-container {