From 18a37057e5ac110671e24682d303edba695cb3b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Fri, 17 Jul 2015 10:36:42 +0200
Subject: [PATCH] fix edition id that was breaking viewport on mobile

---
 js/components/ascribe_detail/detail_property.js | 6 +++---
 sass/main.scss                                  | 8 +++++++-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/js/components/ascribe_detail/detail_property.js b/js/components/ascribe_detail/detail_property.js
index 943f9c1e..d293f6a3 100644
--- a/js/components/ascribe_detail/detail_property.js
+++ b/js/components/ascribe_detail/detail_property.js
@@ -17,8 +17,8 @@ let DetailProperty = React.createClass({
     getDefaultProps() {
         return {
             separator: ':',
-            labelClassName: 'col-xs-5 col-sm-4 col-md-3 col-lg-3',
-            valueClassName: 'col-xs-7 col-sm-8 col-md-9 col-lg-9'
+            labelClassName: 'col-xs-3 col-sm-4 col-md-3 col-lg-3',
+            valueClassName: 'col-xs-9 col-sm-8 col-md-9 col-lg-9'
         };
     },
 
@@ -41,7 +41,7 @@ let DetailProperty = React.createClass({
                     <div className={this.props.labelClassName + ' col-xs-height col-bottom ascribe-detail-property-label'}>
                         { this.props.label + this.props.separator}
                     </div>
-                    <div className={this.props.valueClassName + ' col-xs-height col-bottom'}>
+                    <div className={this.props.valueClassName + ' col-xs-height col-bottom ascribe-detail-property-value'}>
                         {value}
                     </div>
                 </div>
diff --git a/sass/main.scss b/sass/main.scss
index ae3ef98f..e9c742b4 100644
--- a/sass/main.scss
+++ b/sass/main.scss
@@ -222,10 +222,16 @@ hr {
     padding-bottom: 0.4em;
 }
 
-.ascribe-detail-property-label{
+.ascribe-detail-property-label {
     font-size: 0.8em;
 }
 
+.ascribe-detail-property-value {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 ::-webkit-input-placeholder { /* WebKit browsers */
     font-size: 0.9em;
     font-style: italic;