Mobile optimization for user profile header

diff --git a/wcfsetup/install/files/style/ui/userProfile.scss b/wcfsetup/install/files/style/ui/userProfile.scss
index 28c8d5169aa333c69fd3c92e48d86fe36895b6c5..30c1c31ec4a0ad95bebe6bd35ceb763a74fc465a 100644 (file)
--- a/wcfsetup/install/files/style/ui/userProfile.scss
+++ b/wcfsetup/install/files/style/ui/userProfile.scss
@@ -6,6 +6,47 @@
        .contentDescription {
                margin-top: 20px;
        }
+       
+       @include screen-md-down {
+               display: flex;
+               flex-wrap: wrap;
+               
+               .contentHeaderIcon {
+                       display: block;
+                       flex: 0 0 48px;
+                       margin-right: 10px;
+                       
+                       img {
+                               width: 48px !important;
+                               height: 48px !important;
+                       }
+               }
+               
+               .contentHeaderTitle {
+                       flex: 0 0 calc(100% - 58px);
+                       max-width: calc(100% - 58px);
+               }
+               
+               .contentHeaderNavigation {
+                       flex: 0 0 100%;
+                       
+                       .userProfileButtonContainer {
+                               display: flex;
+                               
+                               > li {
+                                       flex: 1 1 auto;
+                                       margin-top: 0 !important;
+                               }
+                       }
+               }
+       }
+       
+       @include screen-md-up {
+               .contentHeaderIcon {
+                       flex: 0 0 128px;
+                       margin-right: 20px;
+               }
+       }
 }
 
 .userAvatarImage {