Improve team settings responsive layout, narrower role panel, and mobile pagination.

EOF

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/web/src/components/TeamsSettingsPanel.vue

@@ -778,5 +778,35 @@ select {
   .prior-picker {
     grid-template-columns: 1fr;
   }
+
+  .card-head {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .card-head :deep(.field),
+  .card-head :deep(input) {
+    max-width: none;
+    min-width: 0;
+    width: 100%;
+  }
+
+  .team header {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .team .actions {
+    width: 100%;
+  }
+
+  .vis-row {
+    align-items: start;
+  }
+
+  .vis-badge {
+    display: inline-block;
+    margin: 0.25rem 0 0;
+  }
 }
 </style>

apps/web/src/components/ui/UiPagination.vue

@@ -184,8 +184,43 @@ function onSizeChange(e: Event) {
 @media (max-width: 900px) {
   .ui-pagination {
     flex-direction: column;
-    align-items: center;
-    gap: var(--sp-3);
+    align-items: stretch;
+    gap: 0.65rem;
+  }
+
+  .pagination-info {
+    width: 100%;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    gap: 0.35rem;
+    font-size: 0.78rem;
+  }
+
+  .page-count {
+    flex: 0 1 auto;
+    white-space: nowrap;
+  }
+
+  .size-picker {
+    margin-inline-start: 0;
+    flex: 0 0 auto;
+    gap: 0.25rem;
+    white-space: nowrap;
+  }
+
+  .size-picker span:last-child {
+    display: none;
+  }
+
+  .size-picker select {
+    height: 28px;
+    min-width: 3.25rem;
+    padding: 0 0.3rem;
+  }
+
+  .pagination-controls {
+    width: 100%;
+    justify-content: center;
   }
 }
 </style>