improve style to use centered-content

packages/app/constants/routes.js

@@ -14,6 +14,10 @@ export default [
         useLayout: "default",
         useTitle: "Posts",
     },
+    {
+        path: "/play/*",
+        centeredContent: true
+    },
     {
         path: "/post/*",
         useLayout: "default",

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;
         }