UX: improve directory user fields on small screens (#20765)

app/assets/stylesheets/common/base/directory.scss

@@ -239,6 +239,7 @@
       align-self: start;
       white-space: nowrap;
       overflow: hidden;
+      flex: 1 0 calc(50% - 0.5em + 5%); // 50% - padding + half the gap
 
       span {
         // caution: display flex here can interfere with overflow hiding
@@ -267,6 +268,11 @@
       font-size: var(--font-0);
       color: var(--primary);
       align-self: start;
+      &--user-field {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        min-width: 0;
+      }
     }
 
     &__row {
@@ -300,6 +306,7 @@
       }
 
       &--user-field {
+        display: flex;
         order: 2;
         // force full width of the cell
         // because we don't know how much content there is