From 829444a37f2a105099b8f61e4f68b68997daa9bc Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Thu, 6 Jan 2022 23:19:58 +0100
Subject: [PATCH] fix: safari rendering inconsistencies with polaroid border
 compared to other browsers

---
 src/components/Figure.vue  | 11 +++++++----
 src/components/Gallery.vue | 13 +------------
 2 files changed, 8 insertions(+), 16 deletions(-)

diff --git a/src/components/Figure.vue b/src/components/Figure.vue
index e23158a..1fbf6ca 100644
--- a/src/components/Figure.vue
+++ b/src/components/Figure.vue
@@ -26,7 +26,7 @@
       </template>
 
       <figcaption class="figure__meta">
-        <template v-if="!nsfw">
+        <template v-if="!nsfw || $root.nsfw">
           <div class="caption">
             <slot name="caption"></slot>
           </div>
@@ -72,6 +72,10 @@ export default {
   text-align: center;
 
   &__border {
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: center;
+
     margin: auto;
 
     &--polaroid {
@@ -146,12 +150,11 @@ export default {
   }
 
   img {
-    width: 100%;
+    max-width: 100%;
     object-fit: contain;
 
     @include mq-desktop {
-      max-width: 70em;
-      max-height: 80vh;
+      max-height: 60vh;
     }
   }
 
diff --git a/src/components/Gallery.vue b/src/components/Gallery.vue
index d21a382..a938e85 100644
--- a/src/components/Gallery.vue
+++ b/src/components/Gallery.vue
@@ -146,19 +146,8 @@ export default {
       max-height: 80%;
     }
 
-    img {
-      object-fit: contain;
-
-      width: 100%;
-      max-height: 50vh;
-
-      @include mq-desktop {
-        max-height: 80vh;
-      }
-    }
-
     figcaption {
-      flex: 1 0 auto;
+      flex: 0 0 100%;
       text-align: center;
 
       p {