Re-add margin to tiles based on EventTileBubble (#9015)

* Re-add margin to HistoryTile, which is based on EventTileBubble

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Readd margin to the other tiles based on EventTileBubble

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Default margin is not required for mx_MJitsiWidgetEvent as it appears inside EventTile

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Cancel left value for cryptoEvent on IRC layout

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

res/css/views/messages/_CreateEvent.scss

@@ -14,7 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_CreateEvent {
+.mx_EventTileBubble.mx_CreateEvent {
+    margin: var(--EventTileBubble_margin-block) auto;
+
     &::before {
         background-color: $header-panel-text-primary-color;
         mask-image: url('$(res)/img/element-icons/chat-bubbles.svg');

res/css/views/messages/_EventTileBubble.scss

@@ -15,6 +15,8 @@ limitations under the License.
 */
 
 .mx_EventTileBubble {
+    --EventTileBubble_margin-block: 10px; // TODO: Use a spacing variable
+
     background-color: $dark-panel-bg-color;
     padding: 10px; // TODO: Use a spacing variable
     border-radius: 8px;

res/css/views/messages/_MJitsiWidgetEvent.scss

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_MJitsiWidgetEvent {
+.mx_EventTileBubble.mx_MJitsiWidgetEvent {
     &::before {
         background-color: $header-panel-text-primary-color; // XXX: Variable abuse
         mask-image: url('$(res)/img/element-icons/call/video-call.svg');

res/css/views/messages/_common_CryptoEvent.scss

@@ -14,7 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_cryptoEvent {
+.mx_EventTileBubble.mx_cryptoEvent {
+    margin: var(--EventTileBubble_margin-block) auto;
+
     // white infill for the transparency
     &.mx_cryptoEvent_icon::before {
         background-color: #ffffff;