Fix WooCommerce integration tab to show copy buttons in small displays

src/app/invoice/invoice.component.ts

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

src/app/settings/settings.component.html

@@ -170,52 +170,92 @@
 					</div>			
 				</mat-tab>
 				<mat-tab label="WooCommerce">
-					<div *ngIf="wooOwner == ''">
+					<div >
-						<button mat-raised-button color="primary" (click)="generateWooToken()">
+							<div *ngIf="wooOwner == ''">
-							Generate Token
+								<button mat-raised-button color="primary" (click)="generateWooToken()">
-						</button>
+									Generate Token
-					</div>
+								</button>
-					<table *ngIf="wooOwner != ''">
+							</div>
-						<tr>
+							<table *ngIf="wooOwner != ''">
-							<td class="heading">Owner:</td>
+								<tbody>
-						</tr>
+								<tr>
-						<tr>
+									<td class="heading" style="width: 100%;">Owner:</td>
-							<td class="small">{{wooOwner}}</td>
+								</tr>
-							<td class="urlCopyBtn">
+								<tr>
-								<a (click)='copyWooOwner()' >	
+									<td>
-									<fa-icon [icon]="faCopy" 
+									<div>
-								class="copy-button">
+										<textarea disabled
-									</fa-icon>
+												  style="border: none;
-								</a>
+														 outline: none;
-							</td>
+														 min-height: 150px;
-						</tr>
+														 width: 94%;"
-						<tr>
+												  cdkTextareaAutosize
-							<td class="heading">Token:</td>
+												  cdkAutosizeMinRows="1"
-						</tr>
+												  cdkAutosizeMaxRows="3">{{wooOwner}}
-						<tr>
+										</textarea>
-							<td class="small">{{wooToken}}</td>
+									</div>
-							<td class="urlCopyBtn">
+									</td>
-								<a (click)='copyWooToken()' >	
+									<td class="urlCopyBtn">
-									<fa-icon [icon]="faCopy" 
+										<a (click)='copyWooOwner()' >	
-								class="copy-button">
+											<fa-icon [icon]="faCopy" 
-									</fa-icon>
+										class="copy-button">
-								</a>
+											</fa-icon>
-							</td>
+										</a>
-						</tr>
+									</td>
-						<tr>
+								</tr>
-							<td class="heading">URL:</td>
+								<tr>
-						</tr>
+									<td class="heading" style="width: 60%;">Token:</td>
-						<tr>
+								</tr>
-							<td class="small">{{wooUrl}}</td>
+								<tr>
-						</tr>
+									<td>
-					</table>
+									<div>
-					<div class="toolbar" align="center">
+										<textarea disabled
-						<button mat-raised-button 
+												  style="border: none;
-								(click)="close()">
+														 outline: none;
-							Close
+														 min-height: 150px;
-						</button>
+														 width: 94%;"
-					</div>
+												  cdkTextareaAutosize
+												  cdkAutosizeMinRows="1"
+												  cdkAutosizeMaxRows="3">{{wooToken}}
+										</textarea>
+									</div>
+									</td>
+									<td class="urlCopyBtn">
+										<a (click)='copyWooToken()' >	
+											<fa-icon [icon]="faCopy" 
+										class="copy-button">
+											</fa-icon>
+										</a>
+									</td>
+								</tr>
+								<tr>
+									<td class="heading" style="width: 60%;">URL:</td>
+								</tr>
+								<tr>
+									<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 
+										(click)="close()">
+									Close
+								</button>
+							</div>
 						
+					</div>
 				</mat-tab>
 			</mat-tab-group>
 		</mat-tab>