Backport pull request #5590 from jellyfin-web/release-10.9.z

Fix positioning of the main animated page elements

Original-merge: f7f5ac99b05f321cf43290c6bcf533332b8744bd

Merged-by: thornbill <thornbill@users.noreply.github.com>

Backported-by: Joshua M. Boniface <joshua@boniface.me>

src/apps/dashboard/AppOverrides.scss

@@ -5,10 +5,14 @@ $mui-bp-md: 900px;
 $mui-bp-lg: 1200px;
 $mui-bp-xl: 1536px;
 
+$drawer-width: 240px;
+
 // Fix dashboard pages layout to work with drawer
 .dashboardDocument {
     .mainAnimatedPage {
-        position: relative;
+        @media all and (min-width: $mui-bp-md) {
+            left: $drawer-width;
+        }
     }
 
     .skinBody {

src/apps/experimental/AppOverrides.scss

@@ -5,9 +5,13 @@ $mui-bp-md: 900px;
 $mui-bp-lg: 1200px;
 $mui-bp-xl: 1536px;
 
+$drawer-width: 240px;
+
 // Fix main pages layout to work with drawer
 .mainAnimatedPage {
-    position: relative;
+    @media all and (min-width: $mui-bp-md) {
+        left: $drawer-width;
+    }
 }
 
 // Hide some items from the user "settings" page that are in the drawer