Merge pull request #977 from basecamp/center-images-in-comments

Center figure attachments and use normal size for Save Changes button

app/assets/stylesheets/rich-text-content.css

@@ -21,7 +21,7 @@
     :where(h6) { font-size: 0.67em; }
 
     :where(p, ul, ol, dl, blockquote, figure, .attachment) {
-      margin-block: var(--block-margin);
+      margin-block: 0 var(--block-margin);
 
       &:not(lexxy-editor &) {
         overflow-wrap: break-word;
@@ -171,13 +171,22 @@
     margin-inline: 0;
     max-inline-size: 100%;
 
-    &:is(figure) img,
-    &:is(figure) video {
-      block-size: auto;
-      display: block;
+    &:is(figure) {
+      inline-size: fit-content;
       margin-inline: auto;
-      max-inline-size: 100%;
-      user-select: none;
+      display: block;
+
+      img, video {
+        block-size: auto;
+        display: block;
+        margin-inline: auto;
+        max-inline-size: 100%;
+        user-select: none;
+      }
+
+      > a {
+        display: block;
+      }
     }
 
     :where(progress) {

app/assets/stylesheets/utilities.css

@@ -79,6 +79,7 @@
   .half-width { inline-size: 50%; }
   .max-width { max-inline-size: 100%; }
   .min-content { inline-size: min-content; }
+  .fit-content { inline-size: fit-content; }
   .max-inline-size { max-inline-size: 100%; }
 
   /* Overflow */

app/views/cards/edit.html.erb

@@ -14,7 +14,7 @@
       <%= general_prompts(@card.collection) %>
     <% end %>
 
-    <%= form.button "Save changes", type: :submit, class: "btn btn--reversed", style: "--btn-background: #{@card.color}" %>
+    <%= form.button "Save changes", type: :submit, class: "btn btn--reversed fit-content", style: "--btn-background: #{@card.color}" %>
     <%= link_to "Close editor and discard changes", collection_card_path(@card.collection, @card), data: { form_target: "cancel" }, hidden: true %>
   <% end %>
 <% end %>