Improved behaviour for contentHeaderNavigation buttons

ref https://www.woltlab.com/community/thread/295238-%C3%A4nderung-der-reihenfolge-von-antworten-pagination-abonnieren-in-der-mobilen-ansi/?postID=1894039#post1894039

diff --git a/wcfsetup/install/files/style/layout/content.scss b/wcfsetup/install/files/style/layout/content.scss
index 7141856f8ebc16b61b867222d55b2c58256600d9..5e4764b26d5ff8f7dcaa6d70265fe73897086bd1 100644 (file)
--- a/wcfsetup/install/files/style/layout/content.scss
+++ b/wcfsetup/install/files/style/layout/content.scss
@@ -27,6 +27,28 @@
 }
 
 .contentHeader {
+       align-items: flex-start;
+       display: flex;
+       justify-content: flex-end;
+       margin-top: -10px;
+
+       .contentHeaderIcon {
+               flex: 0 0 64px;
+               margin-right: 15px;
+       }
+
+       .contentHeaderTitle {
+               flex: 1 auto;
+               margin-top: 10px;
+       }
+
+       .contentHeaderNavigation {
+               flex: 0 0 auto;
+               margin-left: 15px;
+               margin-top: 10px;
+               max-width: 50%;
+       }
+       
        .contentHeaderDescription {
                color: $wcfContentDimmedText;
                margin-top: 5px;
@@ -79,31 +101,15 @@
        }
 
        @include screen-sm-down {
+               flex-wrap: wrap;
+
                .contentHeaderIcon {
                        display: none;
                }
-
-               .contentHeaderNavigation > ul {
-                       margin-top: 10px;
-               }
        }
 
        @include screen-md-up {
-               display: flex;
-               align-items: flex-start;
-
-               .contentHeaderIcon {
-                       flex: 0 0 64px;
-                       margin-right: 15px;
-               }
-
-               .contentHeaderTitle {
-                       flex: 1 1 0%;
-               }
-
                .contentHeaderNavigation {
-                       flex: 0 0 auto;
-                       margin-left: 15px;
                        max-width: 50%;
                }
        }
@@ -433,6 +439,12 @@ fieldset {
        }
 }
 
+@include screen-sm-down {
+       .contentHeader + .contentInteraction {
+               margin-top: 10px;
+       }
+}
+
 .contentInteractionButtonContainer {
        align-self: center;
        display: flex;