Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

visibility_policy_popover: Fix popover shrinking bug on Safari. 

A bug was observed on Safari where the visibility policy switcher
popover was shrinking beyond the width of the policy switcher, hiding
a portion of the switcher component.

This was due to the presence of the `width: min-content` on the
popover for supporting dynamic popover menu sizing based on the content
of the menu items, in tandem with some issue in Safari since it worked
fine on other browsers.

This commit adds the `.popover-menu-label` class to the visibility
policy switcher's label to enforce `max-content` width on the label
element, which in turn fixes the popover shrinking issue on Safari.
This commit is contained in:
Sayam Samal 2024-06-19 18:56:04 +05:30 committed by Tim Abbott
parent eb93738873
commit fec89ad70d
1 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/templates/popovers/change_visibility_policy_popover.hbs
View File

@ -5,24 +5,24 @@
<input type="radio" id="select-muted-policy" class="tab-option" name="visibility-policy-select" data-visibility-policy="{{all_visibility_policies.MUTED}}" {{#if (eq visibility_policy all_visibility_policies.MUTED)}}checked{{/if}} />
<label role="menuitemradio" class="tab-option-content" for="select-muted-policy" tabindex="0">
<i class="zulip-icon zulip-icon-mute-new" aria-hidden="true"></i>
{{t "Mute"}}
<span class="popover-menu-label">{{t "Mute"}}</span>
</label>
<input type="radio" id="select-inherit-policy" class="tab-option" name="visibility-policy-select" data-visibility-policy="{{all_visibility_policies.INHERIT}}" {{#if (eq visibility_policy all_visibility_policies.INHERIT)}}checked{{/if}} />
<label role="menuitemradio" class="tab-option-content" for="select-inherit-policy" tabindex="0">
<i class="zulip-icon zulip-icon-inherit" aria-hidden="true"></i>
{{t "Default"}}
<span class="popover-menu-label">{{t "Default"}}</span>
</label>
{{#if (or stream_muted topic_unmuted)}}
<input type="radio" id="select-unmuted-policy" class="tab-option" name="visibility-policy-select" data-visibility-policy="{{all_visibility_policies.UNMUTED}}" {{#if (eq visibility_policy all_visibility_policies.UNMUTED)}}checked{{/if}} />
<label role="menuitemradio" class="tab-option-content" for="select-unmuted-policy" tabindex="0">
<i class="zulip-icon zulip-icon-unmute-new" aria-hidden="true"></i>
{{t "Unmute"}}
<span class="popover-menu-label">{{t "Unmute"}}</span>
</label>
{{/if}}
<input type="radio" id="select-followed-policy" class="tab-option" name="visibility-policy-select" data-visibility-policy="{{all_visibility_policies.FOLLOWED}}" {{#if (eq visibility_policy all_visibility_policies.FOLLOWED)}}checked{{/if}} />
<label role="menuitemradio" class="tab-option-content" for="select-followed-policy" tabindex="0">
<i class="zulip-icon zulip-icon-follow" aria-hidden="true"></i>
{{t "Follow"}}
<span class="popover-menu-label">{{t "Follow"}}</span>
</label>
<span class="slider"></span>
</div>