From e4048de0a9f209832e54df4c48bd889628ebb311 Mon Sep 17 00:00:00 2001
From: Satyam Bansal <sbansal1999@gmail.com>
Date: Sat, 10 Jun 2023 00:12:03 +0530
Subject: [PATCH] app_components: Convert "overlay_message_controls" div to
 flexbox.

Previously, the icons were spaced by hardcoded values of margins
and would require changes everytime a new icon is added.
---
 web/styles/app_components.css | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/web/styles/app_components.css b/web/styles/app_components.css
index 63b02c6429..cbf62226df 100644
--- a/web/styles/app_components.css
+++ b/web/styles/app_components.css
@@ -1035,7 +1035,10 @@ div.overlay {
         }
 
         .overlay_message_controls {
-            display: inline-block;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 10px;
             font-size: 0.9em;
 
             [data-tippy-root] {
@@ -1045,7 +1048,6 @@ div.overlay {
 
             .restore-overlay-message {
                 cursor: pointer;
-                margin-right: 5px;
                 color: hsl(170deg 48% 54%);
                 opacity: 0.7;
 
@@ -1056,7 +1058,6 @@ div.overlay {
 
             .delete-overlay-message {
                 cursor: pointer;
-                margin-left: 5px;
                 color: hsl(357deg 52% 57%);
                 opacity: 0.7;