refactor: release page layout

app/components/ReleaseInfo/ReleaseInfo.Basics.tsx

@@ -13,7 +13,7 @@ export const ReleaseInfoBasics = (props: {
   const [isFullDescription, setIsFullDescription] = useState(false);
 
   return (
-    <Card className="h-full">
+    <Card className="h-full row-span-2">
       <div className="flex flex-col w-full h-full gap-4 lg:flex-row">
         <Image
           className="w-[285px] max-h-[385px] object-cover border border-gray-200 rounded-lg shadow-md dark:border-gray-700"

app/components/ReleaseInfo/ReleaseInfo.Info.tsx

@@ -28,7 +28,7 @@ export const ReleaseInfoInfo = (props: {
   genres: string;
 }) => {
   return (
-    <Card className="h-full">
+    <Card>
       <Table>
         <Table.Body>
           <Table.Row>

app/components/ReleasePlayer/ReleasePlayerCustom.tsx

@@ -282,7 +282,7 @@ export const ReleasePlayerCustom = (props: {
   }, [episode.selected]);
 
   return (
-    <Card className="h-full">
+    <Card className="aspect-video min-h-min-h-[300px] sm:min-h-[466px] md:min-h-[540px] lg:min-h-[512px] xl:min-h-[608px] 2xl:min-h-[712px]">
       {(
         !voiceover.selected ||
         !source.selected ||

app/pages/Release.tsx

@@ -71,9 +71,8 @@ export const ReleasePage = (props: any) => {
   }
 
   return (
-    <>
+    <div className="flex flex-col gap-2">
-      <div className="flex flex-col lg:grid lg:grid-cols-[70%_30%] gap-2 grid-flow-row-dense">
+      <div className="grid grid-cols-1 lg:grid-cols-[70%_30%] gap-2 grid-flow-row-dense">
-        <div className="[grid-column:1] [grid-row:span_2]">
         <ReleaseInfoBasics
           image={data.release.image}
           title={{
@@ -84,8 +83,6 @@ export const ReleasePage = (props: any) => {
           note={data.release.note}
           release_id={data.release.id}
         />
-        </div>
-        <div className="[grid-column:2]">
         <ReleaseInfoInfo
           country={data.release.country}
           aired_on_date={data.release.aired_on_date}
@@ -104,8 +101,6 @@ export const ReleasePage = (props: any) => {
           director={data.release.director}
           genres={data.release.genres}
         />
-        </div>
-        <div className="[grid-column:2]">
         <ReleaseInfoUserList
           userList={userList}
           isFavorite={userFavorite}
@@ -117,14 +112,23 @@ export const ReleasePage = (props: any) => {
           collection_count={data.release.collection_count}
         />
       </div>
+      <div className="grid grid-cols-1 lg:grid-cols-[70%_30%] gap-2 grid-flow-row-dense">
+        <div className="flex flex-col gap-2">
           {data.release.status &&
             data.release.status.name.toLowerCase() != "анонс" && (
-            <div className="[grid-column:1] [grid-row:span_12]">
+              <>
                 {preferenceStore.params.experimental.newPlayer ?
                   <ReleasePlayerCustom id={props.id} token={userStore.token} />
                 : <ReleasePlayer id={props.id} />}
-            </div>
+              </>
             )}
+          <CommentsMain
+            release_id={props.id}
+            token={userStore.token}
+            comments={data.release.comments}
+          />
+        </div>
+        <div className="flex flex-col gap-2">
           {data.release.status &&
             data.release.status.name.toLowerCase() != "анонс" && (
               <div className="[grid-column:2]">
@@ -144,7 +148,6 @@ export const ReleasePage = (props: any) => {
                 />
               </div>
             )}
-        <div className="[grid-column:2] [grid-row:span_4]">
           <InfoLists
             completed={data.release.completed_count}
             planned={data.release.plan_count}
@@ -152,32 +155,18 @@ export const ReleasePage = (props: any) => {
             delayed={data.release.hold_on_count}
             watching={data.release.watching_count}
           />
-        </div>
-
           {data.release.screenshot_images.length > 0 && (
-          <div className="[grid-column:2] [grid-row:span_11]">
             <ReleaseInfoScreenshots images={data.release.screenshot_images} />
-          </div>
           )}
-
           {data.release.related_releases.length > 0 && (
-          <div className="[grid-column:2] [grid-row:span_2]">
             <ReleaseInfoRelated
               release_id={props.id}
               related={data.release.related}
               related_releases={data.release.related_releases}
             />
-          </div>
           )}
-
-        <div className="[grid-column:1] [grid-row:span_32]">
-          <CommentsMain
-            release_id={props.id}
-            token={userStore.token}
-            comments={data.release.comments}
-          />
         </div>
       </div>
-    </>
+    </div>
   );
 };