Fixed UI behavior on window resize, fixed Attachment UI in card View

frontend/delta/css/clipperz.css

@@ -119,6 +119,7 @@ http://jonibologna.com/flexbox-cheatsheet/
     -ms-transform: rotate(0deg) translate(0, 0);
     -o-transform: rotate(0deg) translate(0, 0);
     transform: rotate(0deg) translate(0, 0); }
+
   100% {
     -webkit-transform: rotate(359deg) translate(0, 0);
     -moz-transform: rotate(359deg) translate(0, 0);
@@ -132,6 +133,7 @@ http://jonibologna.com/flexbox-cheatsheet/
     -ms-transform: rotate(0deg) translate(0, 0);
     -o-transform: rotate(0deg) translate(0, 0);
     transform: rotate(0deg) translate(0, 0); }
+
   100% {
     -webkit-transform: rotate(359deg) translate(0, 0);
     -moz-transform: rotate(359deg) translate(0, 0);
@@ -145,6 +147,7 @@ http://jonibologna.com/flexbox-cheatsheet/
     -ms-transform: rotate(0deg) translate(0, 0);
     -o-transform: rotate(0deg) translate(0, 0);
     transform: rotate(0deg) translate(0, 0); }
+
   100% {
     -webkit-transform: rotate(359deg) translate(0, 0);
     -moz-transform: rotate(359deg) translate(0, 0);
@@ -158,6 +161,7 @@ http://jonibologna.com/flexbox-cheatsheet/
     -ms-transform: rotate(0deg) translate(0, 0);
     -o-transform: rotate(0deg) translate(0, 0);
     transform: rotate(0deg) translate(0, 0); }
+
   100% {
     -webkit-transform: rotate(359deg) translate(0, 0);
     -moz-transform: rotate(359deg) translate(0, 0);
@@ -476,61 +480,73 @@ div.overlay {
 @-webkit-keyframes overlay-spin {
   from {
     opacity: 1; }
+
   to {
     opacity: 0.25; } }
 @-moz-keyframes overlay-spin {
   from {
     opacity: 1; }
+
   to {
     opacity: 0.25; } }
 @-ms-keyframes overlay-spin {
   from {
     opacity: 1; }
+
   to {
     opacity: 0.25; } }
 @keyframes overlay-spin {
   from {
     opacity: 1; }
+
   to {
     opacity: 0.25; } }
 @-webkit-keyframes ios-overlay-show {
   0% {
     opacity: 0; }
+
   100% {
     opacity: 1; } }
 @-moz-keyframes ios-overlay-show {
   0% {
     opacity: 0; }
+
   100% {
     opacity: 1; } }
 @-ms-keyframes ios-overlay-show {
   0% {
     opacity: 0; }
+
   100% {
     opacity: 1; } }
 @keyframes ios-overlay-show {
   0% {
     opacity: 0; }
+
   100% {
     opacity: 1; } }
 @-webkit-keyframes ios-overlay-hide {
   0% {
     opacity: 1; }
+
   100% {
     opacity: 0; } }
 @-moz-keyframes ios-overlay-hide {
   0% {
     opacity: 1; }
+
   100% {
     opacity: 0; } }
 @-ms-keyframes ios-overlay-hide {
   0% {
     opacity: 1; }
+
   100% {
     opacity: 0; } }
 @keyframes ios-overlay-hide {
   0% {
     opacity: 1; }
+
   100% {
     opacity: 0; } }
 /*
@@ -1683,6 +1699,7 @@ div.help {
       font-weight: 100;
       margin-right: 10px;
       padding-left: 1px;
+      padding-right: 30px;
       line-height: 27px;
       /* boxed style test */
       /*			background-color: $clipperz-orange;
@@ -1707,9 +1724,12 @@ div.help {
         -ms-user-select: none;
         user-select: none;
         cursor: pointer;
-        line-height: 22px;
+        /*line-height: 22px;*/
         color: #ccc;
-        /*color:white;*/ }
+        /*color:white;*/
+        position: absolute;
+        margin-left: 5px;
+        line-height: 31px; }
         .tagEditor ul li.tag span.tagRemoveButton:hover {
           color: #9b0000; }
   .tagEditor input {
@@ -2475,13 +2495,13 @@ span.count {
   #extraFeaturesPanel .extraFeatureIndex footer {
     font-size: 8pt;
     padding: 5px 5px 5px 5px;
-    border-top: 1px solid #999; }
+    border-top: 1px solid #999999; }
     #extraFeaturesPanel .extraFeatureIndex footer span {
-      color: #999; }
+      color: #999999; }
       #extraFeaturesPanel .extraFeatureIndex footer span:after {
         content: ":"; }
     #extraFeaturesPanel .extraFeatureIndex footer a {
-      color: #999;
+      color: #999999;
       text-decoration: none;
       padding-left: 5px;
       font-weight: bold; }
@@ -3279,7 +3299,7 @@ div.cardList ul {
       padding-right: 0px;
       box-shadow: -4px 0px 3px -1px rgba(0, 0, 0, 0.2); }
     div.cardList ul li.archived {
-      background-color: #eee;
+      background-color: #eeeeee;
       color: #999; }
     div.cardList ul li .favicon {
       width: 48px;
@@ -3379,7 +3399,7 @@ div.cardList.narrow {
     content: ""; }
 
 #cardDetailPage .view.archived, .cardDetail .view.archived {
-  background-color: #eee; }
+  background-color: #eeeeee; }
 #cardDetailPage .view .cardDetailToolbar, .cardDetail .view .cardDetailToolbar {
   background-color: #1863a1;
   color: white; }
@@ -3559,6 +3579,9 @@ div.cardList.narrow {
       list-style-type: none; }
       .cardAttachments .skippedFiles ul li .filename {
         font-weight: bold; }
+    .cardAttachments .skippedFiles a {
+      text-decoration: underline;
+      cursor: pointer; }
   .cardAttachments .attachmentList {
     margin-left: 44px;
     padding-right: 8px; }
@@ -3640,7 +3663,8 @@ div.cardList.narrow {
           width: 30px;
           cursor: pointer;
           font-size: 20pt;
-          color: #aaa; }
+          color: #aaa;
+          margin-top: 1px; }
           .cardAttachments .attachmentList li .actions a.cancel, .cardAttachments .attachmentList li .actions a.remove {
             font-family: 'clipperz-icons';
             -webkit-font-feature-settings: "liga" 1, "dlig" 1;
@@ -3655,7 +3679,7 @@ div.cardList.narrow {
           .cardAttachments .attachmentList li .actions a.download:hover {
             color: #1863a1; }
       .cardAttachments .attachmentList li .progress {
-        width: 30px;
+        width: 50px;
         text-align: center; }
         .cardAttachments .attachmentList li .progress .radialProgressIndicator {
           width: 25px;
@@ -3733,6 +3757,7 @@ div.cardList.narrow {
     max-width: 30%; }
     .content .tagEditor.readWrite ul li .tagLabel {
       width: calc(100% - 30px);
+      width: 100%;
       display: inline-block; }
     .content .tagEditor.readWrite ul li input {
       width: 100%; }
@@ -3823,7 +3848,7 @@ div.cardList.narrow {
       cursor: grab;
       cursor: -moz-grab;
       cursor: -webkit-grab;
-      background: repeating-linear-gradient(0deg, white, white 2px, #ddd 2px, #ddd 3px);
+      background: repeating-linear-gradient(0deg, white, white 2px, #dddddd 2px, #dddddd 3px);
       width: 28px;
       height: 20px;
       margin-left: 6px;
@@ -4070,7 +4095,7 @@ div.cardList.narrow {
     min-width: 220px;
     width: 80%;
     max-width: 400px;
-    background-color: #333;
+    background-color: #333333;
     color: #fff;
     -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
@@ -4085,7 +4110,7 @@ div.cardList.narrow {
       margin-left: 0px;
       width: 0;
       height: 0;
-      border-top: 5px solid #333;
+      border-top: 5px solid #333333;
       border-left: 5px solid transparent;
       border-right: 5px solid transparent; }
     .passwordGenerator .passwordGeneratorBaloon form span {

frontend/delta/js/Clipperz/PM/Connection.js

@@ -493,14 +493,18 @@ Clipperz.log(">>> Connection.messageExceptionHandler:  " + anError.message, anEr
 		if (anError instanceof MochiKit.Async.CancelledError) {
 			result = anError;
 		} else {
-			if ((anError.message == 'Trying to communicate without an active connection')	||
+			var	errorPayload;
-				(anError.message == 'No tollManager available for current session')		
+			
+			errorPayload = Clipperz.Base.evalJSON(anError.req.responseText);
+			if ((errorPayload.message == 'Trying to communicate without an active connection')	||
+				(errorPayload.message == 'No tollManager available for current session')		||
+				(errorPayload.message == 'HashCash verification failed. The provided toll is not valid.')
 			) {
 				result = this.reestablishConnection(anOriginalMessageArguments);
-			} else if (anError.message == 'Session with stale data') {
+			} else if (errorPayload.message == 'Session with stale data') {
 				MochiKit.Signal.signal(this, 'EXCEPTION');
 			} else {
-				result = anError;
+				result = errorPayload;
 			}
 		}
 Clipperz.log("<<< Connection.messageExceptionHandler")

frontend/delta/js/Clipperz/PM/DataModel/Record.js

@@ -42,7 +42,7 @@ Clipperz.PM.DataModel.Record = function(args) {
 	this._setDirectLoginIndexDataFunction		= args.setDirectLoginIndexDataFunction		|| null;
 	this._removeDirectLoginIndexDataFunction	= args.removeDirectLoginIndexDataFunction	|| null;
 	this._createNewDirectLoginFunction			= args.createNewDirectLoginFunction			|| null;
-
+	
 	this._retrieveAttachmentIndexDataFunction	= args.retrieveAttachmentIndexDataFunction	|| null;
 	this._setAttachmentIndexDataFunction		= args.setAttachmentIndexDataFunction		|| null;
 	this._removeAttachmentIndexDataFunction		= args.removeAttachmentIndexDataFunction	|| null;
@@ -301,7 +301,7 @@ Clipperz.Base.extend(Clipperz.PM.DataModel.Record, Clipperz.PM.DataModel.Encrypt
 	},
 
 	//=========================================================================
-	
+
 	attachmentsCount: function() {
 		return MochiKit.Base.keys(this.attachments()).length;
 	},
@@ -436,7 +436,7 @@ Clipperz.Base.extend(Clipperz.PM.DataModel.Record, Clipperz.PM.DataModel.Encrypt
 			}, this))
 		}
 	},
-
+	
 	'createNewDirectLogin': function () {
 		this.saveOriginalDirectLoginStatusToTransientState();
 
@@ -689,7 +689,7 @@ Clipperz.Base.extend(Clipperz.PM.DataModel.Record, Clipperz.PM.DataModel.Encrypt
 						result = someFilteredResults[0];
 						break;
 					default:
-//console.log("Warning: Record.fieldWithLabel('" + aLabel + "') is returning more than one result: " + someFilteredResults.length);
+Clipperz.log("Warning: Record.fieldWithLabel('" + aLabel + "') is returning more than one result: " + someFilteredResults.length);
 						result = someFilteredResults[0];
 						break;
 				}
@@ -715,7 +715,7 @@ Clipperz.Base.extend(Clipperz.PM.DataModel.Record, Clipperz.PM.DataModel.Encrypt
 		var transientStateKey;
 
 		if (typeof(aVersionReference) == 'undefined') {
-			console.log("ERROR; getVersionKey aVersionReference is undefined");
+			Clipperz.log("ERROR; getVersionKey aVersionReference is undefined");
 		}
 
 		transientStateKey = 'versionKeys' + '.' + aVersionReference;
@@ -900,7 +900,7 @@ Clipperz.Base.extend(Clipperz.PM.DataModel.Record, Clipperz.PM.DataModel.Encrypt
 			]
 		}, {trace:true});
 		deferredResult.addCallback(MochiKit.Base.values);
-		deferredResult.addCallback(MochiKit.Base.bind(function (someValues) {
+		deferredResult.addCallback(MochiKit.Base.bind(function(someValues) {
 			return MochiKit.Iter.some(someValues, MochiKit.Base.operator.identity);
 		}, this));
 
@@ -980,7 +980,7 @@ Clipperz.Base.extend(Clipperz.PM.DataModel.Record, Clipperz.PM.DataModel.Encrypt
 				MochiKit.Base.method(this, 'directLogins'),
 				MochiKit.Base.values,
 				MochiKit.Base.partial(MochiKit.Base.map, MochiKit.Base.methodcaller('revertChanges')),
-				
+
 				MochiKit.Base.method(this, 'attachments'),
 				MochiKit.Base.values,
 				MochiKit.Base.partial(MochiKit.Base.map, MochiKit.Base.methodcaller('revertChanges')),
@@ -1048,8 +1048,8 @@ Clipperz.Base.extend(Clipperz.PM.DataModel.Record, Clipperz.PM.DataModel.Encrypt
 			MochiKit.Base.bind(function () {
 				if (isCommitting == false) {
 					if (this.transientState().getValue('directLogins') != null) {
-						this._directLogins = this.transientState().getValue('directLogins');
+					this._directLogins = this.transientState().getValue('directLogins');
-					}
+				}
 					if (this.transientState().getValue('attachments') != null) {
 						this._attachments = this.transientState().getValue('attachments');
 					}

frontend/delta/js/Clipperz/PM/DataModel/User.js

@@ -699,7 +699,7 @@ Clipperz.Base.extend(Clipperz.PM.DataModel.User, Object, {
 						result = someFilteredResults[0];
 						break;
 					default:
-//console.log("Warning: User.recordWithLabel('" + aLabel + "') is returning more than one result: " + someFilteredResults.length);
+Clipperz.log("Warning: User.recordWithLabel('" + aLabel + "') is returning more than one result: " + someFilteredResults.length);
 						result = someFilteredResults[0];
 						break;
 				}

frontend/delta/js/Clipperz/PM/UI/AttachmentController.js

@@ -126,7 +126,9 @@ MochiKit.Base.update(Clipperz.PM.UI.AttachmentController.prototype, {
 		var reference = anAttachment.reference()
 		var queueElement = this.getQueueElement(reference);
 
-		if (queueElement) {
+		var isElementInProgress = (queueElement && queueElement['status'] != 'DONE' && queueElement['status'] != 'CANCELED' && queueElement['status'] != 'FAILED');
+
+		if (isElementInProgress) {
 			deferredResult = new Clipperz.Async.Deferred("Clipperz.PM.UI.AttachmentController.cancelAttachment", {trace:false});
 			deferredResult.addMethod(this, 'updateFileInQueue', reference, {'status': 'CANCELED'});
 			if (queueElement['deferredRequest']) {

frontend/delta/js/Clipperz/PM/UI/Components/Cards/Detail.js

@@ -41,6 +41,7 @@ Clipperz.PM.UI.Components.Cards.DetailClass = React.createClass({
 			result['allTags'] = this.props['allTags'];
 			result['preferences'] = this.props['preferences'];
 			result['attachmentQueueInfo'] = this.props['attachmentQueueInfo'];
+			result['proxyInfo'] = this.props['proxyInfo'];
 		}
 		
 		return result;

frontend/delta/js/Clipperz/PM/UI/Components/Cards/Edit.js

@@ -678,6 +678,9 @@ console.log("DROP");	//, anEvent);
 						]);
 					}, this.state['skippedFiles'])
 				),
+				React.DOM.a({
+					'onClick': MochiKit.Base.method(this, 'setState', {'skippedFiles': []}),
+				}, 'close'),
 			]);
 		}
 

frontend/delta/js/Clipperz/PM/UI/Components/Cards/TagEditor.js

@@ -145,7 +145,7 @@ Clipperz.PM.UI.Components.Cards.TagEditorClass = React.createClass({
 		return	React.DOM.div({'className':Clipperz.PM.UI.Components.classNames(classes)}, [
 			React.DOM.ul({},[
 				MochiKit.Base.map(this.renderTag, this.props['selectedTags']),
-				this.isReadOnly() ? null : React.DOM.li({}, React.DOM.input({'type':'text', 'list':'tagListData', 'onKeyDown':this.handleKeyDown, 'onBlur':this.handleBlur, 'placeholder': "tag"})),
+				this.isReadOnly() ? null : React.DOM.li({}, React.DOM.input({'type':'text', 'list':'tagListData', 'onKeyDown':this.handleKeyDown, 'onBlur':this.handleBlur, 'placeholder': "add tag"})),
 			]),
 			this.isReadOnly() ? null : this.renderEditField()
 		]);

frontend/delta/js/Clipperz/PM/UI/Components/Cards/TextArea.js

@@ -63,7 +63,6 @@ Clipperz.PM.UI.Components.Cards.TextAreaClass = React.createClass({
 	handleKeyDown: function (anEvent) {
 		switch (anEvent.keyCode) {
 			case 27: // escape
-//				console.log("ESCAPE");
 				Mousetrap.trigger('esc');
 				break;
 		}

frontend/delta/js/Clipperz/PM/UI/Components/Cards/View.js

@@ -31,6 +31,7 @@ Clipperz.PM.UI.Components.Cards.ViewClass = React.createClass({
 	propTypes: {
 		'label':	React.PropTypes.string /*.isRequired */ ,
 		'loading':	React.PropTypes.bool,
+		'proxyInfo': React.PropTypes.object.isRequired,
 	},
 
 	getInitialState: function () {
@@ -265,7 +266,7 @@ Clipperz.PM.UI.Components.Cards.ViewClass = React.createClass({
 	renderAttachmentProgress: function(aStatus, aServerStatus, aProgress) {
 		var result;
 
-		var queueOperationsInProgress = (aStatus != 'DONE' && aStatus != 'CANCELED' && aStatus != 'FAILED');
+		var queueOperationsInProgress = (aStatus && aStatus != 'DONE' && aStatus != 'CANCELED' && aStatus != 'FAILED');
 
 		result = null;
 		if (aStatus == 'UPLOADING' || aStatus == 'DOWNLOADING') {
@@ -321,19 +322,21 @@ Clipperz.PM.UI.Components.Cards.ViewClass = React.createClass({
 	renderAttachmentActions: function(aStatus, aServerStatus, anAttachment) {
 		var result;
 
-		var queueOperationsInProgress = (aStatus != 'DONE' && aStatus != 'CANCELED' && aStatus != 'FAILED');
+		var queueOperationsInProgress = (aStatus && aStatus != 'DONE' && aStatus != 'CANCELED' && aStatus != 'FAILED');
 
 		result = null;
-		if (aServerStatus == 'AVAILABLE' && ! queueOperationsInProgress) {
+		if (this.props['proxyInfo']['proxyType'] != 'OFFLINE_COPY') {
-			result = React.DOM.a({
+			if (aServerStatus == 'AVAILABLE' && ! queueOperationsInProgress) {
-				'className': 'download',
+				result = React.DOM.a({
-				'onClick': MochiKit.Base.method(this, 'handleGetAttachment', anAttachment),
+					'className': 'download',
-			}, "\u2b07");
+					'onClick': MochiKit.Base.method(this, 'handleGetAttachment', anAttachment),
-		} else if (aServerStatus == 'AVAILABLE' && queueOperationsInProgress) {
+				}, "\u2b07");
-			result = React.DOM.a({
+			} else if (aServerStatus == 'AVAILABLE' && queueOperationsInProgress) {
-				'className': 'cancel',
+				result = React.DOM.a({
-				'onClick': MochiKit.Base.method(this, 'handleCancelDownload', anAttachment)
+					'className': 'cancel',
-			}, "remove field");
+					'onClick': MochiKit.Base.method(this, 'handleCancelDownload', anAttachment)
+				}, "remove field");
+			}
 		}
 
 		return result;

frontend/delta/js/Clipperz/PM/UI/MainController.js

@@ -618,7 +618,7 @@ Clipperz.log("THE BROWSER IS OFFLINE");
 		
 		return deferredResult;
 	},
-
+	
 	collectAttachmentInfo: function(anAttachment) {
 		var deferredResult;
 		
@@ -953,7 +953,7 @@ Clipperz.log("THE BROWSER IS OFFLINE");
 			function (someCards) { return someCards.length; },
 		], {trace:false});
 	},
-
+	
 	getCardsWithAttachmentsCount: function () {
 		var	archivedCardsFilter =	this.shouldIncludeArchivedCards()
 									?	MochiKit.Async.succeed
@@ -1352,8 +1352,8 @@ Clipperz.log("THE BROWSER IS OFFLINE");
 				'messageBox':					this.messageBoxContent(),
 				'userInfo':						this.userInfo(),
 				'accountInfo':					this.userAccountInfo(),
-				'selectionPanelStatus':			this.isSelectionPanelOpen()			? 'OPEN' : 'CLOSED',
+				'selectionPanelStatus':			this.isSelectionPanelOpen()	? 'OPEN' : 'CLOSED',
-				'settingsPanelStatus':			this.isSettingsPanelOpen()			? 'OPEN' : 'CLOSED',
+				'settingsPanelStatus':			this.isSettingsPanelOpen()	? 'OPEN' : 'CLOSED',
 				'attachmentQueueBoxStatus':		this.isAttachmentQueueBoxOpen()	? 'OPEN' : 'CLOSED',
 				'featureSet':					this.featureSet(),
 				'features':						this.features(),
@@ -1368,6 +1368,7 @@ Clipperz.log("THE BROWSER IS OFFLINE");
 		} else if (aPageName == 'cardDetailPage') {
 			extraProperties = {
 				'attachmentQueueInfo':			this.attachmentQueueInfo(),
+				'proxyInfo':					this.proxyInfo(),
 			};
 		} else if (aPageName == 'errorPage') {
 			extraProperties = {
@@ -1936,10 +1937,10 @@ Clipperz.log("THE BROWSER IS OFFLINE");
 			MochiKit.Base.method(this, 'refreshUI'),
 		], {trace:false});
 	},
-
+	
 	isPageInEditMode: function() {
 		var	currentPage = this.pages()[this.currentPage()];
-		return currentPage.props['mode'] == 'edit';
+		return currentPage ? currentPage.props['mode'] == 'edit' : false;
 	},
 	
 	enterEditMode: function () {
@@ -2093,11 +2094,28 @@ Clipperz.log("THE BROWSER IS OFFLINE");
 	//============================================================================
 
 	matchMediaQuery_handler: function (newQueryStyle) {
+		var wasInEditMode = this.isPageInEditMode();
+		var currentPage = this.currentPage();
+		var selectedCardInfo = this.selectedCardInfo();
+
 		this._mediaQueryStyle = newQueryStyle;
 
-		if (this.currentPage() == 'cardDetailPage') {
+		if (currentPage == 'cardDetailPage') {
 			this.moveOutPage(this.currentPage(), 'mainPage');
 		}
+
+		if (selectedCardInfo) {
+			this.pages()[currentPage].setProps({'mode': 'view'});
+
+			if (currentPage == 'mainPage' && newQueryStyle == 'narrow') {
+				this.selectCard(selectedCardInfo, true);
+			}
+			if (wasInEditMode) {
+				MochiKit.Async.callLater(0.1, MochiKit.Base.method(this, 'enterEditMode'));
+				MochiKit.Async.callLater(0.1, MochiKit.Base.method(this, 'updateSelectedCard', this.selectedCardInfo(), false, true));
+			}
+		}
+
 		this.resetPanels();
 		this.refreshCurrentPage();
 	},

frontend/delta/scss/core/tagEditor.scss

@@ -54,6 +54,7 @@ $tagEditor_lineHeight: 27px;
 
 			margin-right: 10px;
 			padding-left: 1px;
+			padding-right: 30px;
 			line-height: $tagEditor_lineHeight;
 
 			/* boxed style test */
@@ -80,10 +81,14 @@ $tagEditor_lineHeight: 27px;
 				@include userSelectNone();
 
 				cursor: pointer;
-				line-height: 22px;
+				/*line-height: 22px;*/
 				color: #ccc;
 				/*color:white;*/
 
+				position: absolute;
+				margin-left: 5px;
+				line-height: 31px;
+
 				&:hover {
 					color: rgb(155, 0, 0);
 				};

frontend/delta/scss/style/card.scss

@@ -411,6 +411,11 @@ $cardViewBasePadding: 10px;
 				}
 			}
 		}
+
+		a {
+			text-decoration: underline;
+			cursor: pointer;
+		}
 	}
 
 	.attachmentList {
@@ -488,6 +493,7 @@ $cardViewBasePadding: 10px;
 					cursor:pointer;
 					font-size: 20pt;
 					color: #aaa;
+					margin-top:1px;
 
 					&.cancel, &.remove {
 						@include icon-font();
@@ -505,7 +511,7 @@ $cardViewBasePadding: 10px;
 			}
 
 			.progress {
-				width: 30px;
+				width: 50px;
 				text-align: center;
 
 				.radialProgressIndicator {
@@ -665,6 +671,7 @@ $cardViewBasePadding: 10px;
 
 					.tagLabel {
 						width: calc(100% - 30px);
+						width: 100%;
 						display: inline-block;
 					}