From 82c15dd48efed01b0fb3702fa612fa27d61005a4 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Thu, 5 Sep 2024 16:08:50 +0200
Subject: [PATCH] Fix studio page responsive

---
 .../edit/video-studio-edit.component.html     | 23 ++++-----
 .../edit/video-studio-edit.component.scss     | 48 +++++++++++++++----
 2 files changed, 48 insertions(+), 23 deletions(-)

diff --git a/client/src/app/+video-studio/edit/video-studio-edit.component.html b/client/src/app/+video-studio/edit/video-studio-edit.component.html
index f26e3119a..a534f1470 100644
--- a/client/src/app/+video-studio/edit/video-studio-edit.component.html
+++ b/client/src/app/+video-studio/edit/video-studio-edit.component.html
@@ -1,7 +1,7 @@
 <div class="margin-content">
   <h1 class="title-page" i18n>Studio for {{ video.name }}</h1>
 
-  <div class="columns">
+  <div class="grid-container">
     <form role="form" [formGroup]="form">
 
       <div class="section cut" formGroupName="cut">
@@ -69,20 +69,17 @@
       ></my-button>
     </form>
 
+    <div class="embed-container">
+      <div class="mb-1 fw-bold" i18n>Video before edition</div>
+      <my-embed [video]="video"></my-embed>
+    </div>
 
-    <div class="information">
-      <div>
-        <div class="mb-1 fw-bold" i18n>Video before edition</div>
-        <my-embed [video]="video"></my-embed>
-      </div>
+    <div class="tasks-container" *ngIf="!noEdition()">
+      <div class="mb-1 fw-bold" i18n>Edition tasks:</div>
 
-      <div *ngIf="!noEdition()">
-        <div class="mb-1 fw-bold" i18n>Edition tasks:</div>
-
-        <ol>
-          <li *ngFor="let task of getTasksSummary()">{{ task }}</li>
-        </ol>
-      </div>
+      <ol>
+        <li *ngFor="let task of getTasksSummary()">{{ task }}</li>
+      </ol>
     </div>
   </div>
 </div>
diff --git a/client/src/app/+video-studio/edit/video-studio-edit.component.scss b/client/src/app/+video-studio/edit/video-studio-edit.component.scss
index 52b6bbad9..eef6655da 100644
--- a/client/src/app/+video-studio/edit/video-studio-edit.component.scss
+++ b/client/src/app/+video-studio/edit/video-studio-edit.component.scss
@@ -1,20 +1,48 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-.columns {
-  display: flex;
+.grid-container {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: auto 1fr;
 
-  .information {
-    width: 100%;
+  @include rfs(3rem, column-gap);
+  @include rfs(2rem, row-gap);
 
-    @include margin-left(50px);
+  form {
+    grid-column: 1;
+    grid-row: 1 / 3;
+  }
 
-    > div {
-      margin-bottom: 30px;
+  .embed-container {
+    grid-column: 2;
+    grid-row: 1;
+  }
+
+  .tasks-container {
+    grid-column: 2;
+    grid-row: 2;
+  }
+}
+
+@include on-small-main-col {
+  .grid-container {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto 1fr;
+
+    form {
+      grid-column: 1;
+      grid-row: 2;
     }
 
-    @media screen and (max-width: $small-view) {
-      display: none;
+    .embed-container {
+      grid-column: 1;
+      grid-row: 1;
+    }
+
+    .tasks-container {
+      grid-column: 1;
+      grid-row: 3;
     }
   }
 }
@@ -56,7 +84,7 @@ h2 {
   }
 
   @media screen and (max-width: $min-width) {
-    min-width: none;
+    min-width: 100%;
   }
 }