More resilient approach for arrow position

position: absolute has some really awkward results, especially with the
latest CSS align spec changes.

diff --git a/wcfsetup/install/files/acp/style/layout.scss b/wcfsetup/install/files/acp/style/layout.scss
index c4efdf3d59c9e3eb9c1e82e148933a42002e3ccf..f703aa1cfe7c6d6867b360463d0acfb7fb83bc9b 100644 (file)
--- a/wcfsetup/install/files/acp/style/layout.scss
+++ b/wcfsetup/install/files/acp/style/layout.scss
@@ -78,11 +78,7 @@ $wcfAcpMenuWidth: 150px;
                                border-radius: 0;
                                display: flex;
                                height: 50px;
-                               padding: 6px 28px 6px 10px;
-                               
-                               &::after {
-                                       right: 10px;
-                               }
+                               padding: 6px 10px;
                                
                                &:hover {
                                        background-color: rgba(0, 0, 0, .4);

diff --git a/wcfsetup/install/files/style/layout/pageHeader.scss b/wcfsetup/install/files/style/layout/pageHeader.scss
index a22308e2832e1948c481fed0ae5a2457188db9ad..1aaa2e1f46c481487b208d32e2f3cbb63d3714b3 100644 (file)
--- a/wcfsetup/install/files/style/layout/pageHeader.scss
+++ b/wcfsetup/install/files/style/layout/pageHeader.scss
@@ -364,7 +364,7 @@
                        max-width: 200px;
                        min-width: 140px;
                        overflow: hidden;
-                       padding: 4px 24px 4px 8px;
+                       padding: 4px 8px;
                        position: relative;
                        text-align: left;
                        text-overflow: ellipsis;
@@ -374,9 +374,10 @@
                        &::after {
                                color: inherit;
                                content: $fa-var-caret-down;
+                               flex: 1;
                                font-family: FontAwesome;
-                               position: absolute;
-                               right: 8px;
+                               margin-left: 10px;
+                               text-align: right;
                        }
                }