From 4f98e5ae7f7710b77be658b1398ad45602f1c446 Mon Sep 17 00:00:00 2001
From: Eliot Berriot <contact@eliotberriot.com>
Date: Wed, 6 Mar 2019 17:40:26 +0100
Subject: [PATCH] Fix too wide padding on small screens

---
 front/src/components/library/Home.vue | 4 ++--
 front/src/style/_main.scss            | 7 +++++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/front/src/components/library/Home.vue b/front/src/components/library/Home.vue
index 5e81dbdc8..19b667335 100644
--- a/front/src/components/library/Home.vue
+++ b/front/src/components/library/Home.vue
@@ -19,8 +19,8 @@
         </div>
       </div>
       <div class="ui section hidden divider"></div>
-      <div class="ui grid">
-        <div class="ui row">
+      <div class="ui stackable one column grid">
+        <div class="column">
           <album-widget :filters="{playable: true, ordering: '-creation_date'}">
             <template slot="title"><translate>Recently added</translate></template>
           </album-widget>
diff --git a/front/src/style/_main.scss b/front/src/style/_main.scss
index 311e0e9dc..3e5adb8ca 100644
--- a/front/src/style/_main.scss
+++ b/front/src/style/_main.scss
@@ -143,9 +143,12 @@ body {
 }
 .ui.stripe.segment,
 #footer {
-  padding: 2em;
+  padding: 1em;
   @include media(">tablet") {
-    padding: 4em;
+    padding: 2em;
+  }
+  @include media(">desktop") {
+    padding: 3em;
   }
 }