From 21ac1cc89ae14e97289d92da29a3a2887e37248a Mon Sep 17 00:00:00 2001
From: SrGooglo <srgooglo@ragestudio.net>
Date: Tue, 27 Jun 2023 02:46:04 +0000
Subject: [PATCH] improve style to use `centered-content`

---
 packages/app/constants/routes.js       |  4 ++++
 packages/app/src/pages/play/index.less | 15 ++++++++-------
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/packages/app/constants/routes.js b/packages/app/constants/routes.js
index 5b840790..e3aaf314 100755
--- a/packages/app/constants/routes.js
+++ b/packages/app/constants/routes.js
@@ -14,6 +14,10 @@ export default [
         useLayout: "default",
         useTitle: "Posts",
     },
+    {
+        path: "/play/*",
+        centeredContent: true
+    },
     {
         path: "/post/*",
         useLayout: "default",
diff --git a/packages/app/src/pages/play/index.less b/packages/app/src/pages/play/index.less
index 7bd2459c..96255576 100755
--- a/packages/app/src/pages/play/index.less
+++ b/packages/app/src/pages/play/index.less
@@ -34,12 +34,12 @@
 }
 
 .playlist_view {
-    display: grid;
+    display: flex;
+    flex-direction: row;
 
-    grid-template-columns: 30vw 1fr;
-    grid-template-rows: 1fr;
-    grid-column-gap: 20px;
-    grid-row-gap: 0px;
+    align-items: flex-start;
+
+    width: 100%;
 
     .play_info_wrapper {
         position: sticky;
@@ -53,7 +53,7 @@
         align-items: center;
         justify-content: center;
 
-        width: 100%;
+        width: fit-content;
         height: fit-content;
 
         color: var(--text-color);
@@ -64,7 +64,6 @@
 
             align-self: center;
 
-            width: 30vw;
             height: 100%;
 
             padding: 20px;
@@ -182,6 +181,8 @@
 
         gap: 10px;
 
+        width: 100%;
+
         h1 {
             margin: 0;
         }