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

@@ -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

web/styles/informational_overlays.css

@@ -125,3 +125,8 @@
         }
     }
 }
+
+#message-formatting-first-header,
+#search-operators-first-header {
+    width: 40%;
+}

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>

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>