318d4af062fce87394472706e0ba1094698a2c96
markd
  Thu Sep 5 22:09:30 2024 -0700
wordwrap track control short lables unless a label has words longer than 20 charters, then character-wrap that label.  Also a slight increates in max-width to accomidates adding small images in the label.   #34398

diff --git src/hg/htdocs/style/HGStyle.css src/hg/htdocs/style/HGStyle.css
index 203b0c2..9efc1ad 100644
--- src/hg/htdocs/style/HGStyle.css
+++ src/hg/htdocs/style/HGStyle.css
@@ -55,36 +55,51 @@
         font-size: 90%;
         text-align: center;
 }
 
 .infoText > input {
     margin-left: 3px;
     margin-right: 3px;
     padding-left: 8px;
     padding-right: 8px;
 }
 
 #patchNote {
     margin-left: 3em;
 }
 
+/* Word wrap if possible staying in width. this allows easy-to-read labels
+ * .trackLabelTdBreakAll is added to when any one word is too long to
+ * work break and stay in width (RM #34299).
+ */
 .trackLabelTd {
-        max-width: 14em;
+        /* WARNING: min-width must match hgTracks/hgTracks.c MAX_WIDTH_CHARS */
+        min-width: 16ch
+        max-width: 22ch;
         vertical-align: top;
-        word-break: normal;
+        white-space: normal;
+        word-break: break-word;
+        overflow-wrap: break-word;
+
 }
 
+/* For words that exceed max-width */
+.trackLabelTdBreakAll {
+    word-break: break-all;
+}
+
+
 .trackDeleteIcon {
         margin-right: 4px;
         display: inline;
         cursor: pointer;
 }
 
 .controlButtons {
     margin-bottom: 6px;
 }
 
 .blueLink {
         color: #121E9A !important; 
         cursor: pointer;
 }