The layout is wrong on a phone

Where the layout comes from#

There is no component framework rewriting the page. The styling is 56 ordered layers imported through one index, and every visible element carries a data-ui name — which is the handle for a bug report as much as for a test. Because the layers are ordered, the same token name defined in more than one of them resolves by order and specificity rather than by whichever file you happened to open, so reading the source is not a reliable way to find out what a value actually is. The computed value on the live element is.

One width is worth naming. The Assistant draws Chat, Needs You, Standing, Memory and Files into a single scroller: at 600 pixels wide and above that is a sidebar, and below it the same content moves into the More menu. A defect that appears only on a narrow phone and never on a desktop very often sits either side of that switch.

What tends to go wrong#

• Something covering something else. A stack of notifications sat over the assistant launcher on one audience's screens: nothing was broken in the markup, and the control simply could not be clicked.
• A remembered size. Panel sizes persist per person, and a size remembered from a wider window can hide a control entirely at a narrower one. Reloading does not clear it, because remembering it is the feature.
• A control pushed off the edge. Long unbreakable text — a URL, an identifier, an address — widens a container and takes the buttons beside it out of reach.
• A theme-dependent difference. Colour and border tokens differ between light and dark, so an element that is merely low-contrast in one can be invisible in the other.

What Connect completed#

Everything except the presentation. The data behind the screen is correct and complete, the request was authorised and scoped as usual, and nothing was lost or altered by the layout being wrong. Work you did before the layout broke is saved; a control you cannot reach is a control you cannot reach, not an action that half happened.

What Connect did not complete#

It did not fall back to a usable arrangement, and it did not reset the remembered panel size on your behalf. There is also no in-product way to report a layout defect from the screen it happens on, so the four details below have to travel with the report by hand.

What you can do#

1. Rotate the device, or resize the window past 600 pixels and back.

   Result If the control reappears, you have found the breakpoint involved, which narrows the search enormously.

2. Reset any panel you have dragged to a custom size.

   Result A remembered size is per person and survives reloads, so it can follow you between sessions and look like a product defect.

3. Switch theme once.

   Result If the element becomes visible in the other theme, the problem is a colour token rather than a layout rule, and that is a different fix.

4. Note the route, the width, the data-ui name and the theme.

   Result Those four reproduce it. Without the width in particular, a layout report cannot be reproduced by anybody on a different screen.

What an administrator can do#

• Look at the same screen as both audiences at the reported width. A defect on one audience's screens and not the other's is common enough here to be checked first rather than last.
• Read the computed value on the live element rather than the stylesheet. With ordered layers, a token that looks correct in the source can be overridden by another layer defining the same name.
• Check whether the element is present but covered. Something rendered underneath a notification stack is a different fix from something that never rendered.

When to escalate#

Escalate when a control cannot be reached at all at a common width — that is a functional defect wearing a cosmetic disguise — or when the same screen is usable for one audience and not the other. Include the four details above; a layout report without a viewport width is usually unreproducible and quietly ends up closed.

Questions#

Related#

• Defects that are invisible in the source and obvious in a browser
• A focus ring that was defined, valid-looking and computed to nothing
• Keyboard navigation gets stuck
• Connect Assistant
• One implementation, two audiences
• Troubleshooting