From bcf9dc2c30d9f64bfd02c2b78ead098e00e81999 Mon Sep 17 00:00:00 2001
From: Axolotle <nchesnais@mailoo.org>
Date: Wed, 15 Jul 2020 10:30:19 +0200
Subject: [PATCH] add breakpoint on User view

---
 app/src/App.vue                   | 4 ++--
 app/src/components/Breadcrumb.vue | 2 +-
 app/src/scss/main.scss            | 3 +--
 app/src/views/User.vue            | 9 ++++++++-
 4 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/app/src/App.vue b/app/src/App.vue
index d59c0030..e445a77a 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <div id="app">
+    <div id="app" class="container">
         <header>
             <b-navbar>
                 <b-navbar-brand to="/" exact exact-active-class="active"><img alt="Yunohost logo" src="./assets/logo.png"></b-navbar-brand>
@@ -102,7 +102,7 @@ export default {
 
 #app > header {
     border-bottom: 1px solid #eee;
-    margin-top: 1rem;
+    padding-top: 1rem;
     margin-bottom: 1rem;
 
     .navbar {
diff --git a/app/src/components/Breadcrumb.vue b/app/src/components/Breadcrumb.vue
index 6d3f382c..c1da775b 100644
--- a/app/src/components/Breadcrumb.vue
+++ b/app/src/components/Breadcrumb.vue
@@ -46,6 +46,6 @@ export default {
 <style lang="scss" scoped>
 .breadcrumb {
     border: none;
-    background-color: transparent;
+    background-color: transparent !important;
 }
 </style>
diff --git a/app/src/scss/main.scss b/app/src/scss/main.scss
index e765843d..9392964a 100644
--- a/app/src/scss/main.scss
+++ b/app/src/scss/main.scss
@@ -18,8 +18,7 @@
 
 // Bootstrap overrides
 body {
-    margin: auto;
-    max-width: 90%;
+    margin: 0;
     font-family: "Source Sans Pro", "Helvetica Neue", "Fira Sans", Helvetica, Arial, sans-serif;
 }
 
diff --git a/app/src/views/User.vue b/app/src/views/User.vue
index dd220f08..21ce8892 100644
--- a/app/src/views/User.vue
+++ b/app/src/views/User.vue
@@ -84,7 +84,14 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '@/scss/_variables.scss';
+@import '@/scss/main.scss';
+
+.card-body > div {
+    flex-direction: column;
+    @include media-breakpoint-up(md) {
+        flex-direction: row;
+    }
+}
 
 h2 {
     margin: 0;