diff --git a/src/apps/modern/routes/video/index.tsx b/src/apps/modern/routes/video/index.tsx
index 65a4f5ff13..248019455e 100644
--- a/src/apps/modern/routes/video/index.tsx
+++ b/src/apps/modern/routes/video/index.tsx
@@ -70,7 +70,7 @@ const VideoPage: FC = () => {
                                 <RemotePlayButton />
                             </>
                         }
-                        className='padded-left padded-right'
+                        className='videoOsd-appBar'
                     >
                         <Typography>{videoTitle}</Typography>
                     </AppToolbar>
diff --git a/src/styles/videoosd.scss b/src/styles/videoosd.scss
index 9b7c25d8de..8b3de7c531 100644
--- a/src/styles/videoosd.scss
+++ b/src/styles/videoosd.scss
@@ -1,4 +1,11 @@
-@use 'mixins' as *;
+@use "mixins" as *;
+
+.videoOsd-appBar {
+    margin-left: env(safe-area-inset-left);
+    margin-right: env(safe-area-inset-right);
+    padding-left: 1em;
+    padding-right: 1em;
+}
 
 .chapterThumbTextContainer,
 .videoOsdBottom {