From 95f9c04884e412bc578ef156c3f0170313ef3dae Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Fri, 14 May 2021 12:45:13 +0100
Subject: [PATCH] improvement(frontend): restricts fluid mode to mdAndDown
 breakpoint

---
 packages/frontend/src/views/Frontend.vue    | 8 ++++++--
 packages/frontend/src/views/Profile.vue     | 2 +-
 packages/frontend/src/views/ProfileUser.vue | 2 +-
 packages/frontend/src/views/Stream.vue      | 2 +-
 packages/frontend/src/views/Streams.vue     | 2 +-
 5 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/frontend/src/views/Frontend.vue b/packages/frontend/src/views/Frontend.vue
index 7b304ef46..b1d9afdf1 100644
--- a/packages/frontend/src/views/Frontend.vue
+++ b/packages/frontend/src/views/Frontend.vue
@@ -1,7 +1,10 @@
 <template>
   <v-app id="speckle">
     <v-app-bar app>
-      <v-container fluid class="py-0 fill-height hidden-sm-and-down">
+      <v-container
+        :fluid="$vuetify.breakpoint.mdAndDown"
+        class="py-0 fill-height hidden-sm-and-down"
+      >
         <v-btn text to="/" active-class="no-active">
           <v-img class="" contain max-height="30" max-width="30" src="@/assets/logo.svg" />
           <div class="logo">
@@ -190,7 +193,8 @@ export default {
   font-size: 1rem;
 }
 
-.fade-enter-active, .fade-leave-active {
+.fade-enter-active,
+.fade-leave-active {
   transition: opacity 1s;
 }
 .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
diff --git a/packages/frontend/src/views/Profile.vue b/packages/frontend/src/views/Profile.vue
index c92ce3510..61a8f80fe 100644
--- a/packages/frontend/src/views/Profile.vue
+++ b/packages/frontend/src/views/Profile.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-container :fluid="$vuetify.breakpoint.lgAndDown">
+  <v-container :fluid="$vuetify.breakpoint.mdAndDown">
     <v-row>
       <v-col cols="12" sm="12" md="4" lg="3" xl="2">
         <user-info-card :user="user" @update="update"></user-info-card>
diff --git a/packages/frontend/src/views/ProfileUser.vue b/packages/frontend/src/views/ProfileUser.vue
index 828337c8e..135cbeb8d 100644
--- a/packages/frontend/src/views/ProfileUser.vue
+++ b/packages/frontend/src/views/ProfileUser.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-container :fluid="$vuetify.breakpoint.lgAndDown">
+  <v-container :fluid="$vuetify.breakpoint.mdAndDown">
     <v-row v-if="$apollo.loading">
       <v-col cols="12">
         <v-skeleton-loader type="card, article"></v-skeleton-loader>
diff --git a/packages/frontend/src/views/Stream.vue b/packages/frontend/src/views/Stream.vue
index bb0cf22b3..7438f8a74 100644
--- a/packages/frontend/src/views/Stream.vue
+++ b/packages/frontend/src/views/Stream.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-container :fluid="$vuetify.breakpoint.lgAndDown">
+  <v-container :fluid="$vuetify.breakpoint.mdAndDown">
     <v-row v-if="stream">
       <v-col cols="12" sm="12" md="4" lg="3" xl="3">
         <sidebar-stream :user-role="userRole"></sidebar-stream>
diff --git a/packages/frontend/src/views/Streams.vue b/packages/frontend/src/views/Streams.vue
index 6d4c32509..d2fef85dd 100644
--- a/packages/frontend/src/views/Streams.vue
+++ b/packages/frontend/src/views/Streams.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-container fluid>
+  <v-container :fluid="$vuetify.breakpoint.mdAndDown">
     <v-row>
       <v-col cols="12" sm="12" md="4" lg="3" xl="2">
         <v-card rounded="lg" class="mt-5 mx-5" elevation="0" color="background">