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

[oc...@apache.org]

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 <oc...@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;