From 46f338f54fa8154396da44608731e3dc3f2dc9b5 Mon Sep 17 00:00:00 2001
From: Sahil Batra <sahil@zulip.com>
Date: Thu, 2 Oct 2025 08:51:55 +0530
Subject: [PATCH] dropdown-widget: Fix alignment of disabled option.

The alignment of icon and text of the disabled option in
dropdown widget was somewhow broken due to an extra span
element present which broke the grid layout used for
rendering the icon and text properly.

This also makes the layout consistent with other options
shown with icon.

This was due to e643d7e6fdbc221 which resulted in space
between icon and text. We could have fix that by using
"~" character to remove whitespace in handlebar templates
but making the layout consistent felt a better choice.
---
 web/styles/app_components.css   |  8 +++++++-
 web/templates/dropdown_list.hbs | 20 +++++++++-----------
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/web/styles/app_components.css b/web/styles/app_components.css
index beb4027139..dec6421a13 100644
--- a/web/styles/app_components.css
+++ b/web/styles/app_components.css
@@ -1156,9 +1156,15 @@ div.overlay .flex.overlay-content > .overlay-container,
 .setting-disabled-option {
     color: hsl(38deg 46% 54%);
 
+    .setting-disabled-option-text,
     .setting-disabled-option-icon {
+        color: hsl(38deg 46% 54%);
+    }
+
+    .setting-disabled-option-icon {
+        align-self: center;
         /* Values set to match text alignment in stream dropdown. */
-        padding: 0 5px 0 1px;
+        padding: 0 5px 0 2px;
     }
 }
 
diff --git a/web/templates/dropdown_list.hbs b/web/templates/dropdown_list.hbs
index c29946e3ff..f918051814 100644
--- a/web/templates/dropdown_list.hbs
+++ b/web/templates/dropdown_list.hbs
@@ -24,22 +24,20 @@
             </span>
         </a>
         {{else}}
-        <a class="dropdown-list-item-common-styles">
+        <a class="dropdown-list-item-common-styles {{#if is_setting_disabled}}setting-disabled-option{{/if}}">
             {{#if stream}}
                 {{> inline_decorated_channel_name stream=stream show_colored_icon=true}}
             {{else if is_direct_message}}
                 <i class="zulip-icon zulip-icon-users channel-privacy-type-icon"></i> <span class="decorated-dm-name">{{name}}</span>
             {{else if is_setting_disabled}}
-                <span class="setting-disabled-option">
-                    {{#if show_disabled_icon}}
-                        <i class="setting-disabled-option-icon fa fa-ban" aria-hidden="true"></i>
-                    {{/if}}
-                    {{#if show_disabled_option_name}}
-                        <span class="dropdown-list-text-neutral">{{name}}</span>
-                    {{else}}
-                        <span class="dropdown-list-text-neutral">{{t "Disable" }}</span>
-                    {{/if}}
-                </span>
+                {{#if show_disabled_icon}}
+                    <i class="setting-disabled-option-icon fa fa-ban" aria-hidden="true"></i>
+                {{/if}}
+                {{#if show_disabled_option_name}}
+                    <span class="setting-disabled-option-text dropdown-list-text-neutral">{{name}}</span>
+                {{else}}
+                    <span class="setting-disabled-option-text dropdown-list-text-neutral">{{t "Disable" }}</span>
+                {{/if}}
             {{else if (eq unique_id -2)}}
                 {{!-- This is the option for PresetUrlOption.MAPPING --}}
                 <i class="zulip-icon zulip-icon-equal channel-privacy-type-icon" aria-hidden="true"></i> <span class="dropdown-list-text-neutral">{{name}}</span>