[CSS] Note attachments uses a grid layout now.

public/assets/css/base.css

@@ -33,6 +33,7 @@ html {
     --main-size:    1.5rem;
     --medium-size:  1.2rem;
     --small-size:   1rem;
+    --smaller-size: 0.8rem;
 
 
     /* transitions and animations */
@@ -122,7 +123,7 @@ a:hover {
 }
 
 figcaption a:link {
-    font-size: var(--small-size);
+    font-size: var(--smaller-size);
     color: var(--white);
 }
 
@@ -402,38 +403,38 @@ hr {
 }
 
 .note-content {
+    display: flex;
+    flex-direction: column;
     border-radius: 0 0 var(--unit-size) var(--unit-size);
-
-    height: max-content;
     padding: var(--small-size);
 }
+.note-content * {
+    max-width: 100%;
+    max-height: 100%;
+}
 
 .note-text {
     margin-bottom: var(--unit-size);
 }
 
-.note-attachments * {
-    display: flex;
-    max-width: 100%;
-}
+figure { margin: unset; max-width: 100%; max-height: border-box;}
+.note-content > .note-attachments {
+    display: grid;
+    grid-template-columns: repeat(2, fit-content(100%));
+    grid-template-rows: repeat(2, fit-content(100%));
 
-.note-attachments > figure {
-    display: flex;
-    flex-direction: column;
-    margin: 0;
     border-radius: var(--unit-size);
     background-color: var(--translucent);
-    padding: var(--small-size);
-}
+    padding: var(--smaller-size);
 
-.note-attachments > figure * {
-    width: max-content;
-    height: auto;
+    align-self: flex-start;
+}
+.note-attachments:not(:only-child){
+    margin: 5px;
 }
 
 .note-attachments > figure figcaption {
     word-break: break-all;
-    padding-top: var(--small-size);
 }
 
 /* SECTIONS */

templates/note/view.html.twig

@@ -35,12 +35,14 @@
             </div>
 
             {% if hide_attachments is not defined %}
+                {% if note.getAttachments() is not empty %}
                     <div class="note-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>
                 {% endif %}
+            {% endif %}
 
             {% if note.getLinks() is not empty %}
                 <div tabindex="0" class="note-links" title="{{ 'Shared links.' | trans }}">