Issue #3440959 by Sandeep Sanwale, Gauravvvv, sourojeetpaul, smustgrave: Close icon is ovrlapping the title text in modal in claro

(cherry picked from commit 98b2153394)

core/themes/claro/css/base/elements.css

@@ -18,6 +18,9 @@ html {
 }
 
 body {
+  word-wrap: break-word;
+  -webkit-hyphens: auto;
+  hyphens: auto;
   color: var(--color-fg);
   background: var(--color-bg);
 }

core/themes/claro/css/base/elements.pcss.css

@@ -10,6 +10,8 @@ html {
   line-height: var(--line-height);
 }
 body {
+  word-wrap: break-word;
+  hyphens: auto;
   color: var(--color-fg);
   background: var(--color-bg);
 }

core/themes/claro/css/components/details.css

@@ -92,9 +92,6 @@ td .claro-details {
   list-style: none;
   cursor: pointer;
   transition: background-color var(--details-bg-color-transition-duration) ease-in-out;
-  word-wrap: break-word;
-  -webkit-hyphens: auto;
-  hyphens: auto;
   color: var(--color-gray-800);
   border-radius: var(--size-summary-border-radius);
   background-color: transparent;

core/themes/claro/css/components/details.pcss.css

@@ -84,8 +84,6 @@
   list-style: none;
   cursor: pointer;
   transition: background-color var(--details-bg-color-transition-duration) ease-in-out;
-  word-wrap: break-word;
-  hyphens: auto;
   color: var(--color-gray-800);
   border-radius: var(--size-summary-border-radius);
   background-color: transparent;

core/themes/claro/css/components/form--managed-file.css

@@ -41,8 +41,6 @@
 
 .form-managed-file .file {
   word-break: break-all;
-  -webkit-hyphens: auto;
-  hyphens: auto;
 }
 
 .form-managed-file .file__size {

core/themes/claro/css/components/form--managed-file.pcss.css

@@ -33,7 +33,6 @@
    */
   & .file {
     word-break: break-all;
-    hyphens: auto;
   }
   & .file__size {
     word-break: normal;

core/themes/claro/css/components/vertical-tabs.css

@@ -120,9 +120,6 @@
   padding: var(--space-s) var(--space-s) var(--space-s) calc(var(--space-l) - var(--vertical-tabs-menu-link--active-border-size));
   -webkit-text-decoration: none;
   text-decoration: none;
-  word-wrap: break-word;
-  -webkit-hyphens: auto;
-  hyphens: auto;
   color: var(--color-text);
   border: var(--vertical-tabs-border-size) solid transparent;
   border-block-width: var(--vertical-tabs-border-size);

core/themes/claro/css/components/vertical-tabs.pcss.css

@@ -103,8 +103,6 @@
   margin-block-start: calc(var(--vertical-tabs-border-size) * -1);
   padding: var(--space-s) var(--space-s) var(--space-s) calc(var(--space-l) - var(--vertical-tabs-menu-link--active-border-size));
   text-decoration: none;
-  word-wrap: break-word;
-  hyphens: auto;
   color: var(--color-text);
   border: var(--vertical-tabs-border-size) solid transparent;
   border-block-width: var(--vertical-tabs-border-size);

core/themes/claro/css/theme/media-library.css

@@ -73,9 +73,6 @@
   padding: var(--space-s) var(--space-s) var(--space-s) calc(var(--space-l) - var(--vertical-tabs-menu-link--active-border-size)); /* LTR */
   -webkit-text-decoration: none;
   text-decoration: none;
-  word-wrap: break-word;
-  -webkit-hyphens: auto;
-  hyphens: auto;
   color: var(--color-text);
   border: var(--vertical-tabs-border-size) solid transparent;
   border-width: var(--vertical-tabs-border-size) 0 var(--vertical-tabs-border-size) var(--vertical-tabs-menu-link--active-border-size); /* LTR */

core/themes/claro/css/theme/media-library.pcss.css

@@ -62,8 +62,6 @@
   margin-top: calc(var(--vertical-tabs-border-size) * -1);
   padding: var(--space-s) var(--space-s) var(--space-s) calc(var(--space-l) - var(--vertical-tabs-menu-link--active-border-size)); /* LTR */
   text-decoration: none;
-  word-wrap: break-word;
-  hyphens: auto;
   color: var(--color-text);
   border: var(--vertical-tabs-border-size) solid transparent;
   border-width: var(--vertical-tabs-border-size) 0 var(--vertical-tabs-border-size) var(--vertical-tabs-menu-link--active-border-size); /* LTR */