Fix Rooms gap (#4936)

app/assets/stylesheets/application.bootstrap.scss

@@ -704,3 +704,9 @@ input[type="range"]:focus::-moz-range-thumb {
     width: 25px;
   }
 }
+
+#rooms-list-empty, #recordings-list-empty {
+  .card-body {
+    min-height: 20rem;
+  }
+}

app/javascript/components/recordings/EmptyRecordingsList.jsx

@@ -23,7 +23,7 @@ export default function EmptyRecordingsList() {
   const { t } = useTranslation();
 
   return (
-    <div className="pt-3">
+    <div id="recordings-list-empty" className="pt-3">
       <Card className="border-0 card-shadow text-center">
         <Card.Body className="py-5">
           <div className="icon-circle rounded-circle d-block mx-auto mb-3">

app/javascript/components/rooms/EmptyRoomsList.jsx

@@ -29,7 +29,7 @@ export default function EmptyRoomsList() {
   const mutationWrapper = (args) => useCreateRoom({ userId: currentUser.id, ...args });
 
   return (
-    <div id="rooms-list-empty" className="pt-5">
+    <div id="rooms-list-empty" className="pt-3">
       <Card className="border-0 card-shadow text-center">
         <Card.Body className="py-5">
           <div className="icon-circle rounded-circle d-block mx-auto mb-3">