Fixed elements on page Members-Resource (coscine/issues#1965)

src/App.vue

@@ -5,7 +5,7 @@
     <main>
       <div class="mr-0 d-flex">
         <SidebarMenu class="mr-2" />
-        <RouterView class="d-flex container-fluid mx-5" />
+        <RouterView class="container-fluid mx-5" />
       </div> 
     </main>
     <!--DevFooter /-->

src/modules/project/pages/ProjectPage.vue

 <template>
   <div>
-    <b-row>
+    <b-row align-h="between">
       <!-- Resources -->
       <b-col id="resources">
         <CoscineHeadline :headline="$parent.$tc('page.project.resource', 2)" />
@@ -30,7 +30,7 @@
       </b-col>
 
       <!-- Members -->
-      <b-col id="members" sm="3">
+      <b-col id="members">
         <Members v-if="project"/>
       </b-col>
     </b-row>
@@ -182,3 +182,16 @@ export default defineComponent({
   },
 });
 </script>
+
+<style scoped>
+#resources {
+  /* Forces Members list to collapse down to 
+  a new row at after certain window width */
+  min-width: 22rem;
+}
+
+#members {
+  /* Prevents Members list to become wider */
+  max-width: 27rem;
+}
+</style>