[TWIG][CSS] Final fix for panels, resizing works as intended, content is wrapped when no space is available. Simpler rules throughout.

Signed-off-by: Eliseu Amaro <mail@eliseuama.ro>

public/assets/css/base.css

@@ -188,20 +188,21 @@ html {
 /* CONTAINS ALL ELEMENTS BESIDES HEADER */
 .container {
     display: flex;
-    justify-content: space-between;
+    flex-wrap: wrap;
+    justify-content: space-around;
     margin-top: calc(3 * var(--small-size) + var(--main-size));
 }
 
 /* THE FOCUSED (middle) DIV */
 .content {
     margin: var(--main-size);
-    box-sizing: border-box;
 
     display: flex;
     flex-direction: column;
     flex: 1;
 
-    max-width: calc(3 * (100vw / 5));
+    width: 100%;
+    max-width: calc(3 * (100% / 5));
 }
 
 /* NOTES */
@@ -258,10 +259,18 @@ html {
 }
 
 .note-attachments > div figure {
+    display: flex;
+    flex-direction: column;
     margin: 0;
     padding: var(--small-size);
 }
 
+.note-attachments > div figure img,
+.note-attachments > div figure video {
+    width: 100%;
+    height: auto;
+}
+
 figcaption a:link {
     font-size: var(--small-size);
     color: var(--white);
@@ -269,14 +278,15 @@ figcaption a:link {
 
 /* SIDE PANELS */
 .panel {
+    width: 100%;
+    max-width: calc(100% / 5);
     margin: var(--unit-size);
     font-size: var(--main-size);
-    max-width: calc((100vw / 5));
 }
 
 .panel aside {
-    display: flex;
-    flex-direction: column;
+    position: sticky;
+    display: contents;
 }
 
 .icon-left,
@@ -284,46 +294,41 @@ figcaption a:link {
     display: none;
 }
 
-@media (min-width: 1200px) {
-    .panel {
-        width: 100%;
-    }
-}
-
 @media (max-width: 1200px) {
     .icon-left,
     .icon-right {
-        display: flex !important;
-    }
-
-    .panel {
-        max-width: 100vw !important;
-    }
-
-    .panel div ~ {
-        all: unset;
-        display: none;
-    }
-
-    .panel aside {
-        display: none !important;
-    }
-
-    .panel[open] {
-        display: block !important;
-        width: 100% !important; /* Full width */
-        height: 100% !important; /* Full height */
-        overflow: auto !important; /* Enable scroll if needed */
-    }
-
-    .panel[open] aside {
-        display: block !important;
-        animation: fadeIn 300ms cubic-bezier(0, 0.55, 0.45, 1);
+        display: flex;
     }
 
     .content {
-        max-width: 100vw;
+        order: 1;
+        max-width: 100% !important;
     }
+
+    .panel {
+        all: unset;
+        width: 0;
+    }
+
+    .panel aside {
+        display: none;
+    }
+
+    .panel[open] {
+        width: 100%;
+        font-size: var(--main-size);
+        margin: var(--unit-size);
+    }
+
+    .panel[open] {
+        width: 100%;
+    }
+
+    .panel[open] aside {
+        display: contents;
+    }
+
+
 }
 
 /* ANIMATIONS */

public/assets/css/left/left.css

@@ -1,3 +1,8 @@
+#left-container {
+    top: inherit;
+    left: 0;
+}
+
 .icon-left {
     position: fixed;
     top: 0;
@@ -14,7 +19,6 @@
 
 /* PROFILE */
 .profile-nav {
-    width: inherit;
     font-family: var(--display-font);
 }
 

public/assets/css/right/right.css

@@ -1,3 +1,8 @@
+#right-container {
+    top: inherit;
+    right: 0;
+}
+
 .icon-right {
     position: fixed;
     top: 0;
@@ -13,19 +18,22 @@
 }
 
 .create-notice {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+
     background-image: radial-gradient(ellipse at 10% 10%, var(--bg3), var(--accent-blue)),
     url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAElBMVEUAAACUkpSEhoSMioyMjoyEgoRr6djFAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAU1JREFUKJEVUcl1xTAIpAVLSgECXIAYUoCAX0Bi919LlCPLm5ValiOUUe2+ZRVFuYpKXFsUX9aIp0V6GtC8VRhNL0X2fikvswhKrNDhes7pbpPkufFAtI0B76LEjfc2bgdHDk6RX4A/sjt6LCylfoYpNYYJx/9COhIugsjluzN9VGZ/Hnl51jIH2ba+Ywsy2RJCFdoDe8Obw61TXGAv+ewExMRJs7gd7YcimPuk42uMqY2VJ1fK+bDL32rb7kwok/la/u7Mrz7Xf0DTssSP2Btp1ZS0zw35tM/SsJKgWNLcRh+/th1QqntwtM3Tx0LNosoBYbM3qjJFiMeLsMH2i5BcQdU3n9sJHOE1Hoqn1GA/bm4s0YkVB/y4r0PbltF32FpljXmdlOOwbDvFWkoDYLppSG4pnM6UxX3Src1lhXeU36FOu3o+R2vNaHME/wESUl9/3zMniwAAAABJRU5ErkJggg==);
     background-blend-mode: multiply;
     border-radius: var(--unit-size);
 }
 
-.create-notice form fielset {
-    display: flex;
-    flex-direction: column;
+.create-notice textarea {
+    width: 100%;
 }
 
 .section-title {
-    width: 100%;
+    flex: 1;
     border-radius: var(--unit-size);
 
     padding: var(--unit-size);
@@ -35,9 +43,6 @@
     font-family: var(--display-font);
 }
 .section-content {
-    display: flex;
-    flex-wrap: wrap;
-    flex-direction: column;
     margin: var(--unit-size);
 }
 .section-content hr {
@@ -98,7 +103,7 @@
     border-radius: var(--unit-size);
     background-color: var(--translucent);
 
-    width: 100%;
+    max-width: 100%;
     margin-top: var(--unit-size);
     padding: var(--unit-size);
     resize: vertical;

templates/sidepanel/right/right.html.twig

@@ -4,7 +4,6 @@
 
         <section class="create-notice">
             {{ form_start(post_form) }}
-            <fieldset>
             <legend class="section-title">Create a note</legend>
 
             <div class="section-content">
@@ -46,7 +45,6 @@
                         </div>
                     </span>
             </div>
-            </fieldset>
             {{ form_end(post_form) }}
 
             <details>