[frontend/components] Update note attachments styling

Iceshrimp.Frontend/Components/AttachmentComponent.razor.css

@@ -1,8 +1,8 @@
 .attachment {
     max-width: 100%;
     object-fit: contain;
-    max-height: 25rem;
-    border-radius: 0.5rem;
+    max-height: 30rem;
+    aspect-ratio: 3/2;
 }
 
 audio.attachment {
@@ -27,10 +27,11 @@ audio.attachment {
 }
 
 .wrapper {
-    flex: 1 1 48%;
-    margin-right: 0.2em;
-    margin-left: 0.2em;
-    text-align: center;
+    display: flex;
+    justify-content: center;
+    overflow: clip;
+    background: var(--background-color);
+    border-radius: 0.5rem;
 }
 
 .blur-image {

Iceshrimp.Frontend/Components/Note/NoteAttachments.razor

@@ -1,5 +1,5 @@
 @using Iceshrimp.Shared.Schemas.Web
-<div class="attachment-container">
+<div class="attachment-container" data-count="@Attachments.Count">
     @foreach (var element in Attachments)
     {
         <AttachmentComponent Attachment="element" OnOpen="Open"/>

Iceshrimp.Frontend/Components/Note/NoteAttachments.razor.css

@@ -1,4 +1,43 @@
 .attachment-container {
-    display: flex;
-    flex-wrap: wrap;
+    display: grid;
+    width: 100%;
+    gap: 0.5em;
 }
+
+.attachment-container:not(:is([data-count="1"])) {
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+}
+
+.attachment-container:not(:is([data-count="3"])) {
+    > .wrapper:last-of-type:is(:nth-child(odd)) {
+        grid-column: 1 / -1;
+    }
+}
+
+.attachment-container[data-count="1"] {
+    grid-template-columns: 1fr;
+    gap: 0;
+    
+    .wrapper > .attachment {
+        aspect-ratio: unset;
+    }
+}
+
+.attachment-container[data-count="2"] {
+    > .wrapper:nth-of-type(1) {
+        grid-area: 1 / 1 / 3 / 2;
+    }
+}
+
+.attachment-container[data-count="2"] {
+    > .wrapper:nth-of-type(2) {
+        grid-area: 1 / 2 / 3 / 3;
+    }
+}
+
+.attachment-container[data-count="3"] {
+    > .wrapper:nth-of-type(1) { 
+        grid-area: 1 / 1 / 3 / 2; 
+    }
+}