@syncfusion/ej2-pdfviewer 17.3.59-4568 → 17.3.60-4568

package/package.json

@@ -70,5 +70,5 @@
     },
     "sideEffects": false,
     "typings": "index.d.ts",
-    "version": "17.3.59-4568"
+    "version": "17.3.60-4568"
   }

package/src/pdfviewer/annotation/text-markup-annotation.js

@@ -1585,8 +1585,14 @@ var TextMarkupAnnotation = /** @class */ (function () {
             }
             annotCanvas.style.width = '';
             annotCanvas.style.height = '';
-            annotCanvas.width = this.pdfViewerBase.pageSize[pageNumber].width * this.pdfViewerBase.getZoomFactor();
-            annotCanvas.height = this.pdfViewerBase.pageSize[pageNumber].height * this.pdfViewerBase.getZoomFactor();
+            if (this.pdfViewer.restrictZoomRequest) {
+                annotCanvas.style.width = this.pdfViewerBase.pageSize[pageNumber].width * this.pdfViewerBase.getZoomFactor() + 'px';
+                annotCanvas.style.height = this.pdfViewerBase.pageSize[pageNumber].height * this.pdfViewerBase.getZoomFactor() + 'px';
+            }
+            else {
+                annotCanvas.width = this.pdfViewerBase.pageSize[pageNumber].width * this.pdfViewerBase.getZoomFactor();
+                annotCanvas.height = this.pdfViewerBase.pageSize[pageNumber].height * this.pdfViewerBase.getZoomFactor();
+            }
             this.renderTextMarkupAnnotations(null, pageNumber, annotCanvas, this.pdfViewerBase.getZoomFactor());
         }
     };

package/src/pdfviewer/base/pdfviewer-base.js

@@ -4738,6 +4738,9 @@ var PdfViewerBase = /** @class */ (function () {
     // tslint:disable-next-line
     PdfViewerBase.prototype.getStoredData = function (pageIndex) {
         var zoomFactor = this.retrieveCurrentZoomFactor();
+        if (this.pdfViewer.restrictZoomRequest && !this.pdfViewer.tileRenderingSettings.enableTileRendering) {
+            zoomFactor = 1;
+        }
         // tslint:disable-next-line
         var storedData = this.getWindowSessionStorage(pageIndex, zoomFactor) ? this.getWindowSessionStorage(pageIndex, zoomFactor) : this.getPinchZoomPage(pageIndex);
         // tslint:disable-next-line

package/src/pdfviewer/magnification/magnification.js

@@ -603,9 +603,16 @@ var Magnification = /** @class */ (function () {
                 var pageNumber = parseInt(pageDivs[i].id.split('_pageCanvas_')[1]);
                 var pageWidth = this.pdfViewerBase.pageSize[pageNumber].width;
                 if ((viewPortWidth < pageWidth) && this.pdfViewer.tileRenderingSettings.enableTileRendering) {
-                    pageDivs[i].width = pageWidth * this.pdfViewerBase.getZoomFactor();
-                    // tslint:disable-next-line:max-line-length
-                    pageDivs[i].height = this.pdfViewerBase.pageSize[pageNumber].height * this.pdfViewerBase.getZoomFactor();
+                    if (this.pdfViewer.restrictZoomRequest) {
+                        pageDivs[i].style.width = pageWidth * this.pdfViewerBase.getZoomFactor() + 'px';
+                        // eslint-disable-next-line max-len
+                        pageDivs[i].style.height = this.pdfViewerBase.pageSize[pageNumber].height * this.pdfViewerBase.getZoomFactor() + 'px';
+                    }
+                    else {
+                        pageDivs[i].width = pageWidth * this.pdfViewerBase.getZoomFactor();
+                        // eslint-disable-next-line max-len
+                        pageDivs[i].height = this.pdfViewerBase.pageSize[pageNumber].height * this.pdfViewerBase.getZoomFactor();
+                    }
                 }
             }
             if (this.pdfViewerBase.textLayer) {
@@ -708,11 +715,11 @@ var Magnification = /** @class */ (function () {
             var canvas = this.pdfViewerBase.getElement('_pageCanvas_' + i);
             var width = this.pdfViewerBase.pageSize[i].width * this.zoomFactor;
             var height = this.pdfViewerBase.pageSize[i].height * this.zoomFactor;
-            if (canvas) {
+            if (canvas && !this.pdfViewer.restrictZoomRequest) {
                 // tslint:disable-next-line:max-line-length
                 this.pdfViewerBase.renderPageCanvas(this.pdfViewerBase.getElement('_pageDiv_' + i), width, height, i, 'none');
             }
-            else {
+            else if (!this.pdfViewer.restrictZoomRequest) {
                 this.pdfViewerBase.renderPageElement(i);
             }
         }

package/src/pdfviewer/pdfviewer-model.d.ts

@@ -1871,6 +1871,13 @@ export interface PdfViewerModel extends ComponentModel{
      */
     enableHandwrittenSignature?: boolean;
 
+    /**
+     * restrict zoom request.
+     *
+     * @default false
+     */
+    restrictZoomRequest?: boolean;
+
     /**
      * Specifies the open state of the hyperlink in the PDF document.
      * @default CurrentTab

package/src/pdfviewer/pdfviewer.d.ts

@@ -1559,6 +1559,12 @@ export declare class PdfViewer extends Component<HTMLElement> implements INotify
      * @default true
      */
     enableHandwrittenSignature: boolean;
+    /**
+     * restrict zoom request.
+     *
+     * @default false
+     */
+    restrictZoomRequest: boolean;
     /**
      * Specifies the open state of the hyperlink in the PDF document.
      * @default CurrentTab

package/src/pdfviewer/pdfviewer.js

@@ -2619,6 +2619,9 @@ var PdfViewer = /** @class */ (function (_super) {
     __decorate([
         Property(true)
     ], PdfViewer.prototype, "enableHandwrittenSignature", void 0);
+    __decorate([
+        Property(false)
+    ], PdfViewer.prototype, "restrictZoomRequest", void 0);
     __decorate([
         Property('CurrentTab')
     ], PdfViewer.prototype, "hyperlinkOpenState", void 0);

package/styles/fluent2.css

@@ -83,7 +83,7 @@
   --color-sf-border-pressed: #4d4d4d;
   --color-sf-border-focus: var(--color-sf-border);
   --color-sf-border-selected: #b3b3b3;
-  --color-sf-border-dragged: var(--color-sf-primary);
+  --color-sf-border-dragged: #ebf3fc;
   --color-sf-border-disabled: var(--color-sf-border-light);
   --color-sf-border-warning: #da3b01;
   --color-sf-border-error: #c50f1f;
@@ -310,6 +310,42 @@
   --color-sf-utility-danger-lighter: #fecdc9;
   --color-sf-fg-white: #fff;
   --color-sf-shadow-color: #000;
+  --color-sf-shadow-color1: #fff;
+  --color-sf-link-button: var(--color-sf-primary);
+  --color-sf-link-button-hover: #115ea3;
+  --color-sf-link-button-pressed: #0c3b5e;
+  --color-sf-link-button-focus: #0f6cbd;
+  --color-sf-link-button-border-focus: #242424;
+  --color-sf-chip-bg-color: #f5f5f5;
+  --color-sf-chip-border-color: rgba(0, 0, 0, 0);
+  --color-sf-chip-bg-disabled: #f0f0f0;
+  --color-sf-chip-border-disabled: #fff;
+  --color-sf-secondary-outline-button-text-color-hover: #242424;
+  --color-sf-secondary-outline-button-text-color-pressed: #242424;
+  --color-sf-secondary-outline-button-text-color-selected: #242424;
+  --color-sf-secondary-outline-button-text-color-focus: #242424;
+  --color-sf-slider-shadow1: #fff;
+  --color-sf-slider-shadow2: #d1d1d1;
+  --color-sf-slider-disabled: #d1d1d1;
+  --color-sf-slider-border-color: rgba(255, 255, 255, 0);
+  --color-sf-slider-bg-disabled: #e0e0e0;
+  --color-sf-toggle-switch-border-disabled: #f0f0f0;
+  --color-sf-calendar-icon-color: #0f6ebd;
+  --color-sf-calendar-header-text-color-pressed: #0f548c;
+  --color-sf-calendar-today-bg-color: #0f63bd;
+  --color-sf-dialog-border: #fafafa;
+  --color-sf-badge-light-bg-color: #e6e6e6;
+  --color-sf-secondary-badge-border-color: #fff;
+  --color-sf-secondary-badge-bg-color: #fff;
+  --color-sf-secondary-badge-bg-color-focus: #fff;
+  --color-sf-skeleton-bg-color: #e6e6e6;
+  --color-sf-tab-selected-bg-color-disabled: #0f6ebd;
+  --color-sf-tab-selected-text-color-disabled: #bdbdbd;
+  --color-sf-ribbon-border-color: #00000000;
+  --color-sf-toolbar-icon-color: #0f6cbd;
+  --color-sf-contextual-text: #616161;
+  --color-sf-cell-selection-bg-color: #ebf3fc;
+  --color-sf-document-editor-border-color: #00000000;
 }
 
 .e-dark-mode {
@@ -326,8 +362,8 @@
   --color-sf-content-bg-color-pressed: var(--color-sf-content-bg-color-alt2);
   --color-sf-content-bg-color-focus: var(--color-sf-content-bg-color-hover);
   --color-sf-content-bg-color-selected: #2e2e2e;
-  --color-sf-content-bg-color-dragged: #082338;
-  --color-sf-content-bg-color-disabled: transparent;
+  --color-sf-content-bg-color-dragged: #08233b;
+  --color-sf-content-bg-color-disabled: #141414;
   --color-sf-flyout-bg-color: var(--color-sf-content-bg-color-alt1);
   --color-sf-flyout-bg-color-hover: #3d3d3d;
   --color-sf-flyout-bg-color-pressed: var(--color-sf-black);
@@ -370,7 +406,7 @@
   --color-sf-border-focus: var(--color-sf-border);
   --color-sf-border-selected: #6b6b6b;
   --color-sf-border-dragged: var(--color-sf-primary);
-  --color-sf-border-disabled: #424242;
+  --color-sf-border-disabled: #08233b;
   --color-sf-border-warning: #bc4b09;
   --color-sf-border-error: #dc626d;
   --color-sf-border-success: #9fd89f;
@@ -616,6 +652,42 @@
   --color-sf-msg-warning-close-icon-color-alt1: var(--color-sf-msg-warning-close-icon-color-alt1);
   --color-sf-msg-warning-close-icon-color-alt2: #fff;
   --color-sf-shadow-color: #fff;
+  --color-sf-shadow-color1: #000;
+  --color-sf-link-button: var(--color-sf-primary);
+  --color-sf-link-button-hover: #0f6cbd;
+  --color-sf-link-button-pressed: #115ea3;
+  --color-sf-link-button-focus: #115ea3;
+  --color-sf-link-button-border-focus: #fff;
+  --color-sf-chip-bg-color: #141414;
+  --color-sf-chip-border-color: rgba(0, 0, 0, 0);
+  --color-sf-chip-bg-disabled: #141414;
+  --color-sf-chip-border-disabled: rgba(0, 0, 0, 0);
+  --color-sf-secondary-outline-button-text-color-hover: #fff;
+  --color-sf-secondary-outline-button-text-color-pressed: #fff;
+  --color-sf-secondary-outline-button-text-color-selected: #fff;
+  --color-sf-secondary-outline-button-text-color-focus: #fff;
+  --color-sf-slider-shadow1: #000;
+  --color-sf-slider-shadow2: #666666;
+  --color-sf-slider-disabled: #666666;
+  --color-sf-slider-border-color: rgba(255, 255, 255, 0);
+  --color-sf-slider-bg-disabled: #525252;
+  --color-sf-toggle-switch-border-disabled: #141414;
+  --color-sf-calendar-icon-color: #1153a3;
+  --color-sf-calendar-header-text-color-pressed: #62abf5;
+  --color-sf-calendar-today-bg-color: #1153a3;
+  --color-sf-dialog-border: #1f1f1f;
+  --color-sf-badge-light-bg-color: #333333;
+  --color-sf-secondary-badge-border-color: #292929;
+  --color-sf-secondary-badge-bg-color: #292929;
+  --color-sf-secondary-badge-bg-color-focus: #292929;
+  --color-sf-skeleton-bg-color: #575757;
+  --color-sf-tab-selected-bg-color-disabled: #115ea3;
+  --color-sf-tab-selected-text-color-disabled: #a3a3a3;
+  --color-sf-ribbon-border-color: #00000000;
+  --color-sf-toolbar-icon-color: #479ef5;
+  --color-sf-contextual-text: #fff;
+  --color-sf-cell-selection-bg-color: #08233b;
+  --color-sf-document-editor-border-color: #00000000;
 }
 
 .e-high-contrast {
@@ -632,8 +704,8 @@
   --color-sf-content-bg-color-pressed: var(--color-sf-content-bg-color-hover);
   --color-sf-content-bg-color-focus: var(--color-sf-content-bg-color-hover);
   --color-sf-content-bg-color-selected: var(--color-sf-content-bg-color-hover);
-  --color-sf-content-bg-color-dragged: var(--color-sf-black);
-  --color-sf-content-bg-color-disabled: #3ff23f;
+  --color-sf-content-bg-color-dragged: #fff;
+  --color-sf-content-bg-color-disabled: #000000;
   --color-sf-flyout-bg-color: var(--color-sf-black);
   --color-sf-flyout-bg-color-hover: var(--color-sf-content-bg-color-hover);
   --color-sf-flyout-bg-color-pressed: var(--color-sf-content-bg-color-hover);
@@ -651,7 +723,7 @@
   --color-sf-content-text-color-pressed: var(--color-sf-content-text-color-hover);
   --color-sf-content-text-color-focus: var(--color-sf-content-text-color-hover);
   --color-sf-content-text-color-selected: var(--color-sf-content-text-color-hover);
-  --color-sf-content-text-color-dragged: var(--color-sf-content-text-color);
+  --color-sf-content-text-color-dragged: #000;
   --color-sf-content-text-color-disabled: var(--color-sf-content-bg-color-disabled);
   --color-sf-placeholder-text-color: var(--color-sf-content-text-color);
   --color-sf-flyout-text-color: var(--color-sf-content-text-color);
@@ -676,7 +748,7 @@
   --color-sf-border-focus: var(--color-sf-border-hover);
   --color-sf-border-selected: var(--color-sf-border-hover);
   --color-sf-border-dragged: var(--color-sf-border-light);
-  --color-sf-border-disabled: #3ff23f;
+  --color-sf-border-disabled: #fff;
   --color-sf-border-warning: #f7630c;
   --color-sf-border-error: #c50f1f;
   --color-sf-border-success: #107c10;
@@ -922,6 +994,42 @@
   --color-sf-msg-warning-close-icon-color-alt1: var(--color-sf-msg-warning-border-color-alt11);
   --color-sf-msg-warning-close-icon-color-alt2: var(--color-sf-msg-warning-bg-color);
   --color-sf-shadow-color: #fff;
+  --color-sf-shadow-color1: #1aebff;
+  --color-sf-link-button: #fff000;
+  --color-sf-link-button-hover: #fff000;
+  --color-sf-link-button-pressed: #fff000;
+  --color-sf-link-button-focus: #fff000;
+  --color-sf-link-button-border-focus: #1aebff;
+  --color-sf-chip-bg-color: #000;
+  --color-sf-chip-border-color: #fff;
+  --color-sf-chip-bg-disabled: #000;
+  --color-sf-chip-border-disabled: #3ff23f;
+  --color-sf-secondary-outline-button-text-color-hover: #fff;
+  --color-sf-secondary-outline-button-text-color-pressed: #fff;
+  --color-sf-secondary-outline-button-text-color-selected: #fff;
+  --color-sf-secondary-outline-button-text-color-focus: #fff;
+  --color-sf-slider-shadow1: #000;
+  --color-sf-slider-shadow2: #fff;
+  --color-sf-slider-disabled: #3ff23f;
+  --color-sf-slider-border-color: #fff;
+  --color-sf-slider-bg-disabled: #000;
+  --color-sf-toggle-switch-border-disabled: #3ff23f;
+  --color-sf-calendar-icon-color: #000;
+  --color-sf-calendar-header-text-color-pressed: #000;
+  --color-sf-calendar-today-bg-color: #fff;
+  --color-sf-dialog-border: #fff;
+  --color-sf-badge-light-bg-color: #000;
+  --color-sf-secondary-badge-border-color: #fff;
+  --color-sf-secondary-badge-bg-color: #000;
+  --color-sf-secondary-badge-bg-color-focus: #fff;
+  --color-sf-skeleton-bg-color: #ffffff;
+  --color-sf-tab-selected-bg-color-disabled: #000;
+  --color-sf-tab-selected-text-color-disabled: #3ff23f;
+  --color-sf-ribbon-border-color: #fff;
+  --color-sf-toolbar-icon-color: #000;
+  --color-sf-contextual-text: #000;
+  --color-sf-cell-selection-bg-color: #1aecff1f;
+  --color-sf-document-editor-border-color: #fff;
 }
 
 /*! PdfViewer's default definitions and variables */
@@ -2256,7 +2364,7 @@ input.e-pv-input-password::-ms-reveal {
 .e-pv-sidebar-title-container {
   background: var(--color-sf-content-bg-color-alt1);
   border: 1px solid var(--color-sf-border-light);
-  border-width: 0 0 0 0;
+  border-width: 0 1px 0 0;
   height: 40px;
   position: absolute;
   top: 0;
@@ -2674,7 +2782,7 @@ input.e-pv-input-password::-ms-reveal {
   bottom: 0;
   height: calc(100% - 38px);
   position: absolute;
-  width: 0;
+  width: 1px;
   z-index: 104;
 }
 
@@ -2770,7 +2878,7 @@ input.e-pv-input-password::-ms-reveal {
 .e-pv-bookmark-view {
   height: 100%;
   overflow: auto;
-  padding-top: 15px;
+  padding-top: 0;
   position: relative;
 }
 
@@ -3083,6 +3191,8 @@ div > .e-pv-bookmark-icon.e-pv-icon {
   border-bottom: 2px solid;
   margin-top: 0;
   padding-top: 5px;
+  margin-top: -4px;
+  padding-top: 0;
   vertical-align: initial;
 }
 
@@ -3096,6 +3206,7 @@ div > .e-pv-bookmark-icon.e-pv-icon {
 .e-pv-properties-color-container-style-prop .e-btn-icon.e-pv-annotation-thickness-icon.e-pv-icon {
   margin-top: 0;
   padding-top: 7px;
+  padding-top: 0;
   vertical-align: initial;
 }
 
@@ -3107,7 +3218,6 @@ div > .e-pv-bookmark-icon.e-pv-icon {
 .e-pv-annotation-opacity-popup-container,
 .e-pv-annotation-thickness-popup-container {
   background-color: #fff;
-  box-shadow: 0 3px 8px 0 var(--color-sf-content-bg-color-hover);
   color: var(--color-sf-content-text-color);
   height: auto;
   min-height: 48px;
@@ -3441,6 +3551,16 @@ div > .e-pv-bookmark-icon.e-pv-icon {
   height: 24px;
 }
 
+.e-bigger .e-pv-scale-ratio-src-input-container,
+.e-bigger .e-pv-scale-ratio-src-unit-container,
+.e-bigger .e-pv-scale-ratio-dest-input-container,
+.e-bigger .e-pv-scale-ratio-dest-unit-container,
+.e-bigger .e-pv-depth-input-container,
+.e-bigger .e-pv-depth-unit-container {
+  float: left;
+  height: 40px;
+}
+
 .e-pv-scale-ratio-src-input-container,
 .e-pv-scale-ratio-src-unit-container,
 .e-pv-scale-ratio-dest-input-container,
@@ -3457,18 +3577,24 @@ div > .e-pv-bookmark-icon.e-pv-icon {
 .e-pv-scale-ratio-src-unit.e-btn,
 .e-pv-scale-ratio-dest-unit.e-btn,
 .e-pv-depth-unit.e-btn {
-  padding: 6px 8px 4px;
+  padding: 4px 8px 4px;
+  height: 32px;
 }
 
 .e-pv-scale-unit-content {
   float: left;
   width: 33px;
+  width: 8px;
+  height: 20px;
+  font-weight: normal;
+  line-height: 20px;
 }
 
 .e-pv-scale-ratio-src-unit .e-caret,
 .e-pv-scale-ratio-dest-unit .e-caret,
 .e-pv-depth-unit .e-caret {
   margin-left: 96px;
+  margin-top: 4px;
 }
 
 .e-pv-properties-line-opacity {
@@ -3537,6 +3663,12 @@ div > .e-pv-bookmark-icon.e-pv-icon {
   width: 180px;
 }
 
+.e-bigger .e-pv-scale-ratio-src-unit,
+.e-bigger .e-pv-scale-ratio-dest-unit,
+.e-bigger .e-pv-depth-unit {
+  height: 40px !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-pv-line-styles-container {
   line-height: 0;
   padding: 17px;
@@ -3601,7 +3733,7 @@ div > .e-pv-bookmark-icon.e-pv-icon {
 .e-pv-annotation-shapes-container.e-btn.e-icon-btn,
 .e-pv-annotation-calibrate-container.e-btn.e-icon-btn,
 .e-pv-annotation-handwritten-container.e-btn.e-icon-btn {
-  padding: 0 4px 3px;
+  padding: 1.5px 4px 3px;
 }
 
 .e-pv-stamp-template-container .e-menu-item.e-menu-caret-icon {
@@ -3687,14 +3819,6 @@ div > .e-pv-bookmark-icon.e-pv-icon {
   padding: 8px !important; /* stylelint-disable-line declaration-no-important */
 }
 
-.e-pv-organize-toolbar-apperance .e-toolbar-items .e-toolbar-center {
-  margin-left: 710px !important; /* stylelint-disable-line declaration-no-important */
-}
-
-.e-bigger .e-pv-organize-toolbar-apperance .e-toolbar-items .e-toolbar-center {
-  margin-left: 109px !important; /* stylelint-disable-line declaration-no-important */
-}
-
 .e-bigger .e-toolbar.e-pv-toolbar .e-toolbar-items.e-tbar-pos .e-toolbar-left,
 .e-bigger .e-toolbar.e-pv-toolbar .e-toolbar-items.e-tbar-pos .e-toolbar-right {
   top: 0;
@@ -4406,7 +4530,7 @@ div > .e-pv-bookmark-icon.e-pv-icon.e-right {
 .e-pv-left-align-icon-div,
 .e-pv-center-align-icon-div,
 .e-pv-right-align-icon-div {
-  padding: 6px 8px;
+  padding: 3px 10px;
 }
 
 .e-pv-bold-icon-div:hover,
@@ -4448,7 +4572,7 @@ div > .e-pv-bookmark-icon.e-pv-icon.e-right {
 .e-pv-formfield-strokethickness-icon {
   background: var(--color-sf-content-bg-color-alt1);
   border-radius: 2px;
-  height: 44px;
+  height: 32px;
   margin-top: 8px;
   width: 54px;
   width: 59px;
@@ -4460,7 +4584,6 @@ div > .e-pv-bookmark-icon.e-pv-icon.e-right {
 }
 
 .e-pv-properties-font-family-container {
-  margin-right: 15px;
   width: 165px;
 }
 
@@ -4481,6 +4604,7 @@ div > .e-pv-bookmark-icon.e-pv-icon.e-right {
 .e-pv-center-align-icon-div,
 .e-pv-right-align-icon-div {
   padding-left: 6px;
+  padding-left: 13px;
 }
 
 .e-pv-properties-font-color-container,
@@ -4508,6 +4632,7 @@ div > .e-pv-bookmark-icon.e-pv-icon.e-right {
   width: 49px;
   border-radius: 4px;
   width: 65px;
+  padding: 1px 11px !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-pv-properties-formfield-maxlength-text-label,
@@ -4677,21 +4802,28 @@ div > .e-pv-bookmark-icon.e-pv-icon.e-right {
 
 .e-pv-properties-form-field-font-style {
   background: var(--color-sf-content-bg-color-alt1);
-  border-radius: 2px;
+  border-radius: 4px;
   display: -ms-flexbox;
   display: flex;
-  height: 36px;
+  height: 32px;
+  border: 1px solid var(--color-sf-border);
   -ms-flex-pack: space-evenly;
       justify-content: space-evenly;
   width: 154px;
 }
 
+.e-pv-properties-form-field-font-style .e-control:not(.e-pv-strikeout-icon-div),
+.e-pv-properties-form-field-font-align .e-control:not(.e-pv-right-align-icon-div) {
+  border-right: 1px solid var(--color-sf-border);
+}
+
 .e-pv-properties-form-field-font-align {
   background: var(--color-sf-content-bg-color-alt1);
-  border-radius: 2px;
+  border-radius: 4px;
   display: -ms-flexbox;
   display: flex;
-  height: 36px;
+  border: 1px solid var(--color-sf-border);
+  height: 32px;
   -ms-flex-pack: space-evenly;
       justify-content: space-evenly;
   margin-right: 15px;