teams: smoother list button spacing (fixes #9199) (#9246)

Co-authored-by: mutugiii <[email protected]>
Co-authored-by: dogi <[email protected]>

Author: 3 people

package.json

@@ -1,10 +1,10 @@
 {
   "name": "planet",
   "license": "AGPL-3.0",
-  "version": "0.20.62",
+  "version": "0.20.63",
   "myplanet": {
-    "latest": "v0.36.25",
-    "min": "v0.35.25"
+    "latest": "v0.36.36",
+    "min": "v0.35.36"
   },
   "scripts": {
     "ng": "ng",

src/app/teams/teams.component.html

@@ -92,12 +92,12 @@ <h3 class="team-name">
             <mat-icon>check</mat-icon>
           </button>
         </mat-header-cell>
-        <mat-cell *matCellDef="let element" class>
-          <div [ngClass]="{'horizontal-align button-container': isMobile}">
+        <mat-cell *matCellDef="let element">
+          <div class="button-container" [ngClass]="{'horizontal-align': isMobile}">
             <ng-container [ngSwitch]="element.userStatus" *ngIf="user.isUserAdmin || user.roles.length">
               <ng-container *ngSwitchCase="'member'">
                 <ng-container *ngIf="!element.isLeader">
-                  <button mat-raised-button color="primary" class="margin-lr-3" (click)="openLeaveDialog(element.doc, element.membershipDoc); $event.stopPropagation()">
+                  <button mat-raised-button color="primary" (click)="openLeaveDialog(element.doc, element.membershipDoc); $event.stopPropagation()">
                     <mat-icon>remove_circle</mat-icon>
                     <label *ngIf="!isMobile" i18n> Leave </label>
                   </button>
@@ -107,7 +107,7 @@ <h3 class="team-name">
                   <label *ngIf="!isMobile" i18n> Edit </label>
                 </button>
               </ng-container>
-              <button *ngSwitchCase="'unrelated'" mat-raised-button color="primary" class="margin-lr-3" (click)="requestToJoin(element.doc); $event.stopPropagation()">
+              <button *ngSwitchCase="'unrelated'" mat-raised-button color="primary" (click)="requestToJoin(element.doc); $event.stopPropagation()">
                 <mat-icon>add_circle</mat-icon>
                 <label *ngIf="!isMobile" i18n> Request to Join </label>
               </button>
@@ -120,7 +120,7 @@ <h3 class="team-name">
               <mat-icon>feedback</mat-icon>
               <label *ngIf="!isMobile" i18n> Feedback </label>
             </button>
-            <button *planetAuthorizedRoles="''" mat-raised-button color="primary" class="margin-lr-3" (click)="archiveClick(element.doc); $event.stopPropagation()">
+            <button *planetAuthorizedRoles="''" mat-raised-button color="primary" (click)="archiveClick(element.doc); $event.stopPropagation()">
               <mat-icon>delete_forever</mat-icon>
               <label *ngIf="!isMobile" i18n> Delete </label>
             </button>

src/app/teams/teams.scss

@@ -19,8 +19,9 @@
 
   .button-container {
     display: flex;
-    flex-direction: row;
+    flex-wrap: wrap;
     align-items: center;
+    gap: 0.5rem;
   }
   .horizontal-align {
     justify-content: center;
@@ -31,7 +32,7 @@
     overflow: hidden;
   }
 
-  .mat-cell button, .mat-cell div button[mat-raised-button] {
+  .button-container button[mat-raised-button] {
     width: 150px;
     text-align: center;
     padding: 8px 12px;
@@ -49,23 +50,24 @@
     color: #666;
   }
 
+  @media (max-width: $screen-md) {
+    .button-container {
+      gap: 0.75rem;
+    }
+  }
+
   @media (max-width: $screen-sm) {
     mat-cell button {
       min-width: 0;
       padding: 0 3px;
     }
 
-    .mat-cell button, .mat-cell div button[mat-raised-button] {
-      width: 50px;
-    }
-
     .button-container {
       flex-direction: column;
       align-items: flex-start;
+      gap: 0.5rem;
     }
-  }
 
-  @media (max-width: $screen-sm) {
     .mobile-scroll-wrapper {
       overflow-x: auto;
       -webkit-overflow-scrolling: touch;
@@ -75,4 +77,10 @@
       min-width: 800px;
     }
   }
+
+  @media (max-width: $screen-xs) {
+    .button-container button[mat-raised-button] {
+      width: 50px;
+    }
+  }
 }