improved assign clients page ux

website/css/style.css

@@ -1027,18 +1027,41 @@ table.data-table tbody tr.row-orphan-category td {
     background: color-mix(in srgb, var(--surface-hover) 60%, transparent);
 }
 
-/* Assignment page — client table sized to rows (max 50); coach panel matches */
+/* Assignment page — panels fill remaining viewport; lists scroll inside */
+.main-content:has(.assign-page) {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    min-height: 100dvh;
+}
+
+.main-content:has(.assign-page) .page-header {
+    flex-shrink: 0;
+}
+
+.main-content:has(.assign-page) #assignContent {
+    flex: 1 1 auto;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+}
+
 .assign-page {
     display: flex;
     flex-direction: column;
+    flex: 1 1 auto;
+    min-height: 0;
     gap: 16px;
 }
 
 .assign-layout {
     display: grid;
     grid-template-columns: minmax(260px, min(32vw, 380px)) minmax(0, 1fr);
+    grid-template-rows: minmax(0, 1fr);
     gap: 16px;
-    align-items: start;
+    align-items: stretch;
+    flex: 1 1 auto;
+    min-height: 0;
 }
 
 .assign-layout > .assign-coaches,
@@ -1047,6 +1070,16 @@ table.data-table tbody tr.row-orphan-category td {
     flex-direction: column;
     padding: 0;
     overflow: hidden;
+    height: 100%;
+    max-height: 100%;
+    min-height: 0;
+}
+
+.assign-coaches .assign-panel-body {
+    flex: 1 1 0;
+    min-height: 0;
+    overflow-y: auto;
+    overflow-x: hidden;
 }
 
 .assign-panel-header {
@@ -1066,20 +1099,13 @@ table.data-table tbody tr.row-orphan-category td {
 }
 
 .assign-panel-body {
-    flex: 0 0 auto;
+    flex: 1 1 auto;
     min-height: 0;
     overflow: auto;
     -webkit-overflow-scrolling: touch;
     padding: 6px 8px 10px;
 }
 
-.assign-coaches .assign-panel-footer--align {
-    flex-shrink: 0;
-    margin-top: auto;
-    visibility: hidden;
-    pointer-events: none;
-}
-
 .assign-clients-toolbar {
     flex-shrink: 0;
     padding: 14px 16px;
@@ -1129,16 +1155,18 @@ table.data-table tbody tr.row-orphan-category td {
 }
 
 .assign-table-panel {
-    flex: 0 0 auto;
+    flex: 1 1 auto;
+    min-height: 0;
     display: flex;
     flex-direction: column;
 }
 
 .assign-table-panel .table-wrapper {
-    flex: none;
+    flex: 1 1 auto;
+    min-height: 0;
+    max-height: none;
     overflow: auto;
     box-sizing: border-box;
-    max-height: none;
 }
 
 .assign-panel-footer,
@@ -1195,6 +1223,7 @@ table.data-table tbody tr.row-orphan-category td {
 @media (max-width: 900px) {
     .assign-layout {
         grid-template-columns: 1fr;
+        grid-template-rows: minmax(0, 38%) minmax(0, 1fr);
     }
 }