From 04b4d92f69de4e37684ecf51b5190c6733f2147c Mon Sep 17 00:00:00 2001
From: Kaydax <kaydax@kaydax.xyz>
Date: Wed, 17 Apr 2024 02:21:49 -0400
Subject: [PATCH] Fix portrait mode detection (#582)

* Fix portrait mode detection

* Revert changes done on playbar
---
 src/renderer/features/lyrics/synchronized-lyrics.tsx          | 2 +-
 src/renderer/features/lyrics/unsynchronized-lyrics.tsx        | 2 +-
 .../features/player/components/full-screen-player.tsx         | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/renderer/features/lyrics/synchronized-lyrics.tsx b/src/renderer/features/lyrics/synchronized-lyrics.tsx
index 2a6696e5..19cba8c4 100644
--- a/src/renderer/features/lyrics/synchronized-lyrics.tsx
+++ b/src/renderer/features/lyrics/synchronized-lyrics.tsx
@@ -41,7 +41,7 @@ const SynchronizedLyricsContainer = styled.div<{ $gap: number }>`
         transparent 95%
     );
 
-    @media screen and (width <= 768px) {
+    @media screen and (orientation: portrait) {
         padding: 5vh 0;
     }
 `;
diff --git a/src/renderer/features/lyrics/unsynchronized-lyrics.tsx b/src/renderer/features/lyrics/unsynchronized-lyrics.tsx
index 8bb6f71b..251f0196 100644
--- a/src/renderer/features/lyrics/unsynchronized-lyrics.tsx
+++ b/src/renderer/features/lyrics/unsynchronized-lyrics.tsx
@@ -34,7 +34,7 @@ const UnsynchronizedLyricsContainer = styled.div<{ $gap: number }>`
         transparent 95%
     );
 
-    @media screen and (width <= 768px) {
+    @media screen and (orientation: portrait) {
         padding: 5vh 0;
     }
 `;
diff --git a/src/renderer/features/player/components/full-screen-player.tsx b/src/renderer/features/player/components/full-screen-player.tsx
index f3c2d710..af031c57 100644
--- a/src/renderer/features/player/components/full-screen-player.tsx
+++ b/src/renderer/features/player/components/full-screen-player.tsx
@@ -39,7 +39,7 @@ const Container = styled(motion.div)`
     justify-content: center;
     padding: 2rem;
 
-    @media screen and (width <= 768px) {
+    @media screen and (orientation: portrait) {
         padding: 2rem 2rem 1rem;
     }
 `;
@@ -53,7 +53,7 @@ const ResponsiveContainer = styled.div`
     max-width: 2560px;
     margin-top: 5rem;
 
-    @media screen and (width <= 768px) {
+    @media screen and (orientation: portrait) {
         grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
         grid-template-columns: minmax(0, 1fr);
         margin-top: 0;