From 024e2ace4c96167400556734079735744827bd6c Mon Sep 17 00:00:00 2001
From: Brie Anne Demkiw <brie@automattic.com>
Date: Fri, 4 Dec 2015 10:43:06 -0800
Subject: [PATCH 1/3] Domain Management: Convert DNS editor floats to flexbox.

---
 .../domain-management/dns/dns-record.jsx      | 16 +++++---
 .../upgrades/domain-management/style.scss     | 38 +++++++++++++------
 2 files changed, 37 insertions(+), 17 deletions(-)

diff --git a/client/my-sites/upgrades/domain-management/dns/dns-record.jsx b/client/my-sites/upgrades/domain-management/dns/dns-record.jsx
index f2be34f577af9..057048917fa05 100644
--- a/client/my-sites/upgrades/domain-management/dns/dns-record.jsx
+++ b/client/my-sites/upgrades/domain-management/dns/dns-record.jsx
@@ -87,11 +87,17 @@ var DnsRecord = React.createClass( {
 	render: function() {
 		return (
 			<li>
-				<label>{ this.props.dnsRecord.type }</label>
-				{ ! this.props.dnsRecord.protected_field || 'MX' === this.props.dnsRecord.type ?
-					<button className="remove" onClick={ this.deleteDns }>{ this.translate( 'Delete' ) }</button> : null }
-				<strong>{ this.getName() }</strong>
-				<em>{ this.handledBy() }</em>
+				<div className="dns__list-type">
+					<label>{ this.props.dnsRecord.type }</label>
+				</div>
+				<div className="dns__list-info">
+					<strong>{ this.getName() }</strong>
+					<em>{ this.handledBy() }</em>
+				</div>
+				<div className="dns__list-remove">
+					{ ! this.props.dnsRecord.protected_field || 'MX' === this.props.dnsRecord.type ?
+						<button className="remove" onClick={ this.deleteDns }>{ this.translate( 'Delete' ) }</button> : null }
+				</div>
 			</li>
 		);
 	}
diff --git a/client/my-sites/upgrades/domain-management/style.scss b/client/my-sites/upgrades/domain-management/style.scss
index ac6930c475309..a30f76b775033 100644
--- a/client/my-sites/upgrades/domain-management/style.scss
+++ b/client/my-sites/upgrades/domain-management/style.scss
@@ -901,6 +901,8 @@ ul.dns__list {
 
 	li {
 		border-top: 1px solid $gray-light;
+		display: flex;
+		justify-content: space-between;
 		overflow: auto;
 		padding: 10px 0;
 		position: relative;
@@ -915,12 +917,11 @@ ul.dns__list {
 			background: #87a6bc;
 			border-radius: 2px;
 			color: $white;
-			float: left;
+			display: block;
 			font-size: 12px;
 			margin: 0 10px 0 0;
 			padding: 10px 5px;
 			text-align: center;
-			width: 60px;
 		}
 
 		strong {
@@ -928,16 +929,29 @@ ul.dns__list {
 			font-weight: normal;
 		}
 	}
-	.remove {
-		background-color: #87a6bc;
-		border-radius: 2px;
-		color: #FFF;
-		cursor: pointer;
-		display: inline-block;
-		float: right;
-		font-size: 9px;
-		padding: 3px 8px;
-		text-transform: uppercase;
+
+	.dns__list-type {
+		min-width: 60px;
+	}
+
+	.dns__list-info {
+		width: 100%;
+	}
+
+	.dns__list-remove {
+		text-align: right;
+		width: 100px;
+
+		.remove {
+			background-color: #87a6bc;
+			border-radius: 2px;
+			color: #FFF;
+			cursor: pointer;
+			display: inline-block;
+			font-size: 9px;
+			padding: 3px 8px;
+			text-transform: uppercase;
+		}
 	}
 }
 

From fb9f2fe074daac020aa8defffaeee8e2d0ae983c Mon Sep 17 00:00:00 2001
From: Brie Anne Demkiw <brie@automattic.com>
Date: Fri, 4 Dec 2015 10:49:04 -0800
Subject: [PATCH 2/3] Domain Management: Use new RemoveButton component for
 delete DNS record.

---
 .../upgrades/domain-management/dns/dns-record.jsx     |  7 ++++++-
 client/my-sites/upgrades/domain-management/style.scss | 11 -----------
 2 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/client/my-sites/upgrades/domain-management/dns/dns-record.jsx b/client/my-sites/upgrades/domain-management/dns/dns-record.jsx
index 057048917fa05..5db57e5989e38 100644
--- a/client/my-sites/upgrades/domain-management/dns/dns-record.jsx
+++ b/client/my-sites/upgrades/domain-management/dns/dns-record.jsx
@@ -3,6 +3,11 @@
  */
 var React = require( 'react' );
 
+/**
+ * Internal dependencies
+ */
+import RemoveButton from "components/remove-button";
+
 var DnsRecord = React.createClass( {
 	propTypes: {
 		deleteDns: React.PropTypes.func.isRequired,
@@ -96,7 +101,7 @@ var DnsRecord = React.createClass( {
 				</div>
 				<div className="dns__list-remove">
 					{ ! this.props.dnsRecord.protected_field || 'MX' === this.props.dnsRecord.type ?
-						<button className="remove" onClick={ this.deleteDns }>{ this.translate( 'Delete' ) }</button> : null }
+						<RemoveButton icon="trash" onClick={ this.deleteDns } /> : null }
 				</div>
 			</li>
 		);
diff --git a/client/my-sites/upgrades/domain-management/style.scss b/client/my-sites/upgrades/domain-management/style.scss
index a30f76b775033..7ebe424173f81 100644
--- a/client/my-sites/upgrades/domain-management/style.scss
+++ b/client/my-sites/upgrades/domain-management/style.scss
@@ -941,17 +941,6 @@ ul.dns__list {
 	.dns__list-remove {
 		text-align: right;
 		width: 100px;
-
-		.remove {
-			background-color: #87a6bc;
-			border-radius: 2px;
-			color: #FFF;
-			cursor: pointer;
-			display: inline-block;
-			font-size: 9px;
-			padding: 3px 8px;
-			text-transform: uppercase;
-		}
 	}
 }
 

From ebce77fcf8111fdb612816e7a920f945a2321641 Mon Sep 17 00:00:00 2001
From: Brie Anne Demkiw <brie@automattic.com>
Date: Wed, 9 Dec 2015 11:25:46 -0800
Subject: [PATCH 3/3] Domain Management: Fix wrapping issues with long URLs in
 DNS editor.

---
 client/my-sites/upgrades/domain-management/style.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/my-sites/upgrades/domain-management/style.scss b/client/my-sites/upgrades/domain-management/style.scss
index 7ebe424173f81..fb9ee342e077d 100644
--- a/client/my-sites/upgrades/domain-management/style.scss
+++ b/client/my-sites/upgrades/domain-management/style.scss
@@ -936,6 +936,7 @@ ul.dns__list {
 
 	.dns__list-info {
 		width: 100%;
+		word-break: break-all;
 	}
 
 	.dns__list-remove {