Edit Page: Optimize Layout for Safari & Text Color Disabled State

apps/sales/src/app/modules/ui/text-input/text-input.component.scss

@@ -1,3 +1,6 @@
+@import 'variables';
+@import 'mixins/media';
+
 $status-width: 115px;
 
 input {
@@ -7,15 +10,25 @@ input {
 label {
   &.expand {
     display: flex;
+    align-items: center;
     width: calc(95% - #{$status-width});
   }
 
   input {
     padding-top: 2px;
-  }
 
-  .suffix {
-    margin-top: -1px;
+    margin-bottom: 0;
+    padding-bottom: 0;
+    margin-top: 0;
+    padding-top: 0;
+
+    &:disabled {
+      color: $text-black;
+
+      // for iPad Safari
+      -webkit-text-fill-color: $text-black;
+      opacity: 1;
+    }
   }
 }
 

apps/sales/src/app/shared/directives/input-resize.directive.ts

@@ -7,6 +7,7 @@ import {
   SimpleChanges,
 } from '@angular/core';
 import { NgModel } from '@angular/forms';
+import { AppService } from '../../core/services/app.service';
 
 // tslint:disable-next-line: directive-selector
 @Directive({ selector: 'input[resize]' })
@@ -19,7 +20,8 @@ export class InputResizeDirective implements OnChanges {
 
   constructor(
     private elementRef: ElementRef<HTMLInputElement>,
-    private renderer: Renderer2
+    private renderer: Renderer2,
+    private appService: AppService
   ) {}
 
   ngOnChanges({ ngModel }: SimpleChanges) {
@@ -29,6 +31,19 @@ export class InputResizeDirective implements OnChanges {
   }
 
   resize(element: HTMLInputElement, value: string = this.element.value) {
+    if (this.appService.isIPadEnv()) {
+      return this.renderer.setStyle(
+        element,
+        'width',
+        this.calculatePxFromLength(value.length)
+      );
+    }
+
     this.renderer.setAttribute(element, 'size', String(value.length || 1));
   }
+
+  private calculatePxFromLength(length: number): string {
+    const lengthMultiplier = 16;
+    return String(Math.max(40, length * lengthMultiplier)) + 'px';
+  }
 }

apps/sales/src/scss/modules/_input.scss

@@ -65,6 +65,7 @@
   background-image: url('assets/images/close.svg');
   border: none;
   background-size: contain;
+  background-repeat: no-repeat;
 }
 
 .isa-input-reset-sm {
@@ -76,6 +77,7 @@
   background-image: url('assets/images/close.svg');
   border: none;
   background-size: contain;
+  background-repeat: no-repeat;
 }
 
 .isa-input-error {