style: image attachments not being centered (#4313)

* refactor: DRY: add a CSS variable

This is a preparation to fix narrow image attachments not being
centered inside message body.

* style: image attachments not being centered

The bug was introduced in 260fdd2.
Somehow even `display: block` doesn't make the button
fill the parent.

CHANGELOG.md

@@ -8,6 +8,7 @@
 - move the "Realtime Webxdc Channels" setting out of the "Experimental" section #4316
 
 ## Fixed
+- image attachments not being centered within a message #4313
 
 <a id="1_47_1"></a>
 

packages/frontend/scss/message/_message-attachment.scss

@@ -6,9 +6,10 @@
   text-align: center;
   position: relative;
 
-  margin-left: -12px;
-  margin-right: -12px;
-  margin-top: -10px;
+  margin-left: calc(-1 * var(--msg-container-padding-horizontal));
+  margin-right: calc(-1 * var(--msg-container-padding-horizontal));
+  width: calc(100% + 2 * var(--msg-container-padding-horizontal));
+  margin-top: calc(-1 * var(--msg-container-padding-top));
   margin-bottom: -12px;
 
   border-radius: 16px;

packages/frontend/scss/message/_message.scss

@@ -54,9 +54,11 @@
     display: inline-block;
     max-width: 100%;
     border-radius: 16px;
-    padding-right: 12px;
-    padding-left: 12px;
-    padding-top: 10px;
+    --msg-container-padding-horizontal: 12px;
+    --msg-container-padding-top: 10px;
+    padding-right: var(--msg-container-padding-horizontal);
+    padding-left: var(--msg-container-padding-horizontal);
+    padding-top: var(--msg-container-padding-top);
     padding-bottom: 10px;
 
     .msg-body {