typeaheads: Reduce left padding for all elements.

This required taking special care of typeaheads with user circle
and making sure long typeaheads wrap correctly.

web/styles/compose.css

@@ -1295,9 +1295,7 @@ textarea.new_message_textarea {
 
     .typeahead-header {
         margin: 0;
-        padding-left: 20px;
-        padding-right: 20px;
-        padding-top: 4px;
+        padding: 4px 10px;
         border-top: 1px solid hsl(0deg 0% 0% / 20%);
         display: flex;
         align-items: center;

web/styles/zulip.css

@@ -800,9 +800,9 @@ strong {
         word-break: break-word;
 
         & a {
-            display: block;
-            padding: 3px 20px;
-            clear: both;
+            display: flex;
+            padding: 3px 10px;
+            gap: 5px;
             font-weight: normal;
             line-height: 20px;
             color: var(--color-dropdown-item);
@@ -829,12 +829,18 @@ strong {
             .user_circle {
                 width: var(--length-user-status-circle);
                 height: var(--length-user-status-circle);
-                margin: 0 5px 0 -6px;
                 position: relative;
-                float: left;
-                top: 6px;
-                right: 8px;
-                display: inline-block;
+                left: -2px;
+                flex-shrink: 0;
+                align-self: center;
+            }
+
+            .typeahead-text-container {
+                align-self: center;
+
+                & > * {
+                    margin-right: 3px;
+                }
             }
         }
     }
@@ -1366,11 +1372,6 @@ div.focused-message-list {
     display: inline-block;
     height: 21px;
     width: 21px;
-    position: relative;
-    margin-top: -4px;
-    vertical-align: middle;
-    top: 2px;
-    right: 8px;
     border-radius: 4px;
 
     /* For FontAwesome icons and zulip icons used in place of images for some users. */
@@ -1382,8 +1383,7 @@ div.focused-message-list {
     }
 
     &.no-presence-circle {
-        margin-left: 9px;
-        top: 3px;
+        margin-left: 14px;
     }
 }
 

web/templates/typeahead_list_item.hbs

@@ -4,7 +4,6 @@
     {{else}}
         <span class='emoji emoji-{{ emoji_code }}'></span>
     {{/if}}
-    &nbsp;&nbsp;
 {{else if is_person}}
     {{#if user_circle_class}}
     <span class="{{user_circle_class}} user_circle"></span>
@@ -17,30 +16,31 @@
 {{else if is_user_group}}
     <i class="typeahead-image zulip-icon zulip-icon-triple-users no-presence-circle" aria-hidden="true"></i>
 {{/if}}
-<strong class="typeahead-strong-section">
-    {{~#if stream}}
-        {{> inline_decorated_stream_name stream=stream }}
-    {{else}}
-        {{~ primary ~}}
+{{!-- Separate container to ensure overflowing text remains in this container. --}}
+<div class="typeahead-text-container">
+    <strong class="typeahead-strong-section">
+        {{~#if stream}}
+            {{> inline_decorated_stream_name stream=stream }}
+        {{else}}
+            {{~ primary ~}}
+        {{/if}}
+    </strong>
+    {{~#if has_pronouns}}
+        <span class="pronouns">({{pronouns}})</span>
+    {{~/if}}
+    {{~#if should_add_guest_user_indicator}}
+        <i>({{t 'guest'}})</i>
+    {{~/if}}
+    {{~#if has_status}}
+    {{> status_emoji status_emoji_info}}
+    {{~/if}}
+    {{~#if has_secondary}}
+    <small class="autocomplete_secondary">
+        {{~ secondary ~}}
+    </small>
+    {{#if is_unsubscribed}}
+    <span class="fa fa-exclamation-triangle unsubscribed_icon"
+      title="{{t 'You are not currently subscribed to this channel.' }}"></span>
     {{/if}}
-</strong>
-{{~#if has_pronouns}}
-    <span class="pronouns">({{pronouns}})</span>
-{{~/if}}
-{{~#if should_add_guest_user_indicator}}
-    <i>({{t 'guest'}})</i>
-{{~/if}}
-{{~#if has_status}}
-{{> status_emoji status_emoji_info}}
-{{~/if}}
-{{~#if has_secondary}}
-&nbsp;&nbsp;
-<small class="autocomplete_secondary">
-    {{~ secondary ~}}
-</small>
-{{#if is_unsubscribed}}
-&nbsp;
-<span class="fa fa-exclamation-triangle unsubscribed_icon"
-  title="{{t 'You are not currently subscribed to this channel.' }}"></span>
-{{/if}}
-{{~/if}}
+    {{~/if}}
+</div>

web/tests/composebox_typeahead.test.js

@@ -894,18 +894,24 @@ test("initialize", ({override, override_rewire, mock_template}) => {
                 // options.highlighter_html()
                 options.query = "Kro";
                 actual_value = options.highlighter_html("kronor");
-                expected_value = '<strong class="typeahead-strong-section">kronor</strong>';
+                expected_value =
+                    '<div class="typeahead-text-container">\n' +
+                    '    <strong class="typeahead-strong-section">kronor    </strong></div>\n';
                 assert.equal(actual_value, expected_value);
 
                 // Highlighted content should be escaped.
                 options.query = "<";
                 actual_value = options.highlighter_html("<&>");
-                expected_value = '<strong class="typeahead-strong-section">&lt;&amp;&gt;</strong>';
+                expected_value =
+                    '<div class="typeahead-text-container">\n' +
+                    '    <strong class="typeahead-strong-section">&lt;&amp;&gt;    </strong></div>\n';
                 assert.equal(actual_value, expected_value);
 
                 options.query = "even m";
                 actual_value = options.highlighter_html("even more ice");
-                expected_value = '<strong class="typeahead-strong-section">even more ice</strong>';
+                expected_value =
+                    '<div class="typeahead-text-container">\n' +
+                    '    <strong class="typeahead-strong-section">even more ice    </strong></div>\n';
                 assert.equal(actual_value, expected_value);
 
                 // options.sorter()
@@ -1129,8 +1135,9 @@ test("initialize", ({override, override_rewire, mock_template}) => {
                 expected_value =
                     `    <span class="user_circle_empty user_circle"></span>\n` +
                     `    <img class="typeahead-image" src="http://zulip.zulipdev.com/avatar/${othello.user_id}?s&#x3D;50" />\n` +
-                    `<strong class="typeahead-strong-section">Othello, the Moor of Venice</strong>&nbsp;&nbsp;\n` +
-                    `<small class="autocomplete_secondary">othello@zulip.com</small>\n`;
+                    '<div class="typeahead-text-container">\n' +
+                    '    <strong class="typeahead-strong-section">Othello, the Moor of Venice    </strong>    <small class="autocomplete_secondary">othello@zulip.com</small>\n' +
+                    "</div>\n";
                 assert.equal(actual_value, expected_value);
                 // Reset the email such that this does not affect further tests.
                 othello.delivery_email = null;
@@ -1139,7 +1146,10 @@ test("initialize", ({override, override_rewire, mock_template}) => {
                 ct.get_or_set_token_for_testing("hamletcharacters");
                 actual_value = options.highlighter_html(hamletcharacters);
                 expected_value =
-                    '    <i class="typeahead-image zulip-icon zulip-icon-triple-users no-presence-circle" aria-hidden="true"></i>\n<strong class="typeahead-strong-section">hamletcharacters</strong>&nbsp;&nbsp;\n<small class="autocomplete_secondary">Characters of Hamlet</small>\n';
+                    '    <i class="typeahead-image zulip-icon zulip-icon-triple-users no-presence-circle" aria-hidden="true"></i>\n' +
+                    '<div class="typeahead-text-container">\n' +
+                    '    <strong class="typeahead-strong-section">hamletcharacters    </strong>    <small class="autocomplete_secondary">Characters of Hamlet</small>\n' +
+                    "</div>\n";
                 assert.equal(actual_value, expected_value);
 
                 // matching