Fix WooCommerce integration tab to show copy buttons in small displays

src/app/invoice/invoice.component.ts

@@ -16,7 +16,7 @@ var Buffer = require('buffer/').Buffer;
   selector: 'app-invoice',
   templateUrl: './invoice.component.html',
   styleUrls: ['./invoice.component.css']
-});
+})
 
 export class InvoiceComponent implements OnInit {
 	faCheck = faCheck;

src/app/settings/settings.component.html

@@ -170,17 +170,31 @@
 					</div>			
 				</mat-tab>
 				<mat-tab label="WooCommerce">
+					<div >
 							<div *ngIf="wooOwner == ''">
 								<button mat-raised-button color="primary" (click)="generateWooToken()">
 									Generate Token
 								</button>
 							</div>
 							<table *ngIf="wooOwner != ''">
+								<tbody>
 								<tr>
-							<td class="heading">Owner:</td>
+									<td class="heading" style="width: 100%;">Owner:</td>
 								</tr>
 								<tr>
-							<td class="small">{{wooOwner}}</td>
+									<td>
+									<div>
+										<textarea disabled
+												  style="border: none;
+														 outline: none;
+														 min-height: 150px;
+														 width: 94%;"
+												  cdkTextareaAutosize
+												  cdkAutosizeMinRows="1"
+												  cdkAutosizeMaxRows="3">{{wooOwner}}
+										</textarea>
+									</div>
+									</td>
 									<td class="urlCopyBtn">
 										<a (click)='copyWooOwner()' >	
 											<fa-icon [icon]="faCopy" 
@@ -190,10 +204,22 @@
 									</td>
 								</tr>
 								<tr>
-							<td class="heading">Token:</td>
+									<td class="heading" style="width: 60%;">Token:</td>
 								</tr>
 								<tr>
-							<td class="small">{{wooToken}}</td>
+									<td>
+									<div>
+										<textarea disabled
+												  style="border: none;
+														 outline: none;
+														 min-height: 150px;
+														 width: 94%;"
+												  cdkTextareaAutosize
+												  cdkAutosizeMinRows="1"
+												  cdkAutosizeMaxRows="3">{{wooToken}}
+										</textarea>
+									</div>
+									</td>
 									<td class="urlCopyBtn">
 										<a (click)='copyWooToken()' >	
 											<fa-icon [icon]="faCopy" 
@@ -203,11 +229,24 @@
 									</td>
 								</tr>
 								<tr>
-							<td class="heading">URL:</td>
+									<td class="heading" style="width: 60%;">URL:</td>
 								</tr>
 								<tr>
-							<td class="small">{{wooUrl}}</td>
+									<td>
+									<div>
+										<textarea disabled
+												  style="border: none;
+														 outline: none;
+														 min-height: 150px;
+														 width: 94%;"
+												  cdkTextareaAutosize
+												  cdkAutosizeMinRows="1"
+												  cdkAutosizeMaxRows="3">{{wooUrl}}
+										</textarea>
+									</div>
+									</td>
 								</tr>
+							    </tbody>
 							</table>
 							<div class="toolbar" align="center">
 								<button mat-raised-button 
@@ -216,6 +255,7 @@
 								</button>
 							</div>
 						
+					</div>
 				</mat-tab>
 			</mat-tab-group>
 		</mat-tab>