layout base : 

layout top :

how to recreate :

• Create a module with Outsystems UI base theme
• Create a screen based on the standard LayoutBase 
• Open the screen preview in Service Studio
• The menu items and the user block are not center aligned

This is different from designing screens with the LayoutTopMenu, where menu and userinfo is nicely aligned in SS.  

The reason is a bit of extra css for those in the Outsystems UI CSS file :

.layout-top .header-content{  

       -servicestudio-align-items:center;  

       -servicestudio-flex-direction:row;

}

Suggestion for improvement : also add similar rule for the base layout to Outsystems UI CSS.  

Please also note, that the base layout block has an inappropriate css class name on the LayoutWrapper container : it has the class layout-blank, I would have expected to see layout-base here.

All of the above is ONLY about how header is shown in Service Studio, it does not affect the running application, where other css is making sure everything is nicely aligned, so no problems there.

Dorine

Workaround for anybody who is also annoyed by this :

with current Outsystems UI, go into your own (base) theme css, and add following

.layout-blank .header-content{  

       -servicestudio-align-items:center;  

       -servicestudio-flex-direction:row;

}