Fix AdminTables Placeholders (#4691)

* Reduce width of RecordingsRowPlaceholder tds

* Tune Placeholders width

* Increase ServerRoomsPlaceholder room name width a bit

app/assets/stylesheets/admin_panel.scss

@@ -108,7 +108,6 @@
 }
 
 #recordings-table {
-
   @include media-breakpoint-down(xl) {
     td, tr {
       // Name and recording date

app/assets/stylesheets/application.bootstrap.scss

@@ -616,21 +616,29 @@ input[type="range"]:focus::-moz-range-thumb {
 }
 
 // Table Placeholders length
+.xs-td-placeholder {
+  min-width: $column-xs-width;
+}
+
 .sm-td-placeholder {
-  min-width: 100px;
+  min-width: $column-sm-width;
 }
 
 .md-td-placeholder {
-  min-width: 125px;
+  min-width: $column-md-width;
 }
 
 .lg-td-placeholder {
-  min-width: 200px;
+  min-width: $column-lg-width
 }
 
-.xl-td-placeholder {
-  min-width: 300px;
-}
+//.xl-td-placeholder {
+//  min-width: 300px;
+//
+//  @include media-breakpoint-down(xxl) {
+//    width: 150px;
+//  }
+//}
 
 // Circles & Avatars
 .small-circle {

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

@@ -3,10 +3,10 @@ import { Stack } from 'react-bootstrap';
 import Placeholder from '../../shared_components/utilities/Placeholder';
 import RoundPlaceholder from '../../shared_components/utilities/RoundPlaceholder';
 
-export default function RecordingsListRowPlaceHolder() {
+export default function ManageUsersRowPlaceHolder() {
   return (
     <tr>
-      <td className="border-0 py-2 xl-td-placeholder">
+      <td className="border-0 py-2 lg-td-placeholder">
         <Stack direction="horizontal">
           <RoundPlaceholder size="small" className="ms-1 me-3 mt-1" />
           <Stack>
@@ -15,11 +15,11 @@ export default function RecordingsListRowPlaceHolder() {
           </Stack>
         </Stack>
       </td>
-      <td className="border-0 py-3 xl-td-placeholder">
+      <td className="border-0 py-3 lg-td-placeholder">
         <Placeholder width={10} size="md" />
       </td>
-      <td className="border-0 py-3 md-td-placeholder">
-        <Placeholder width={6} size="md" />
+      <td className="border-0 py-3 sm-td-placeholder">
+        <Placeholder width={12} size="md" />
       </td>
     </tr>
   );

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

@@ -4,21 +4,26 @@ import Placeholder from '../../shared_components/utilities/Placeholder';
 export default function ServerRoomsRowPlaceHolder() {
   return (
     <tr>
-      <td className="border-0 py-2 xl-td-placeholder">
-        <Placeholder width={6} size="md" />
-        <Placeholder width={10} size="lg" />
-      </td>
-      <td className="border-0 py-4 lg-td-placeholder">
+      {/* Name */}
+      <td className="border-0 py-2 lg-td-placeholder">
         <Placeholder width={8} size="md" />
+        <Placeholder width={10} size="lg" />
       </td>
-      <td className="border-0 py-4 md-td-placeholder">
+      {/* Owner name */}
+      <td className="border-0 py-4 sm-td-placeholder">
         <Placeholder width={12} size="md" />
       </td>
+      {/* Room ID */}
       <td className="border-0 py-4 sm-td-placeholder">
-        <Placeholder width={2} size="md" />
+        <Placeholder width={12} size="md" />
       </td>
-      <td className="border-0 py-4 sm-td-placeholder">
-        <Placeholder width={10} size="md" />
+      {/* # of participants */}
+      <td className="border-0 py-4 xs-td-placeholder">
+        <Placeholder width={6} size="md" />
+      </td>
+      {/* status */}
+      <td className="border-0 py-4 xs-td-placeholder">
+        <Placeholder width={12} size="md" />
       </td>
     </tr>
   );

app/javascript/components/recordings/RecordingsListRowPlaceHolder.jsx

@@ -6,7 +6,8 @@ import RoundPlaceholder from '../shared_components/utilities/RoundPlaceholder';
 export default function RecordingsListRowPlaceHolder() {
   return (
     <tr>
-      <td className="border-0 pt-2 xl-td-placeholder">
+      {/* Avatar and Name */}
+      <td className="border-0 pt-2 lg-td-placeholder">
         <Stack direction="horizontal">
           <RoundPlaceholder size="small" className="ms-1 me-3" />
           <Stack>
@@ -15,16 +16,20 @@ export default function RecordingsListRowPlaceHolder() {
           </Stack>
         </Stack>
       </td>
-      <td className="border-0 pt-3 sm-td-placeholder">
-        <Placeholder width={12} size="md" />
+      {/* Length */}
+      <td className="border-0 pt-3 xs-td-placeholder">
+        <Placeholder width={8} size="md" />
       </td>
-      <td className="border-0 pt-3 sm-td-placeholder">
+      {/* # of Users */}
+      <td className="border-0 pt-3 xs-td-placeholder">
         <Placeholder width={4} size="md" />
       </td>
+      {/* Visibility */}
       <td className="border-0 pt-3 md-td-placeholder">
         <Placeholder width={12} size="md" />
       </td>
-      <td className="border-0 pt-3 xl-td-placeholder">
+      {/* Formats */}
+      <td className="border-0 pt-3 md-td-placeholder">
         <Placeholder width={10} size="md" />
       </td>
     </tr>