More usable team settings page on mobile

ppy · Jan 30, 2025 · f506296 · f506296
1 parent baaac3e
commit f506296
Showing 1 changed file with 17 additions and 6 deletions.
diff --git a/resources/css/bem/team-settings.less b/resources/css/bem/team-settings.less
@@ -3,7 +3,11 @@
 
 .team-settings {
   display: grid;
-  gap: 5px;
+  gap: 15px 5px;
+
+  @media @desktop {
+    gap: 5px;
+  }
 
   &__buttons {
     display: flex;
@@ -30,20 +34,27 @@
   }
 
   &__item {
+    --grid-columns: 1fr;
+    --grid-columns-desktop: 2fr 1fr;
+    align-items: start;
     display: grid;
-    grid-template-columns: 2fr 1fr;
-    gap: 15px;
+    gap: 5px 15px;
+    grid-template-columns: var(--grid-columns);
+
+    @media @desktop {
+      --grid-columns: var(--grid-columns-desktop);
+    }
 
     &--buttons {
-      grid-template-columns: 1fr auto;
+      --grid-columns-desktop: 1fr auto;
     }
 
     &--description {
-      grid-template-columns: 1fr 1fr;
+      --grid-columns-desktop: 1fr 1fr;
     }
 
     &--image {
-      grid-template-columns: 1fr;
+      --grid-columns-desktop: 1fr;
     }
   }
 }