From e09983ce1e9b5d801446b620641a733890c110f3 Mon Sep 17 00:00:00 2001
From: Lachlan Kermode <lachiekermode@gmail.com>
Date: Thu, 13 Dec 2018 18:00:33 +0000
Subject: [PATCH] make card wider

---
 src/components/presentational/CardSource.js | 6 ++++--
 src/scss/cardstack.scss                     | 6 ++++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/presentational/CardSource.js b/src/components/presentational/CardSource.js
index 4213abc..fe67652 100644
--- a/src/components/presentational/CardSource.js
+++ b/src/components/presentational/CardSource.js
@@ -7,7 +7,9 @@ function renderSource(source) {
   return source.error ? (
     <div><small>{source.error}</small></div>
   ) : (
-    <div><p>TODO: display source properly.</p></div>
+    <div>
+      <p>{source.id}</p>
+    </div>
   )
 }
 
@@ -21,7 +23,7 @@ const CardSource = ({ source, language, isLoading, error }) => {
   }
 
   return (
-    <div className="card-col card-cell source">
+    <div className="card-row card-cell source">
       <h4>{source_lang}: </h4>
       {renderContent()}
     </div>
diff --git a/src/scss/cardstack.scss b/src/scss/cardstack.scss
index 70393db..1879969 100644
--- a/src/scss/cardstack.scss
+++ b/src/scss/cardstack.scss
@@ -1,6 +1,8 @@
 @import 'burger';
 @import 'card';
 
+$card-width: 500px;
+
 .card-stack {
   position: absolute;
   top: 10px;
@@ -20,7 +22,7 @@
   .card-stack-header {
     min-height: 38px;
     line-height: 38px;
-    width: 360px;
+    width: $card-width;
     box-sizing: border-box;
     padding: 0 5px;
     background: $black;
@@ -61,7 +63,7 @@
   }
 
   .card-stack-content {
-    width: 360px;
+    width: $card-width;
 
     ul {
       padding: 0;