Fix Table dropdown overflow issue (#4133)

* Fix Table dropdown overflow issue

* Add to user recording table

app/assets/stylesheets/admin_panel.scss

@@ -33,6 +33,9 @@
     table, td, tr {
       border-color: whitesmoke !important;
     }
+    .dropdown {
+      position: static;
+    }
   }
 
   .dropdown-item {
@@ -105,6 +108,7 @@
 }
 
 #recordings-table {
+
   @include media-breakpoint-down(xl) {
     td, tr {
       // Name and recording date

app/assets/stylesheets/application.bootstrap.scss

@@ -40,6 +40,10 @@ body {
   white-space: nowrap;
 }
 
+.btn-sm {
+  min-width: 0 !important;
+}
+
 .btn-xlg {
   font-size: 1.5rem;
   padding: 0.75rem 5rem;

app/assets/stylesheets/recordings.scss

@@ -20,6 +20,10 @@
     }
   }
 
+  .dropdown {
+    position: static;
+  }
+
   .dropdown-item {
     color: $muted;
     &:hover {

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

@@ -41,7 +41,7 @@ export default function ManageUserRow({ user }) {
       <td className="border-start-0">
         <Dropdown className="float-end cursor-pointer">
           <Dropdown.Toggle className="hi-s" as={EllipsisVerticalIcon} />
-          <Dropdown.Menu className="admin-table-dropdown">
+          <Dropdown.Menu>
             <Dropdown.Item as={Link} to={`/admin/edit_user/${user.id}`}>
               <PencilSquareIcon className="hi-s me-2" />
               {t('view')}

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

@@ -60,7 +60,7 @@ export default function ServerRoomRow({ room }) {
       <td className="border-start-0">
         <Dropdown className="float-end cursor-pointer">
           <Dropdown.Toggle className="hi-s" as={EllipsisVerticalIcon} />
-          <Dropdown.Menu className="admin-table-dropdown">
+          <Dropdown.Menu>
             { room.online
               ? (
                 <Dropdown.Item onClick={handleJoin}>