MID-9094, MID-9095: fixed width issues with long strings / Stylesheet…

… update
Evolveum · Sep 25, 2023 · a1cbcd6 · a1cbcd6
1 parent f426a7c
commit a1cbcd6
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 14 deletions.
diff --git a/gui/admin-gui/src/frontend/js/midpoint-theme.js b/gui/admin-gui/src/frontend/js/midpoint-theme.js
@@ -159,19 +159,18 @@ export default class MidPointTheme {
 
     breakLongerTextInTableCell(cellId) {
         $("#" + cellId).css("word-break", function (index, origValue) {
-            var textOfColumn = document.getElementById(cellId).innerText;
-            if (textOfColumn != '' && textOfColumn != ' ') {
-                var numberOfChars = 15;
-                var controlValue = numberOfChars;
-                var indexOfSpace = textOfColumn.indexOf(' ');
-
-                while (indexOfSpace == (controlValue - numberOfChars)) {
-                    controlValue = controlValue + 1 + indexOfSpace;
-                    indexOfSpace = textOfColumn.indexOf(' ', (indexOfSpace + 1));
-                }
+            var textOfColumn = document.getElementById(cellId).innerText.trim();
+            var permittedChars = "@" //Just add other permitted chars to string if needed
+            if (textOfColumn != '' && textOfColumn != ' ' && !Array.from(permittedChars).some(char => textOfColumn.includes(char)))
+            {
+                var numberOfChars = 16;
+
+                if (textOfColumn.length >= numberOfChars) {
+                    var indexOfSpace = textOfColumn.indexOf(' ');
 
-                if (indexOfSpace + 1 != textOfColumn.length && textOfColumn.length > controlValue) {
-                    return "break-word";
+                    if (indexOfSpace === -1 || indexOfSpace >= numberOfChars) {
+                        return "break-all";
+                    }
                 }
             }
             return "inherit";
@@ -470,7 +469,7 @@ export default class MidPointTheme {
             if (!popup.is(':visible')) {
                 var position = ref.position();
 
-                var left = position.left + (ref.outerWidth() - popup.outerWidth()) / 2;// - paddingRight;
+                var left = position.left + (ref.outerWidth() - popup.outerWidth() - 9) / 2;// - paddingRight;
                 var top = position.top + ref.outerHeight();
 
                 var offsetLeft = ref.offset().left - position.left;

diff --git a/gui/admin-gui/src/frontend/scss/midpoint-utils.scss b/gui/admin-gui/src/frontend/scss/midpoint-utils.scss
@@ -88,3 +88,7 @@
   height: auto !important;
   position: absolute;
 }
+
+.lh-n {
+  line-height: normal!important;
+}
diff --git a/gui/admin-gui/src/frontend/scss/midpoint.scss b/gui/admin-gui/src/frontend/scss/midpoint.scss
@@ -1280,7 +1280,7 @@ td .prism-property-value {
 
 @include bg-variant(".search-item", $gray-300, true);
 
-// deprecated, uses should be replaced by "d-flex gap-1 pl-1 bg-light rounded-sm align-items-center"
+// deprecated, uses should be replaced by "d-flex gap-1 px-2 bg-light rounded-sm align-items-center"
 .search-item {
   display: flex;
   gap: 0.25em;
@@ -1297,6 +1297,12 @@ td .prism-property-value {
   }
 }
 
+.search-item-field {
+  .search-item-controls a > i {
+    font-size: 0.8rem;
+  }
+}
+
 .metadata div.prism-container {
   // Removing the "top horizontal line" above metadata label and icon.
   // HACK We should rather re-structure the code and provide custom css class.
@@ -1578,6 +1584,7 @@ fieldset.objectButtons {
   flex-direction: row;
   align-items: stretch;
   background-color: $white;
+  border-radius: 0.25rem;
   overflow: hidden;
   box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2);
 }