From daeb71b93cab35fe0c0f02edf8927bc303636a0d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <tmladek@protonmail.ch>
Date: Sun, 12 Jan 2020 12:15:16 +0100
Subject: [PATCH] responzify

---
 src/App.vue                | 8 ++++++--
 src/components/Channel.vue | 2 +-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 1cf7e68..6648f92 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -133,11 +133,14 @@ h1 {
 .channels-wrapper {
     display: flex;
     width: 80%;
+    flex-wrap: wrap;
 }
 
 .channels {
     display: flex;
-    padding: 0 1rem;
+    padding: 0 1rem 1rem 0;
+    justify-content: space-between;
+    flex-grow: 1;
 }
 
 .channel {
@@ -148,13 +151,14 @@ h1 {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    width: 100%;
+    flex-grow: 1;
 }
 
 .url-input {
     display: flex;
     width: 100%;
     align-items: center;
+    margin: .2rem 0;
 }
 
 .url-input label {
diff --git a/src/components/Channel.vue b/src/components/Channel.vue
index 304233e..62b60e9 100644
--- a/src/components/Channel.vue
+++ b/src/components/Channel.vue
@@ -157,7 +157,7 @@ export default class Channel extends Vue {
 <!--suppress CssUnusedSymbol -->
 <style scoped>
 .channel {
-    width: 128px;
+    min-width: 128px;
     height: 256px;
     display: flex;
     flex-direction: column;