You do seem to have spotted a bug in the way row heights are specified in a page template.
In my pics below, the purple outline is Firefox developer tools outlining a Flex container div class=v-input__control, the blue highlight is the widget div it sits within.
I see that in your template, the row height is set to Comfortable (38px).
When the 'Text' field has Size Auto, the field has a height of 48px, ignoring the template row height.
If you set the field size to 6x1, the row does get the template height of 38px but within it, the div div class = v-input__control still has a height of 48px, resulting in the widget encroaching onto the row below.
And when the text input widget is in color picker mode, it does respect the template row height whether it's size is 6x1 or auto.
Unfortunately I can't track down precisely where in the code it fails to use the template settings.
ps A work-around provided that you have sufficient screen space might be to set the template row height to 48px.
pps Nice looking dashboard by the way 
