Why the title is measured in pixels
Search results cut titles off by width, not by count: about 600 pixels of 20px Arial on a desktop, so a title full of W and M runs out sooner than one of i and l. The meter measures the title in that font as you type and goes amber as it gets close and red once it will be cut, and the preview shows where the ... would fall.
The description
Descriptions are usually shown up to about 920 pixels of 14px Arial, roughly 155 to 158 characters, and longer ones end in an ellipsis. One under 70 characters is marked as short, since it leaves room unused that could say what the page offers.
The address line
Above the title, the result shows the site name, or the domain when there is none, and the page's address written as a trail: https://example.com › recipes › sourdough. Enter the page URL to see yours.
Questions
Why did Google show a different title or description?
Search engines rewrite them when they think another line from the page matches the search better, or when the title is padded with keywords. A title that describes the page plainly is changed less often, but the preview is a likely result rather than a promise.
Does it show mobile results?
It shows a desktop result only. Phones wrap a title over more than one line, so where a long one is cut there differs from what you see here.
How long should a meta description be?
Long enough to say what the page offers, usually 120 to 158 characters. Shorter is fine if it says it all; anything past about 920 pixels is cut off on a desktop result.