style emojis and stamps properly

assets/css/bootstrap-style.css

@@ -8270,7 +8270,7 @@ textarea.form-control-lg {
   margin-left: 0 !important;
 }
 
-.mx-1 {
+.mx-1, .emoji {
   margin-right: 0.25rem !important;
   margin-left: 0.25rem !important;
 }
@@ -12938,6 +12938,16 @@ textarea.form-control-lg {
   max-height: 40vh;
 }
 
+.stamp {
+  width: 96px;
+  height: 96px;
+}
+
+.emoji {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
 .thumbnail-hover-dark {
   overflow: hidden;
 }

assets/css/bootstrap-style.scss

@@ -175,6 +175,18 @@ $utilities: map-merge(
   max-height: 40vh;
 }
 
+.stamp {
+  width: 96px;
+  height: 96px;
+}
+
+.emoji {
+  width: 1.5rem;
+  height: 1.5rem;
+  @extend .mx-1;
+}
+
+
 /// TODO: need usability tests to determine whether these variables are ok; can also cause weird moire/pixel level scaling issues with novel thumbnails (especially the default cover which has intricate details)
 .thumbnail-hover-dark {
   overflow: hidden;

assets/views/artwork.jet.html

@@ -92,10 +92,10 @@
                   <!-- Stamp or emoji -->
                   <!-- TODO: .Stamp occasionally templates in text (which should be part of the main comment text) instead of an image, causing breakage in the layout. See the comment by "Unknown417" on /artworks/107442519 for an example -->
                   {{- if .Stamp }}
-                  <img class="img-fluid rounded object-fit-cover me-2" src="/proxy/s.pximg.net/common/images/stamp/generated-stamps/{{ .Stamp }}_s.jpg" alt="/proxy/s.pximg.net/common/images/stamp/generated-stamps/{{ .Stamp }}_s.jpg" style="width: 96px; height: 96px" />
+                  <img class="stamp img-fluid rounded object-fit-cover me-2" src="/proxy/s.pximg.net/common/images/stamp/generated-stamps/{{ .Stamp }}_s.jpg" alt="/proxy/s.pximg.net/common/images/stamp/generated-stamps/{{ .Stamp }}_s.jpg"/>
                   {{- else }}
                   <!-- Comment with emojis -->
-                  <p class="m-0">{{ raw: parseEmojis(.Context) }}</p>
+                  <p class="d-flex align-items-center m-0">{{ raw: parseEmojis(.Context) }}</p>
                   {{ end }}
                 </div>
               </div>

assets/views/novel.jet.html

@@ -350,10 +350,10 @@
 
                     <!-- Stamp or emoji -->
                     {{- if .Stamp }}
-                    <img class="img-fluid rounded object-fit-cover me-2" src="/proxy/s.pximg.net/common/images/stamp/generated-stamps/{{ .Stamp }}_s.jpg" alt="/proxy/s.pximg.net/common/images/stamp/generated-stamps/{{ .Stamp }}_s.jpg" style="width: 96px; height: 96px" />
+                    <img class="stamp img-fluid rounded object-fit-cover me-2" src="/proxy/s.pximg.net/common/images/stamp/generated-stamps/{{ .Stamp }}_s.jpg" alt="/proxy/s.pximg.net/common/images/stamp/generated-stamps/{{ .Stamp }}_s.jpg"/>
                     {{- else }}
                     <!-- Comment with emojis -->
-                    <p class="m-0">{{ raw: parseEmojis(.Context) }}</p>
+                    <p class="d-flex align-items-center m-0">{{ raw: parseEmojis(.Context) }}</p>
                     {{ end }}
                   </div>
                 </div>