MAGETWO-41995: Template structure of Admin area is broken when Translate Inline mode is enabled

Author: Olga Lytvynenko

app/code/Magento/Translation/view/adminhtml/templates/translate_inline.phtml

@@ -17,7 +17,7 @@
 <script id="translate-form-template" type="text/x-magento-template">
     <form id="<%- data.id %>">
         <% _.each(data.items, function(item, i) { %>
-            <div class="magento_table_container">
+            <div class="translate-table-container">
                 <table class="table">
                     <% _.each(item, function(value, index) { %>
                         <tr>

app/code/Magento/Translation/view/frontend/templates/translate_inline.phtml

@@ -18,7 +18,7 @@
 <script id="translate-form-template" type="text/x-magento-template">
     <form id="<%- data.id %>">
         <% _.each(data.items, function(item, i) { %>
-            <div class="magento_table_container">
+            <div class="translate-table-container">
                 <table cellspacing="0" class="table">
                     <% _.each(item, function(value, index) { %>
                         <tr>

lib/web/mage/translate-inline.css

@@ -5,45 +5,53 @@
 
 .trnslate-inline-area [data-translate],
 .trnslate-inline-area .translate-inline {
-	outline:  dotted 1px red!important;
+    outline: dotted 1px red !important;
 }
+
 * html .translate-inline,
-*+html .translate-inline{
-	border:  dotted 1px red !important;
+* + html .translate-inline {
+    border: dotted 1px red !important;
 }
-.translate-inline-script, .translate-inline-title {
-	background: yellow;
-	color: black;
-	font-weight: bold;
+
+.translate-inline-script,
+.translate-inline-title {
+    background: yellow;
+    color: black;
+    font-weight: bold;
 }
+
 #translate-inline-trig {
-	position: absolute;
-	left: -1000px; 
-	opacity: .8;
-	filter: alpha(opacity=80);
-	cursor: pointer; 
-	margin-top: 10px;
-	z-index: 2000;
+    cursor: pointer;
+    filter: alpha(opacity=80);
+    left: -1000px;
+    margin-top: 10px;
+    opacity: .8;
+    position: absolute;
+    z-index: 2000;
 }
 
 .data.table.translate table {
-	width: 100%;
+    width: 100%;
 }
+
 .data.table.translate td {
-	background: none;
-	padding: 5px 5px 5px 0;
-	text-align: left;
+    background: none;
+    padding: 5px 5px 5px 0;
+    text-align: left;
 }
+
 .data.table.translate th.label {
-	border: none;
-	font-weight: bold;
-	text-align: left;
-	padding: 5px 5px 5px 0;
-	width: 150px;
+    border: none;
+    font-weight: bold;
+    padding: 5px 5px 5px 0;
+    text-align: left;
+    width: 150px;
 }
+
 .data.table.translate td.value .input-text {
-	width: 98%;
+    width: 98%;
 }
+
 p.accent {
-	color: #d12c01;
+    color: #d12c01;
 }