Slightly improve mobile version of the recent activities

diff --git a/wcfsetup/install/files/style/ui/recentActivityList.scss b/wcfsetup/install/files/style/ui/recentActivityList.scss
index 6d973e44ff3e23e5856448276f184c86aa6aa751..4e557e1948fb42d5eb669175812bcc897ae7bdbb 100644 (file)
--- a/wcfsetup/install/files/style/ui/recentActivityList.scss
+++ b/wcfsetup/install/files/style/ui/recentActivityList.scss
@@ -49,20 +49,32 @@
        }
 
        @include screen-sm-down {
+               column-gap: 10px;
+               grid-template-areas:
+                       "avatar title"
+                       "time time";
+
+               &.recentActivityListItem--withDescription {
+                       grid-template-areas:
+                               "avatar title"
+                               "description description"
+                               "time time";
+               }
+
                &.recentActivityListItem--withImage {
                        grid-template-areas:
                                "avatar title"
-                               "avatar image"
-                               "avatar time";
+                               "image image"
+                               "time time";
                        grid-template-rows: min-content min-content 1fr;
                }
 
                &.recentActivityListItem--withDescription.recentActivityListItem--withImage {
                        grid-template-areas:
                                "avatar title"
-                               "avatar image"
-                               "avatar description"
-                               "avatar time";
+                               "image image"
+                               "description description"
+                               "time time";
                        grid-template-rows: min-content min-content min-content 1fr;
                }
        }
@@ -88,6 +100,10 @@
        color: var(--wcfContentDimmedText);
 
        @include wcfFontSmall;
+
+       @include screen-sm-down {
+               text-align: right;
+       }
 }
 
 .recentActivityListItem__image {