[trafficcontrol] branch 5.1.x updated: Fix table styling causing horizontal overflow (#5566)

[ocket8888]

This is an automated email from the ASF dual-hosted git repository.

ocket8888 pushed a commit to branch 5.1.x
in repository https://gitbox.apache.org/repos/asf/trafficcontrol.git


The following commit(s) were added to refs/heads/5.1.x by this push:
     new 3c0e8e6  Fix table styling causing horizontal overflow (#5566)
3c0e8e6 is described below

commit 3c0e8e6a76f4ffe2dbe05966488e712ba4703f1f
Author: ocket8888 <ocket8...@apache.org>
AuthorDate: Fri Mar 19 14:22:38 2021 -0600

    Fix table styling causing horizontal overflow (#5566)
    
    * Fix table styling causing horizontal overflow
    
    * Add small screen support
    
    * Update CHANGELOG
    
    * Remove unused selector
    
    * Fix window sizing and unnecessary overflow rules
    
    * Fix squeezed columns
    
    (cherry picked from commit ad1f00c6cd450eb1e29ddf740f1e224e536c7072)
---
 CHANGELOG.md                     |  2 ++
 traffic_monitor/static/style.css | 25 ++++++++++++++++++++-----
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 579de5a..eaab102 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,8 @@ The format is based on [Keep a 
Changelog](http://keepachangelog.com/en/1.0.0/).
 - Fixed Invalid TS logrotate configuration permissions causing TS logs to be 
ignored by logrotate.
 - [#5604](https://github.com/apache/trafficcontrol/issues/5604) - 
traffic_monitor.log is no longer truncated when restarting Traffic Monitor
 - [#1624](https://github.com/apache/trafficcontrol/issues/1624) - Fixed ORT to 
reload Traffic Server if LUA scripts are added or changed.
+- #5554 - TM UI overflows screen width and hides table data
+
 
 ## [5.1.0] - 2021-02-21
 ### Added
diff --git a/traffic_monitor/static/style.css b/traffic_monitor/static/style.css
index a12eabc..4b08c79 100644
--- a/traffic_monitor/static/style.css
+++ b/traffic_monitor/static/style.css
@@ -21,7 +21,6 @@ body {
        font-family: "Lato", sans-serif;
        font-size: 14px;
        margin: 0;
-       max-width: 100vw;
 }
 
 /*****************/
@@ -34,7 +33,11 @@ table {
 }
 
 th, td {
-       padding:5px 20px 5px 5px;
+       padding: 5px 20px 5px 5px;
+}
+
+td {
+       white-space: normal;
 }
 
 tbody#cache-states tr.server-status:nth-child(4n+3) {
@@ -90,10 +93,10 @@ div.sub-table-indicator.down {
        background-color: #f80!important;
 }
 
-#cache-states .text-entry {
+#cache-states-content .text-entry {
        text-align: left;
 }
-#cache-states .number-entry {
+#cache-states-content .number-entry {
        text-align: right;
 }
 
@@ -237,11 +240,23 @@ label:hover {
        background-color: #f1f1f1;
        position: relative;
 }
+
+@media(max-width: 1499) {
+       table {
+               table-layout: auto;
+       }
+}
+
+@media(min-width: 1500) {
+       table {
+               table-layout: fixed;
+       }
+}
+
 .tabcontent {
        z-index: 2;
        display: none;
        visibility: hidden;
-       overflow: hidden;
        width: 100%;
        position: absolute;
        top: 53px;