@syncfusion/ej2-pdfviewer 17.3.57-4568 → 17.3.58-4568

package/styles/pdfviewer/_material-dark-definition.scss

@@ -148,7 +148,7 @@ $pv-sidebar-container-bottom: 0 !default;
 $pv-sidebar-container-width: 250px !default;
 $pv-sidebar-container-z-index: 100 !default;
 $pv-sidebar-container-background: $grey-900 !default;
-$pv-sidebar-container-border-top:  1px solid $grey-700 !default;
+$pv-sidebar-container-border-top: 1px solid $grey-700 !default;
 $pv-main-container-width: 100% !default;
 $pv-main-container-height: 100% !default;
 $pv-main-container-position: relative !default;
@@ -164,7 +164,7 @@ $pv-sidebar-content-container-display: none !default;
 $pv-sidebar-content-container-height: calc(100% - 56px) !default;
 $pv-sidebar-content-container-width: 202px !default;
 $pv-sidebar-content-container-float: left !default;
-$pv-sidebar-content-container-border-top:  1px solid $grey-700 !default;
+$pv-sidebar-content-container-border-top: 1px solid $grey-700 !default;
 $pv-sidebar-title-container-border-width: 0 0 0 0 !default;
 $pv-sidebar-title-container-width: 202px !default;
 $pv-sidebar-title-container-position: $pv-page-div-position !default;
@@ -187,8 +187,8 @@ $pv-sidebar-toolbar-height: calc(100% - 57px) !default;
 $pv-sidebar-toolbar-bottom: 0 !default;
 $pv-sidebar-toolbar-background: $grey-900 !default;
 $pv-sidebar-toolbar-position: $pv-page-div-position !default;
-$pv-sidebar-toolbar-border:  1px solid $grey-700 !default;
-$pv-sidebar-toolbar-border-width:  1px 0 1px 1px !default;
+$pv-sidebar-toolbar-border: 1px solid $grey-700 !default;
+$pv-sidebar-toolbar-border-width: 1px 0 1px 1px !default;
 $pv-sidebar-content-top: 48px !default;
 $pv-sidebar-content-bottom: 0 !default;
 $pv-sidebar-content-overflow: auto !default;
@@ -283,9 +283,11 @@ $pv-thumbnail-hover-cursor: pointer !default;
 $pv-thumbnail-hover-border: 3px solid $grey-600 !default;
 $pv-thumbnail-hover-box-shadow: 0 0 3px 0 rgba($shadow, .25) !default;
 $pv-thumbnail-focus-border-radius: 2px !default;
+$pv-organize-page-select-border-radius: 2px !default;
 $pv-thumbnail-focus-cursor: pointer !default;
 $pv-thumbnail-focus-padding: 0 !default;
 $pv-thumbnail-focus-border: 6px solid rgba($grey-dark-font, .3) !default;
+$pv-organize-page-select-border: 6px solid rgba($accent, .7) !default;
 $pv-thumbnail-focus-box-shadow: 0 0 4px 0 rgba($shadow, .25) !default;
 $pv-thumbnail-selection-border-radius: 2px !default;
 $pv-thumbnail-selection-cursor: pointer !default;
@@ -358,7 +360,7 @@ $pv-text-selection-opacity: .6 !default;
 $pv-selection-touch-element-background-color: #3088ed !default;
 $pv-selection-touch-element-border-color: #3088ed !default;
 $pv-icon-padding-top: 7px !default;
-$pv-sidebar-toolbar-border-top:  1px solid #e0e0e0 !default;
+$pv-sidebar-toolbar-border-top: 1px solid #e0e0e0 !default;
 $pv-material-line-background: none !default;
 $pv-toolbar-btn-padding: 0 1.5px !default;
 $pv-toolbar-btn-line-height: 25px !default;
@@ -420,7 +422,7 @@ $pv-annotation-note-border-bottom-color: #000 !default;
 $pv-annotation-note-popup-bg-color: #fff !default;
 $pv-print-overlay-bg-color: rgba($pv-print-popup-container-background-color, $pv-print-popup-container-opacity) !default;
 $pv-comment-font-color: rgba(255, 255, 255, .9) !default;
-$pv-comment-text-color:  rgba(255, 255, 255, .6) !default;
+$pv-comment-text-color: rgba(255, 255, 255, .6) !default;
 $pv-comment-color: rgba(255, 128, 171, .9) !default;
 $pv-comment-panel-bg: #212121 !default;
 $pv-comment-panel-bottom-color: rgba(255, 128, 171, .6) !default;
@@ -536,3 +538,7 @@ $pv-eye-icon-font-size: 18px !default;
 $pv-eye-icon-padding: 7px !default;
 $pv-eye-icon-hover-cursor: pointer !default;
 $pv-eye-icon-margin-top: 3px !default;
+$pv-organize-anchor-node-border-width: 6px !default;
+$pv-organize-anchor-node-border: $pv-organize-anchor-node-border-width solid $grey-700 !default;
+$pv-organize-image-border: 1px solid $grey-700 !default;
+$pv-default-tile-icon-size: 25px !default;

package/styles/pdfviewer/_material-definition.scss

@@ -148,7 +148,7 @@ $pv-sidebar-container-bottom: 0 !default;
 $pv-sidebar-container-width: 250px !default;
 $pv-sidebar-container-z-index: 100 !default;
 $pv-sidebar-container-background: $grey-50 !default;
-$pv-sidebar-container-border-top:  1px solid $grey-300 !default;
+$pv-sidebar-container-border-top: 1px solid $grey-300 !default;
 $pv-main-container-width: 100% !default;
 $pv-main-container-height: 100% !default;
 $pv-main-container-position: relative !default;
@@ -164,7 +164,7 @@ $pv-sidebar-content-container-display: none !default;
 $pv-sidebar-content-container-height: calc(100% - 56px) !default;
 $pv-sidebar-content-container-width: 202px !default;
 $pv-sidebar-content-container-float: left !default;
-$pv-sidebar-content-container-border-top:  1px solid $grey-300 !default;
+$pv-sidebar-content-container-border-top: 1px solid $grey-300 !default;
 $pv-sidebar-title-container-border-width: 0 0 0 0 !default;
 $pv-sidebar-title-container-width: 202px !default;
 $pv-sidebar-title-container-position: $pv-page-div-position !default;
@@ -187,8 +187,8 @@ $pv-sidebar-toolbar-height: calc(100% - 57px) !default;
 $pv-sidebar-toolbar-bottom: 0 !default;
 $pv-sidebar-toolbar-background: $grey-50 !default;
 $pv-sidebar-toolbar-position: $pv-page-div-position !default;
-$pv-sidebar-toolbar-border:  1px solid $grey-300 !default;
-$pv-sidebar-toolbar-border-width:  1px 0 1px 1px !default;
+$pv-sidebar-toolbar-border: 1px solid $grey-300 !default;
+$pv-sidebar-toolbar-border-width: 1px 0 1px 1px !default;
 $pv-sidebar-content-top: 48px !default;
 $pv-sidebar-content-bottom: 0 !default;
 $pv-sidebar-content-overflow: auto !default;
@@ -283,9 +283,11 @@ $pv-thumbnail-hover-cursor: pointer !default;
 $pv-thumbnail-hover-border: 1px solid $grey-400 !default;
 $pv-thumbnail-hover-box-shadow: 0 0 3px 0 rgba($shadow, .25) !default;
 $pv-thumbnail-focus-border-radius: 2px !default;
+$pv-organize-page-select-border-radius: 2px !default;
 $pv-thumbnail-focus-cursor: pointer !default;
 $pv-thumbnail-focus-padding: 0 !default;
 $pv-thumbnail-focus-border: 6px solid rgba($grey-black, .3) !default;
+$pv-organize-page-select-border: 6px solid rgba($accent, .7) !default;
 $pv-thumbnail-focus-box-shadow: 0 0 4px 0 rgba($shadow, .25) !default;
 $pv-thumbnail-selection-border-radius: 2px !default;
 $pv-thumbnail-selection-cursor: pointer !default;
@@ -358,7 +360,7 @@ $pv-text-selection-opacity: .6 !default;
 $pv-selection-touch-element-background-color: #3088ed !default;
 $pv-selection-touch-element-border-color: #3088ed !default;
 $pv-icon-padding-top: 7px !default;
-$pv-sidebar-toolbar-border-top:  1px solid #e0e0e0 !default;
+$pv-sidebar-toolbar-border-top: 1px solid #e0e0e0 !default;
 $pv-material-line-background: none !default;
 $pv-toolbar-btn-padding: 0 1.5px !default;
 $pv-toolbar-btn-line-height: 25px !default;
@@ -534,3 +536,7 @@ $pv-eye-icon-padding: 7px !default;
 $pv-eye-icon-hover-cursor: pointer !default;
 $pv-eye-icon-opacity: .87 !default;
 $pv-eye-icon-margin-top: 3px !default;
+$pv-organize-anchor-node-border-width: 6px !default;
+$pv-organize-anchor-node-border: $pv-organize-anchor-node-border-width solid $grey-300 !default;
+$pv-organize-image-border: 1px solid $grey-300 !default;
+$pv-default-tile-icon-size: 25px !default;

package/styles/pdfviewer/_material3-definition.scss

@@ -287,9 +287,11 @@ $pv-thumbnail-hover-cursor: pointer !default;
 $pv-thumbnail-hover-border: 1px solid $border-dark !default;
 $pv-thumbnail-hover-box-shadow: $shadow-sm !default;
 $pv-thumbnail-focus-border-radius: 0 !default;
+$pv-organize-page-select-border-radius: 0 !default;
 $pv-thumbnail-focus-cursor: pointer !default;
 $pv-thumbnail-focus-padding: 0 !default;
 $pv-thumbnail-focus-border: 2px solid rgba($primary) !default;
+$pv-organize-page-select-border: 2px solid rgba($primary) !default;
 $pv-thumbnail-focus-box-shadow: $shadow-sm !default;
 $pv-thumbnail-selection-border-radius: 0 !default;
 $pv-thumbnail-selection-cursor: pointer !default;
@@ -367,7 +369,7 @@ $pv-toolbar-btn-padding: 0 1.5px !default;
 $pv-toolbar-btn-line-height: 25px !default;
 $pv-toolbaritem-btn-line-height: 26px !default;
 $pv-toolbaritem-btn-min-height: 26px !default;
-$pv-toolbar-btn-margin: 4px 0 !default;
+$pv-toolbar-btn-margin: 0 !default;
 $pv-mobile-page-box-padding-top: 4px !default;
 $pv-zoom-dropdown-width-mobile: 93px !default;
 $pv-mobile-page-box-padding-left-focus: 0 !default;
@@ -540,3 +542,7 @@ $pv-sidebar-toolbar-width-big: 48px !default;
 $pv-search-input-height-big: 32px !default;
 $pv-search-btn-height-big: 32px !default;
 $pv-search-btn-width-big: 32px !default;
+$pv-organize-anchor-node-border-width: 2px !default;
+$pv-organize-anchor-node-border: $pv-organize-anchor-node-border-width solid rgba($border-light) !default;
+$pv-organize-image-border: 1px solid rgba($border-light) !default;
+$pv-default-tile-icon-size: 25px !default;

package/styles/pdfviewer/_tailwind-definition.scss

@@ -220,6 +220,7 @@ $pv-thumbnail-hover-border-radius: 2px !default;
 $pv-thumbnail-hover-padding: 2px !default;
 $pv-thumbnail-hover-cursor: pointer !default;
 $pv-thumbnail-focus-border-radius: 2px !default;
+$pv-organize-page-select-border-radius: 2px !default;
 $pv-thumbnail-focus-cursor: pointer !default;
 $pv-thumbnail-focus-padding: 0 !default;
 $pv-thumbnail-selection-border-radius: 0 !default;
@@ -284,7 +285,7 @@ $pv-toolbar-btn-padding: 0 1.5px !default;
 $pv-toolbar-btn-line-height: 25px !default;
 $pv-toolbaritem-btn-line-height: 26px !default;
 $pv-toolbaritem-btn-min-height: 26px !default;
-$pv-toolbar-btn-margin: 4px 0 !default;
+$pv-toolbar-btn-margin: 0 !default;
 $pv-mobile-page-box-padding-top: 4px !default;
 $pv-zoom-dropdown-width-mobile: 93px !default;
 $pv-mobile-page-box-padding-left-focus: 0 !default;
@@ -458,6 +459,7 @@ $pv-thumbnail-image-background-color: $white !default;
 $pv-thumbnail-hover-border: 1px solid $border-dark !default;
 $pv-thumbnail-hover-box-shadow: $shadow-md !default;
 $pv-thumbnail-focus-border: 2px solid $primary !default;
+$pv-organize-page-select-border: 2px solid $primary !default;
 $pv-thumbnail-focus-box-shadow: $shadow-sm !default;
 $pv-thumbnail-selection-border: 2px solid $primary !default;
 $pv-thumbnail-selection-box-shadow: $shadow-sm !default;
@@ -539,5 +541,9 @@ $pv-eye-icon-font-size: 18px !default;
 $pv-eye-icon-padding: 7px !default;
 $pv-eye-icon-hover-cursor: pointer !default;
 $pv-eye-icon-margin-top: 3px !default;
+$pv-organize-anchor-node-border-width: 2px !default;
+$pv-organize-anchor-node-border: $pv-organize-anchor-node-border-width solid $border-light !default;
+$pv-organize-image-border: 1px solid $border-light !default;
+$pv-default-tile-icon-size: 25px !default;
 
 //end color definition

package/styles/pdfviewer/_theme.scss

@@ -1,4 +1,46 @@
-@include export-module('pdfviewer-theme') {
+@use 'sass:math';
+$sm-mobile: 575.98;
+$mobile: 767.98;
+$tablet: 991.98;
+$desktop: 1199.98;
+$lg-desktop: 1399.98;
+
+// Small mobiles (landscape phones, less than 576px)
+@mixin sm-mobile() {
+  @media only screen and (max-width: ($sm-mobile * 1px)) {
+    @content;
+  }
+}
+
+// Small devices (landscape phones, less than 768px)
+@mixin mobile {
+  @media only screen and (max-width: ($mobile * 1px)) {
+    @content;
+  }
+}
+
+// Medium devices (tablets, less than 992px)
+@mixin tablet {
+  @media only screen and (max-width: ($tablet * 1px)) {
+    @content;
+  }
+}
+
+// Large devices (desktops, less than 1200px)
+@mixin desktop {
+  @media only screen and (max-width: ($desktop * 1px)) {
+    @content;
+  }
+}
+
+// X-Large devices (large desktops, less than 1400px)
+@mixin lg-desktop {
+  @media only screen and (max-width: ($lg-desktop * 1px)) {
+    @content;
+  }
+}
+
+@include export-module('pdfviewer-theme') {
   /* stylelint-disable value-no-vendor-prefix */
   /* stylelint-disable property-no-vendor-prefix */
   .e-pv-viewer-container {
@@ -249,6 +291,15 @@
     }
   }
 
+  .e-pv-image-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 3px;
+  }
+
   .e-pv-gotopage-apply-btn.e-btn.e-flat.e-primary:disabled {
     @if $skin-name != 'bootstrap4' {
       background-color: transparent;
@@ -731,6 +782,10 @@
     }
   }
 
+  .e-dialog .e-dlg-header {
+    width: auto;
+  }
+
   .e-pv-current-page-box.e-input-group.e-control-wrapper input.e-input {
     max-height: $pv-current-page-height;
     padding-bottom: $pv-current-page-padding-bottom;
@@ -1016,7 +1071,8 @@
     }
   }
 
-  .e-pv-thumbnail-view-button.e-btn {
+  .e-pv-thumbnail-view-button.e-btn,
+  .e-pv-organize-view-button.e-btn {
     background: $pv-thumbnail-view-button-background;
     border: $pv-thumbnail-view-button-border;
     border-radius: $pv-thumbnail-border-radius;
@@ -1040,7 +1096,241 @@
     }
   }
 
-  .e-bigger .e-pv-thumbnail-view-button.e-btn {
+  .e-pv-organize-tile.e-pv-thumbnail-column {
+    width: 100%;
+    height: 100%;
+  }
+
+  .e-pv-organize-content-apperance{
+    overflow: hidden;
+  }
+  .e-pv-organize-tile-view.e-pv-thumbnail-row {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    overflow: auto;
+    overflow-x: hidden;
+  }
+
+  .e-pv-organize-anchor-node {
+    border: $pv-organize-anchor-node-border;
+    margin: 24px;
+    width: 140px;
+    height: 140px;
+    
+    @include lg-desktop {
+      width: 140px;
+      height: 140px;
+    }
+
+    @include desktop {
+      width: 140px;
+      height: 140px;
+    }
+
+    @include tablet {
+      width: 140px;
+      height: 140px;
+    }
+
+    @include mobile {
+      width: 140px;
+      height: 140px;
+      min-width: 140px;
+      min-height: 140px;
+    }
+
+    @include sm-mobile {
+      width: 140px;
+      height: 140px;
+      min-width: 140px;
+      min-height: 140px;
+      margin: 24px 20px;
+    }
+  }
+
+  .e-pdfviewer .e-pv-organize-tile.e-pv-thumbnail-column .e-checkbox-wrapper {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    top: -100%;
+    padding: 4px;
+  }
+
+  @media screen and (max-width: 480px) {
+    .e-pdfviewer .e-pv-organize-tile.e-pv-thumbnail-column .e-checkbox-wrapper {
+      width: 100%;
+      height: 100%;
+      position: relative;
+      top: -100%;
+      padding: 4px;
+    }
+  }
+
+  .e-pv-organize-buttondiv {
+    justify-content: center;
+    flex-wrap: nowrap;
+    position: relative;
+    text-align: center;
+    top: calc(-100% - 12px + ($pv-organize-anchor-node-border-width / 2));
+  }
+
+  .e-pv-organize-anchor-node.e-pv-organize-node-selection-ring {
+    border: $pv-organize-page-select-border;
+    border-radius: 2px;
+  }
+
+  @media screen and (max-width: 480px) {
+    .e-pv-organize-anchor-node.e-pv-organize-node-selection-ring {
+      border: $pv-organize-page-select-border;
+      border-radius: 2px;
+    }
+  }
+
+  .e-pv-organize-window {
+    border: $pv-organize-image-border;
+    border-radius: 0;
+  }
+
+  .e-pdfviewer .e-pv-organize-window .e-footer-content {
+    border-top: $pv-organize-image-border;
+    padding: 15px;
+  }
+  
+  .e-pdfviewer .e-pv-organize-window .e-dlg-header-content {
+    padding: 15px;
+  }
+
+  .e-pv-tile-number {
+    text-align: center;
+    margin-top: calc(($pv-default-tile-icon-size / 2) + $pv-organize-anchor-node-border-width + 2px);
+  }
+
+  .e-pv-delete-button.e-btn,
+  .e-pv-rotate-left-button.e-btn,
+  .e-pv-rotate-right-button.e-btn {
+    width: $pv-default-tile-icon-size;
+    height: $pv-default-tile-icon-size;
+    justify-content: center;
+    align-items: center;
+    margin: 0 5px;
+    padding: 0;
+  }
+
+  .e-pv-insert-left-button.e-btn {
+    width: $pv-default-tile-icon-size;
+    height: $pv-default-tile-icon-size;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    left: calc(-1 * (#{$pv-default-tile-icon-size} / 2 + #{$pv-organize-anchor-node-border-width} / 2));
+    top: calc(-140px / 2);
+    padding: 0;
+    
+    @include lg-desktop {
+      top: calc(-140px / 2);
+    }
+
+    @include desktop {
+      top: calc(-140px / 2);
+    }
+
+    @include tablet {
+      top: calc(-140px / 2);
+    }
+
+    @include mobile {
+      top: calc(-140px / 2);
+    }
+
+    @include sm-mobile {
+      top: calc(-140px / 2);
+    }
+  }
+  
+  .e-pv-insert-right-button.e-btn {
+    width: $pv-default-tile-icon-size;
+    height: $pv-default-tile-icon-size;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    right: calc(-1 * (#{$pv-default-tile-icon-size} / 2 + #{$pv-organize-anchor-node-border-width} / 2));
+    top: calc(-140px / 2);
+    padding: 0;
+
+    @include lg-desktop {
+      top: calc(-140px / 2);
+    }
+
+    @include desktop {
+      top: calc(-140px / 2);
+    }
+
+    @include tablet {
+      top: calc(-140px / 2);
+    }
+
+    @include mobile {
+      top: calc(-140px / 2);
+    }
+
+    @include sm-mobile {
+      top: calc(-140px / 2);
+    }
+  }
+  
+  .e-pv-toolbar-rotate-left-button {
+    height: 32px;
+    width: 32px;
+    padding: 0;
+    top: 7px;
+    position: relative;
+    left: 436px;
+    box-shadow: none;
+  }
+
+  .e-pv-toolbar-rotate-right-button {
+    height: 32px;
+    width: 32px;
+    padding: 0;
+    top: 7px;
+    position: relative;
+    left: 445px;
+    box-shadow: none;
+  }
+
+  .e-pdfviewer .e-pv-organize-window .e-dlg-content {
+    padding: 0;
+    overflow: hidden;
+    border-radius: 0;
+  }
+
+  .e-pv-organize-toolbar-apperance.e-toolbar {
+    width: 1172px;
+    border: $pv-organize-image-border;
+    border-width: 1px 0;
+    background: transparent !important;/* stylelint-disable-line declaration-no-important */
+
+    .e-toolbar-items.e-tbar-pos {
+      background: transparent !important;/* stylelint-disable-line declaration-no-important */
+    }
+  }
+
+  .e-pdfviewer .e-pv-organize-toolbar-apperance .e-checkbox-wrapper {
+    margin-left: 22px;
+    margin-right: 8px;
+    text-wrap: nowrap;
+  }
+
+  @media screen and (max-width: 480px) {
+    .e-pdfviewer .e-pv-organize-toolbar-apperance .e-checkbox-wrapper {
+      width: 35px;
+      margin-left: 22px;
+    }
+  }
+
+  .e-bigger .e-pv-thumbnail-view-button.e-btn,
+  .e-bigger .e-pv-organize-view-button.e-btn {
     @if $skin-name == 'bootstrap4' {
       height: $pv-thumbnail-view-button-height-big;
       margin: $pv-thumbnail-view-button-margin-big;
@@ -1236,9 +1526,8 @@
   .e-pv-thumbnail-number {
     color: $pv-sidebar-title-color;
     font-family: $pv-thumbnail-number-font-family;
-    padding-left: $pv-thumbnail-number-padding-left;
-    padding-right: $pv-thumbnail-number-padding-left;
     padding-top: $pv-thumbnail-number-padding-top;
+    text-align: center;
     @if $skin-name == 'Material3' {
       font-weight: 500;
     }
@@ -2005,6 +2294,20 @@
     }
   }
 
+  .e-pv-organize-total-page-button {
+    float: left;
+    font-size: 12;
+    font-weight: normal;
+    color: $pv-toolbar-total-page-number-color;
+  }
+
+  .e-pdfviewer .e-pv-organize-window .e-footer-content .e-btn.e-flat:disabled{
+    background-color: transparent;
+    background: transparent;
+    color: $pv-toolbar-total-page-number-color;
+    cursor: default;
+  }
+   
   .e-pv-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn,
   .e-pv-annotation-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn {
     @if $skin-name == 'FluentUI' {
@@ -2016,6 +2319,12 @@
     margin-top: -6px;
   }
 
+  .e-pv-organize-image {
+    width: calc(100% - (2 * $pv-organize-anchor-node-border-width));
+    height: calc(100% - (2 * $pv-organize-anchor-node-border-width));
+    border: $pv-organize-image-border;
+  }
+
   .e-pv-annotation-opacity-icon {
     padding-top: $pv-annotation-opacity-icon-padding-top;
   }
@@ -2977,6 +3286,7 @@
   .e-pdfviewer .e-checkbox-wrapper .e-frame + .e-label,
   .e-pdfviewer .e-css.e-checkbox-wrapper .e-frame + .e-label {
     margin-right: $pv-textsearch-textbox-margin-right;
+    font-size: 14px;
   }
 
   div > .e-pv-bookmark-icon.e-pv-icon.e-right {
@@ -3391,6 +3701,15 @@
       font-size: 12px;
       font-weight: $pv-comment-tile-font-weight;
     }
+    @if $skin-name == 'fabric' {
+      color: $pv-comments-div-focus-border;
+    }
+    @if $skin-name == 'bootstrap4' {
+      font-size: $pv-input-active-color;
+    }
+    @if $skin-name == 'bootstrap' {
+      color: $pv-sidebar-title-color;
+    }
     @if $skin-name == 'FluentUI' {
       font-weight: $pv-comment-tile-font-weight;
     }
@@ -3401,8 +3720,9 @@
       padding-bottom: 30px;
       height: 18px;
     }
-    max-width: 237px;
     position: absolute;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .e-pv-reply-title {
@@ -3415,16 +3735,26 @@
       font-size: 12px;
       font-weight: $pv-comment-tile-font-weight;
     }
+    @if $skin-name == 'fabric' {
+      color: $pv-comments-div-focus-border;
+    }
+    @if $skin-name == 'bootstrap4' {
+      font-size: $pv-input-active-color;
+    }
+    @if $skin-name == 'bootstrap' {
+      color: $pv-sidebar-title-color;
+    }
     @if $skin-name == 'FluentUI' {
       font-weight: $pv-comment-tile-font-weight;
     }
     @if $skin-name == 'Material3' {
       font-size: $text-xs;
     }
-    max-width: 212px;
     padding-left: 8px;
     padding-top: $pv-comment-title-padding-top;
     position: absolute;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .e-pv-comments-hover {