building-a-screenlisted

# Building a screen The bugs here are not logic bugs. The code is right, the data is right, and the window still looks broken. They are the same handful every time. ## Fill the window, or explain why not A screen that sizes to its content leaves its footer floating in the middle of an empty window — the single most common fault, and the easiest to miss on a machine with a small window. A column that must fill needs **both** `flex: 1` and `min-height: 0`. Without the second, a flex child refuses to shrink below its content and the scroll happens on the wrong element, or not at all. The same applies horizontally with `min-width: 0`. Match how the screens around you attach to the layout. If every other screen returns its toolbar and body as direct children of the scrolling container, a new one that wraps them in an extra `div` is a screen that will not fill — the wrapper is an unstyled block and the flex chain stops there. Check the class you reach for actually exists before trusting it to do something. ## Never scroll the whole window sideways Wide content — a table, a diff, a code block, a long path — scrolls **inside its own box**, with `overflow-x: auto` on that box and `min-width: 0` on its flex parent. A horizontal scrollbar on the window itself is always a bug, and it is caused by one child that refuses to shrink. Long unbroken strings need `overflow-wrap: anywhere` or a truncation with the full value in a `title`. A hash, a URL and a file path will all otherwise