From a0c65a6eef4efaa2f7fdec34af792f13660fcd28 Mon Sep 17 00:00:00 2001
From: Hadi Charara <hadi.charara@protonmail.com>
Date: Fri, 23 Dec 2022 16:29:24 -0500
Subject: [PATCH] Revert "Some css reorganization"

This reverts commit 6b54c59321b60fd8d31a737c121dadbd3bdc662d.
---
 src/assets/css/librarybrowser.scss | 94 ++++++++++++++++--------------
 1 file changed, 49 insertions(+), 45 deletions(-)

diff --git a/src/assets/css/librarybrowser.scss b/src/assets/css/librarybrowser.scss
index 1fc4aeb48a..68103114de 100644
--- a/src/assets/css/librarybrowser.scss
+++ b/src/assets/css/librarybrowser.scss
@@ -619,11 +619,11 @@
         padding-right: 32.45vw;
         padding-left: 2%;
     }
+}
 
-    .layout-mobile & {
-        padding-left: 5%;
-        padding-right: 5%;
-    }
+.layout-mobile .detailPageContent {
+    padding-left: 5%;
+    padding-right: 5%;
 }
 
 .detailSectionContent a {
@@ -747,33 +747,31 @@
     text-align: center !important;
 }
 
-.mainDetailButtons {
-    .layout-mobile [dir="ltr"] & {
-        margin-left: 0;
+.layout-mobile .mainDetailButtons {
+    margin-top: 1em;
+    margin-bottom: 0.5em;
+}
 
-        @include header-poster-padding;
+.layout-mobile [dir="ltr"] .mainDetailButtons {
+    margin-left: 0;
 
-        // The buttons row is full width on small screens
-        @media all and (max-width: 32em) {
-            margin-bottom: 0;
-            padding-left: 0;
-        }
+    @include header-poster-padding;
+
+    // The buttons row is full width on small screens
+    @media all and (max-width: 32em) {
+        margin-bottom: 0;
+        padding-left: 0;
     }
+}
 
-    .layout-mobile [dir="rtl"] & {
-        margin-right: 0;
+.layout-mobile [dir="rtl"] .mainDetailButtons {
+    margin-right: 0;
 
-        @include header-poster-padding-rtl;
+    @include header-poster-padding-rtl;
 
-        @media all and (max-width: 32em) {
-            margin-bottom: 0;
-            padding-right: 0;
-        }
-    }
-
-    .layout-mobile & {
-        margin-top: 1em;
-        margin-bottom: 0.5em;
+    @media all and (max-width: 32em) {
+        margin-bottom: 0;
+        padding-right: 0;
     }
 }
 
@@ -796,16 +794,6 @@
     align-content: center;
     z-index: 2;
 
-    .layout-desktop [dir="rtl"] &,
-    .layout-tv [dir="rtl"] & {
-        padding-right: 32.45vw;
-    }
-
-    .layout-desktop [dir="ltr"] &,
-    .layout-tv [dir="ltr"] & {
-        padding-left: 32.45vw;
-    }
-
     .layout-mobile & {
         display: block;
         position: relative;
@@ -821,6 +809,22 @@
     }
 }
 
+.layout-desktop [dir="rtl"] .detailPagePrimaryContainer {
+    padding-right: 32.45vw;
+}
+
+.layout-desktop [dir="ltr"] .detailPagePrimaryContainer {
+    padding-left: 32.45vw;
+}
+
+.layout-tv [dir="rtl"] .detailPagePrimaryContainer {
+    padding-right: 32.45vw;
+}
+
+.layout-tv [dir="ltr"] .detailPagePrimaryContainer {
+    padding-left: 32.45vw;
+}
+
 .layout-desktop .detailRibbon {
     margin-top: -7.2em;
     height: 7.2em;
@@ -835,20 +839,20 @@
     min-width: 0;
     max-width: 100%;
     flex: 1 0 0;
+}
 
-    .layout-mobile [dir="ltr"] & {
-        @include header-poster-padding;
+.layout-mobile .infoWrapper {
+    @media all and (max-width: 32em) {
+        position: relative;
     }
+}
 
-    .layout-mobile [dir="rtl"] & {
-        @include header-poster-padding-rtl;
-    }
+.layout-mobile [dir="ltr"] .infoWrapper {
+    @include header-poster-padding;
+}
 
-    .layout-mobile & {
-        @media all and (max-width: 32em) {
-            position: relative;
-        }
-    }
+.layout-mobile [dir="rtl"] .infoWrapper {
+    @include header-poster-padding-rtl;
 }
 
 .infoText {