---
robots: nofollow, noindex
tags: partners
---

# Our investment in dual-screen

## Our achievements so far

We've recently updated our components such that every component that uses `Callout` underneath is hinge-aware and positions itself correctly when opened near a hinge.

The list of components that are affected by this update (although still in need of more thorough testing) are:
- BasePicker
- Callout
- ComboBox
- ContextualMenu
- DatePicker
- Dropdown
- ExpandingCard
- FloatingPicker
- FocusTrapCallout
- Keytip
- PlainCard
- TeachingBubble
- Tooltip

Below are some animations showing what these changes entail. The animations show the before and after of a `Callout` and `ContextualMenu` whose targets are split in-between the two screens. Before, the components would also open in-between the screens, splitting their content. Now, the components render entirely in one screen, chosen by the coordinates of their target:

__Before:__

__After:__

## How to develop/test Fluent UI for dual-screen devices

If you want to test how Fluent UI works on dual-screen devices follow the steps outlined below:
1. Download the [Microsoft Emulator app](https://www.microsoft.com/store/productId/9N0TN65P5BF6) from the Microsoft Store.
2. Download a [Windows 10X emulator image](https://www.microsoft.com/store/productId/9PJSS0PX0J6K) for the emulator (*latest released image at the time of writing linked*).
3. Once you have your Windows 10X environment running, download and install [the latest version of Microsoft Edge from the Canary channel](https://www.microsoftedgeinsider.com/en-us/download/).
4. Once the latest version of Edge Canary is up and running go to [the page for activating Edge browser flags](edge://flags/#enable-experimental-web-platform-features) and enable the `enable-experimental-web-platform-features` flag.
5. Restart your browser, once done you should be able to make use of the experimental features. To test this try opening the browser console and running `window.getWindowSegments()`.

_**Note:** There is a known bug in the current Windows 10X image in the Microsoft Store where the `getWindowSegments` function is implemented but it will always return one screen. This will get addressed in a future image._

## List of Components that need to be tested for hinge awarness

The following list are the set of Fluent UI Components that need to be tested to ensure that they are hinge aware. Many of these components leverage shared positioning logic - so once that solution is updated we need to ensure that these components behaviors are aligned to Goals #1 and #2.

- [x] Callout

- __Before:__

- __After:__

- [ ] Callout with Calendar hosted inside
- [ ] CoachMark
- [x] ComboBox

- __Before:__

- __After:__

- [x] ContextualMenu

- __Before:__

- __After:__

- [x] DatePicker

- __Before:__

- __After:__

- [ ] Dialog
- [x] Dropdown

- __Before:__

- __After:__

- [ ] HoverCard
- [ ] MessageBar (Follow up needed on this one)
- [ ] Modal
- [ ] Overlay
- [x] People Picker

- __Before:__

- __After:__

- [x] TeachingBubble

- __Before:__

- __After:__

- [x] Tooltip

- __Before:__

- __After:__