This is an automated email from the ASF dual-hosted git repository.
mattjackson pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/trafficcontrol.git
The following commit(s) were added to refs/heads/master by this push:
new ad1f00c Fix table styling causing horizontal overflow (#5566)
ad1f00c is described below
commit ad1f00c6cd450eb1e29ddf740f1e224e536c7072
Author: ocket8888 <[email protected]>
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
---
CHANGELOG.md | 1 +
traffic_monitor/static/style.css | 25 ++++++++++++++++++++-----
2 files changed, 21 insertions(+), 5 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 23fa347..9029b9a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -102,6 +102,7 @@ The format is based on [Keep a
Changelog](http://keepachangelog.com/en/1.0.0/).
- Moved move_lets_encrypt_to_acme.sql,
add_max_request_header_size_delivery_service.sql, and
server_interface_ip_address_cascade.sql past last migration in 5.0.0
- [#5505](https://github.com/apache/trafficcontrol/issues/5505) - Make
`parent_reval_pending` for servers in a Flexible Topology CDN-specific on `GET
/servers/{name}/update_status`
- [#5317](https://github.com/apache/trafficcontrol/issues/5317) - Clicking IP
addresses in the servers table no longer navigates to server details page.
+- #5554 - TM UI overflows screen width and hides table data
### Changed
- Refactored the Traffic Ops Go client internals so that all public methods
have a consistent behavior/implementation
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;
