Add min-width to columns (#4130)

app/assets/stylesheets/admin_panel.scss

-$admin-card-height: 550px;
-
 #admin-panel {
   #admin-sidebar {
     height: 100%;
@@ -35,9 +33,6 @@ $admin-card-height: 550px;
     table, td, tr {
       border-color: whitesmoke !important;
     }
-    td {
-      max-width: 200px;
-    }
   }
 
   .dropdown-item {
@@ -55,6 +50,91 @@ $admin-card-height: 550px;
   }
 }
 
+#manage-users-table {
+  @include media-breakpoint-down(xl) {
+    td, tr {
+      // Full name and creation date
+      &:nth-child(1) {
+        min-width: $column-lg-width;
+      }
+      // Email address
+      &:nth-child(2) {
+        min-width: $column-lg-width;
+      }
+      // Role
+      &:nth-child(3) {
+        min-width: $column-md-width;
+      }
+      // Dropdown button
+      &:nth-child(4) {
+        min-width: $column-sm-width;
+      }
+    }
+  }
+}
+
+#server-rooms-table {
+  @include media-breakpoint-down(xl) {
+    td, tr {
+      // Full name and last meeting date
+      &:nth-child(1) {
+        min-width: $column-lg-width;
+      }
+      // Owner name
+      &:nth-child(2) {
+        min-width: $column-md-width;
+      }
+      // Room ID
+      &:nth-child(3) {
+        min-width: $column-md-width;
+      }
+      // # of participants
+      &:nth-child(4) {
+        min-width: $column-sm-width;
+      }
+      // Status
+      &:nth-child(5) {
+        min-width: $column-sm-width;
+      }
+      // Dropdown button
+      &:nth-child(6) {
+        min-width: $column-xs-width;
+      }
+    }
+  }
+}
+
+#recordings-table {
+  @include media-breakpoint-down(xl) {
+    td, tr {
+      // Name and recording date
+      &:nth-child(1) {
+        min-width: $column-lg-width;
+      }
+      // Length
+      &:nth-child(2) {
+        min-width: $column-sm-width;
+      }
+      // # of users
+      &:nth-child(3) {
+        min-width: $column-xs-width;
+      }
+      // Visibility dropdown
+      &:nth-child(4) {
+        min-width: $column-md-width;
+      }
+      // Format badges
+      &:nth-child(4) {
+        min-width: $column-lg-width;
+      }
+      // Dropdown button
+      &:nth-child(4) {
+        min-width: $column-xs-width;
+      }
+    }
+  }
+}
+
 .color-picker {
   width: 200px;
   min-height: 330px;

app/assets/stylesheets/variables.scss

@@ -16,4 +16,11 @@ $footer-height: 35px;
 
 $table-hover-bg: #F8F8F8;
 
+$admin-card-height: 550px;
+
 $button-min-width: 120px;
+
+$column-xs-width: 50px;
+$column-sm-width: 100px;
+$column-md-width: 150px;
+$column-lg-width: 325px;

app/javascript/components/admin/manage_users/ManageUsersTable.jsx

@@ -9,7 +9,7 @@ export default function ManageUsersTable({ users }) {
   const { t } = useTranslation();
 
   return (
-    <Table className="table-bordered border border-2 mb-0" hover responsive>
+    <Table id="manage-users-table" className="table-bordered border border-2 mb-0" hover responsive>
       <thead>
         <tr className="text-muted small">
           <th className="fw-normal border-end-0">{ t('user.name') }<SortBy fieldName="name" /></th>

app/javascript/components/admin/server_rooms/ServerRooms.jsx

@@ -44,7 +44,7 @@ export default function ServerRooms() {
                   </div>
                   <div className="p-4">
                     <SearchBar searchInput={searchInput} setSearchInput={setSearchInput} />
-                    <Table className="table-bordered border border-2 mt-4 mb-0" hover responsive>
+                    <Table id="server-rooms-table" className="table-bordered border border-2 mt-4 mb-0" hover responsive>
                       <thead>
                         <tr className="text-muted small">
                           <th className="fw-normal border-end-0">{ t('admin.server_rooms.name') }<SortBy fieldName="name" /></th>

app/javascript/components/recordings/RecordingRow.jsx

@@ -95,7 +95,7 @@ export default function RecordingRow({
         {recording.formats.map((format) => (
           <Button
             onClick={() => window.open(format.url, '_blank')}
-            className={`btn-sm rounded-pill me-1 border-0 btn-format-${format.recording_type.toLowerCase()}`}
+            className={`btn-sm rounded-pill me-1 mt-1 border-0 btn-format-${format.recording_type.toLowerCase()}`}
             key={format.id}
           >
             {format.recording_type}

app/javascript/components/recordings/RecordingsList.jsx

@@ -12,7 +12,7 @@ export default function RecordingsList({
   const { t } = useTranslation();
 
   return (
-    <Table className="table-bordered border border-2 mb-0 recordings-list" hover responsive>
+    <Table id="recordings-table" className="table-bordered border border-2 mb-0 recordings-list" hover responsive>
       <thead>
         <tr className="text-muted small">
           <th className="fw-normal border-end-0">{ t('recording.name') }<SortBy fieldName="name" /></th>

public/locales/en.json

@@ -145,7 +145,7 @@
     "published": "Published",
     "unpublished": "Unpublished",
     "protected": "Protected",
-    "length_in_minutes": "{{recording.length}} minutes",
+    "length_in_minutes": "{{recording.length}} min.",
     "processing_recording": "Processing recording...",
     "copy_recording_urls": "Copy Recording Url(s)",
     "no_recording_found": "No recording found",