<div class="context-glyph-tile">
<!---->
<div class="c-toggle" ng-if="!controller.isMiniWidget" tabindex="-1" role="checkbox" aria-label="Flow started checkbox: true" ng-attr-title="{{controller.getFlowStateCommandText(row.flow)}}: {{row.displayName}}" title="Turn off: Button -> Condition,Response,Send me an email notification,Send me a mobile notification">
<button role="checkbox" data-test="flowlist-toggle" ng-click="controller.changeFlowState($event, row.flow)" aria-checked="true"></button>
<span class="toggle-text">On</span>
</div>
<!---->
<!---->
<button class="img-button c-glyph glyph-edit" ng-class="[command.iconUrl, {'disabled': controller.isCommandDisabled(command)}]" aria-label="Flow action: Edit flow" role="button" ng-repeat="command in row.commands" ng-click="controller.clickCommand($event, command)" ng-attr-title="{{controller.getCommandText(command)}}: {{row.displayName}}" data-test="flowlist-edit" title="Edit flow: Button -> Condition,Response,Send me an email notification,Send me a mobile notification">
<span class="x-screen-reader">Edit flow</span>
</button>
<!---->
<button class="img-button c-glyph glyph-owners" ng-class="[command.iconUrl, {'disabled': controller.isCommandDisabled(command)}]" aria-label="Flow action: Invite another owner" role="button" ng-repeat="command in row.commands" ng-click="controller.clickCommand($event, command)" ng-attr-title="{{controller.getCommandText(command)}}: {{row.displayName}}" data-test="flowlist-owners" title="Invite another owner: Button -> Condition,Response,Send me an email notification,Send me a mobile notification">
<span class="x-screen-reader">Invite another owner</span>
</button>
<!---->
<!---->
<!--cut out-->
</div>
URL: https://us.flow.microsoft.com/manage/environments/Default-96278e7e-99e9-4839-88c1-22a2a1dc70ab/flows
Browser / Version: Firefox ESR 60.2.2esr
Operating System: Windows 10 Pro
Tested Another Browser: Yes
Problem type: Design is broken
Description: “On/Off” toggle button labels are displayed misaligned
Prerequisites:
1. Microsoft account (Enterprise) available and signed in.
2. Flow created (e.g “Button -> Condition,Response,Send me an email notification,Send me a mobile notification ”)
Steps to Reproduce:
1. Navigate to https://us.flow.microsoft.com/manage/environments/Default-96278e7e-99e9-4839-88c1-22a2a1dc70ab/flows
2. Observe “On/Off” toggle button label position.
Expected Behavior:
Label is bottom aligned.
Actual Behavior:
Label is top aligned.
Note:
1. Reproducible on Firefox Nightly 64.0a1 (2018-10-18) and Firefox Release 62.0.3.
2. Not reproducible on Chrome 70.0.3538.67 and Microsoft Edge 41.16299.726.0.
3. Screenshot attached.
4. Also reproducible for the "Edit", "Share" and "More" button.
Affected area:
Watchers:
@softvision-sergiulogigan
@softvision-oana-arbuzov
sv; type: enterprise-survey
From webcompat.com with ❤️