From 41b431de70e9718ca60ce3307b392eb04c1e86a9 Mon Sep 17 00:00:00 2001
From: Aman Agrawal <amanagr@zulip.com>
Date: Wed, 3 Jul 2024 02:15:32 +0000
Subject: [PATCH] info-overlay: Adjust width of overlay and columns.

Objectives are to make the width of overlay scale with font size and
reduce too much gap between text end of first column and
text start of the other column.
---
 web/styles/app_variables.css          | 4 +---
 web/styles/informational_overlays.css | 5 +++++
 web/templates/markdown_help.hbs       | 2 +-
 web/templates/search_operators.hbs    | 2 +-
 4 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css
index ea93846a78..bfb88a31bc 100644
--- a/web/styles/app_variables.css
+++ b/web/styles/app_variables.css
@@ -267,9 +267,7 @@
     /* .settings-sticky-footer */
     --subscriptions-overlay-sticky-footer-height: 60px;
     /* Informational overlay */
-    /* Because zoom breaks at 525px perhaps due to rounding errors, we add a
-       trivial amount of width so the overlay doesn't break. */
-    --informational-overlay-max-width: 550px;
+    --informational-overlay-max-width: 43.75em;
 
     /*
     Maximum height of the compose box when it is not in maximised state. This
diff --git a/web/styles/informational_overlays.css b/web/styles/informational_overlays.css
index 35fb1d3d0f..5cb517bc9a 100644
--- a/web/styles/informational_overlays.css
+++ b/web/styles/informational_overlays.css
@@ -125,3 +125,8 @@
         }
     }
 }
+
+#message-formatting-first-header,
+#search-operators-first-header {
+    width: 40%;
+}
diff --git a/web/templates/markdown_help.hbs b/web/templates/markdown_help.hbs
index 93a41e6977..595d6db2c5 100644
--- a/web/templates/markdown_help.hbs
+++ b/web/templates/markdown_help.hbs
@@ -5,7 +5,7 @@
             <table class="table table-striped table-rounded table-bordered help-table">
                 <thead>
                     <tr>
-                        <th>{{t "You type" }}</th>
+                        <th id="message-formatting-first-header">{{t "You type" }}</th>
                         <th>{{t "You get" }}</th>
                     </tr>
                 </thead>
diff --git a/web/templates/search_operators.hbs b/web/templates/search_operators.hbs
index 14ea8b2e25..26be8bbded 100644
--- a/web/templates/search_operators.hbs
+++ b/web/templates/search_operators.hbs
@@ -4,7 +4,7 @@
             <table class="table table-striped table-rounded table-bordered help-table">
                 <thead>
                     <tr>
-                        <th>{{t "Filter" }}</th>
+                        <th id="search-operators-first-header">{{t "Filter" }}</th>
                         <th>{{t "Effect" }}</th>
                     </tr>
                 </thead>