[Ally Bug] Remove table layout from installation commands. (#9058)

Author: Daniel Jacinto

src/Bootstrap/dist/css/bootstrap-theme.css

@@ -370,23 +370,18 @@
 
     .tab-content {
       .tab-pane {
-        > div {
-          display: table;
-          height: 1px;
-        }
-
+        
         .install-script-row {
-          display: table-row;
+          display: flex;
           height: 100%;
+          width: 100%;
 
           .install-script {
-            display: table-cell;
             background-color: @panel-footer-bg;
             font-family: @font-family-monospace;
             font-size: 1em;
             color: #fff;
-            width: 100%;
-            max-width: 1px;
+            width: calc(100% - 40px);
             line-height: 1.5;
             white-space: pre-wrap;
             // Add a border with the same color as the background to support visual callout
@@ -396,16 +391,13 @@
             border-width: 1px 0 1px 1px;
             vertical-align: middle;
             word-break: break-word;
+            margin: 0px;
           }
 
-          .copy-button {
-            height: 100%;
-
-            button {
+          .copy-button button {
               height: 100%;
               min-height: 42px;
               line-height: 1.5;
-            }
           }
         }
 

src/Bootstrap/less/theme/page-display-package.less

@@ -180,21 +180,19 @@
 {
     var thirdPartyPackageManager = packageManager as ThirdPartyPackageManagerViewModel;
     <div role="tabpanel" class="tab-pane @(active ? "active" : string.Empty)" id="@packageManager.Id">
-        <div>
-            <div class="install-script-row">
-                @{
-                    var lastIndex = packageManager.InstallPackageCommands.Length - 1;
-                    var cs = packageManager.InstallPackageCommands.Select((c, i) => i < lastIndex ? c + Environment.NewLine : c);
-                }
-                @* Writing out the install command must be on a single line to avoid undesired whitespace in the <pre> tag. *@
-                <pre class="install-script" id="@packageManager.Id-text">@foreach (var c in cs) {<span class="install-command-row">@c</span>}</pre>
-                <div class="copy-button">
-                    <button id="@packageManager.Id-button" class="btn btn-default btn-warning" type="button"
-                            data-toggle="popover" data-placement="bottom" data-content="Copied."
-                            aria-label="@packageManager.CopyLabel" role="button">
-                        <span class="ms-Icon ms-Icon--Copy" aria-hidden="true"></span>
-                    </button>
-                </div>
+        <div class="install-script-row">
+            @{
+                var lastIndex = packageManager.InstallPackageCommands.Length - 1;
+                var cs = packageManager.InstallPackageCommands.Select((c, i) => i < lastIndex ? c + Environment.NewLine : c);
+            }
+            @* Writing out the install command must be on a single line to avoid undesired whitespace in the <pre> tag. *@
+            <pre class="install-script" id="@packageManager.Id-text">@foreach (var c in cs) {<span class="install-command-row">@c</span>}</pre>
+            <div class="copy-button">
+                <button id="@packageManager.Id-button" class="btn btn-default btn-warning" type="button"
+                        data-toggle="popover" data-placement="bottom" data-content="Copied."
+                        aria-label="@packageManager.CopyLabel" role="button">
+                    <span class="ms-Icon ms-Icon--Copy" aria-hidden="true"></span>
+                </button>
             </div>
         </div>