From 28d9c02479071f5bdc35219b0f9f36082a14f3d2 Mon Sep 17 00:00:00 2001
From: Shubham Padia <shubham@zulip.com>
Date: Tue, 3 Sep 2024 10:15:25 +0000
Subject: [PATCH] css: Have `move-handle` for every movable row instance.

The original motivation was to remove the `+ i` instances because of
https://chat.zulip.org/#narrow/stream/6-frontend/topic/CSS.20selector.20performance/near/1934360.
But it seemed better to have similar html structure and css across all
movable rows.
---
 web/styles/settings.css                       | 22 ++-----------------
 .../settings/admin_profile_field_list.hbs     |  6 +++--
 .../settings/profile_field_choice.hbs         |  6 +++--
 3 files changed, 10 insertions(+), 24 deletions(-)

diff --git a/web/styles/settings.css b/web/styles/settings.css
index b93a30d632..feadadcd42 100644
--- a/web/styles/settings.css
+++ b/web/styles/settings.css
@@ -776,37 +776,19 @@ input[type="checkbox"] {
 
 .admin_profile_fields_table,
 .edit_profile_field_choices_container,
-.profile_field_choices_table {
-    .movable-row {
-        cursor: move;
-
-        .fa-ellipsis-v {
-            color: hsl(0deg 0% 75%);
-            position: relative;
-            top: 1px;
-
-            + i {
-                margin-right: 5px;
-            }
-        }
-    }
-}
-
+.profile_field_choices_table,
 .admin_linkifiers_table {
     .movable-row {
         .move-handle {
             cursor: move;
             user-select: none;
+            margin-right: 5px;
         }
 
         .fa-ellipsis-v {
             color: hsl(0deg 0% 75%);
             position: relative;
             top: 1px;
-
-            + i {
-                margin-right: 5px;
-            }
         }
     }
 }
diff --git a/web/templates/settings/admin_profile_field_list.hbs b/web/templates/settings/admin_profile_field_list.hbs
index b2e6ab59aa..0af34ac9af 100644
--- a/web/templates/settings/admin_profile_field_list.hbs
+++ b/web/templates/settings/admin_profile_field_list.hbs
@@ -2,8 +2,10 @@
 <tr class="profile-field-row movable-row" data-profile-field-id="{{id}}">
     <td class="profile_field_name">
         {{#if ../can_modify}}
-        <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
-        <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
+        <span class="move-handle">
+            <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
+            <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
+        </span>
         {{/if}}
         <span class="profile_field_name">{{name}}</span>
     </td>
diff --git a/web/templates/settings/profile_field_choice.hbs b/web/templates/settings/profile_field_choice.hbs
index 19cbf0bee8..09c769137f 100644
--- a/web/templates/settings/profile_field_choice.hbs
+++ b/web/templates/settings/profile_field_choice.hbs
@@ -1,6 +1,8 @@
 <div class='choice-row movable-row' data-value="{{value}}">
-    <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
-    <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
+    <span class="move-handle">
+        <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
+        <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
+    </span>
     <input type='text' class="modal_text_input" placeholder='{{t "New option" }}' value="{{ text }}" />
 
     <button type='button' class="button rounded small delete-choice tippy-zulip-tooltip {{#if new_empty_choice_row}} hide {{/if}}" data-tippy-content="{{t 'Delete' }}">