From b6d80003d80ea9cf8be2482c0e1a1176c4e162d5 Mon Sep 17 00:00:00 2001
From: Eliseu Amaro <mail@eliseuama.ro>
Date: Thu, 23 Sep 2021 16:18:08 +0100
Subject: [PATCH] [CSS] Note attachments layout fix. Added a very small radius
 to avatars.

---
 public/assets/css/base.css    | 33 ++++++++++++++++++++-------------
 templates/note/view.html.twig |  4 ++--
 2 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/public/assets/css/base.css b/public/assets/css/base.css
index 4d03c7e9ac..7cf85b4d2d 100644
--- a/public/assets/css/base.css
+++ b/public/assets/css/base.css
@@ -5,6 +5,11 @@ html {
     scroll-margin-top: 4rem;
 }
 
+* {
+    max-width: 100%;
+    max-height: 100%;
+}
+
 *:hover,
 *:active {
     -webkit-box-shadow: unset;
@@ -305,7 +310,7 @@ hr {
 .note-sidebar * {
     display: flex;
     flex-direction: column;
-    margin-left: auto;hr
+    margin-left: auto;
     margin-right: auto;
     max-height: 100%;
 }
@@ -315,6 +320,7 @@ hr {
     height: auto;
     background: unset;
     margin-bottom: var(--unit-size);
+    border-radius: 2px;
 }
 
 .h-entry .replies .h-entry {
@@ -408,20 +414,19 @@ hr {
     border-radius: 0 0 var(--unit-size) var(--unit-size);
     padding: var(--small-size);
 }
-.note-content * {
-    max-width: 100%;
-    max-height: 100%;
-}
 
 .note-text {
     margin-bottom: var(--unit-size);
 }
 
-figure { margin: unset; max-width: 100%; max-height: border-box;}
-.note-content > .note-attachments {
+figure {
+    margin: unset;
+    object-fit: cover;
+}
+.section-attachments {
     display: grid;
-    grid-template-columns: repeat(2, fit-content(100%));
-    grid-template-rows: repeat(2, fit-content(100%));
+    grid-template-columns: repeat(3, auto);
+    grid-template-rows: repeat(3, auto);
 
     border-radius: var(--unit-size);
     background-color: var(--translucent);
@@ -429,11 +434,12 @@ figure { margin: unset; max-width: 100%; max-height: border-box;}
 
     align-self: flex-start;
 }
-.note-attachments:not(:only-child){
-    margin: 5px;
-}
 
+.note-attachments:not(:only-child) {
+    margin: var(--small-size);
+}
 .note-attachments > figure figcaption {
+    display: flex;
     word-break: break-all;
 }
 
@@ -441,7 +447,7 @@ figure { margin: unset; max-width: 100%; max-height: border-box;}
 .section-widget {
     display: flex;
     flex-direction: column;
-    width: 100%;
+    width: fit-content;
 
     background-color: var(--translucent);
     border-radius: var(--unit-size);
@@ -817,6 +823,7 @@ input[type=file] {
     width: 100%;
     height: auto;
     margin-right: 5px;
+    border-radius: 2px;
 }
 
 /* MEDIA QUERIES */
diff --git a/templates/note/view.html.twig b/templates/note/view.html.twig
index 3e47d30bdc..a55546ffb9 100644
--- a/templates/note/view.html.twig
+++ b/templates/note/view.html.twig
@@ -36,11 +36,11 @@
 
             {% if hide_attachments is not defined %}
                 {% if note.getAttachments() is not empty %}
-                    <div class="note-attachments" tabindex="0" title="{{ 'Note attachments.' | trans }}">
+                    <section class="section-attachments" tabindex="0" title="{{ 'Note attachments.' | trans }}">
                         {% for attachment in note.getAttachments() %}
                             {% include '/attachments/view.html.twig' with {'attachment': attachment, 'note': note} only%}
                         {% endfor %}
-                    </div>
+                    </section>
                 {% endif %}
             {% endif %}