diff --git a/app/styles/app.css b/app/styles/app.css index c35e0d7..c16bf61 100644 --- a/app/styles/app.css +++ b/app/styles/app.css @@ -588,3 +588,108 @@ body { opacity: 1; } } + +@media all and (max-width: 1919px) { + body { + overflow-x: hidden; + overflow-y: auto; + height: 100%; + width: 100%; + } + .github-status, + .branch-status { + max-width: 100%; + width: 50%; + float: left; + } + .card, + card { + height: auto; + max-width: 100%; + width: 100%; + } + .branch { + position: inherit; + width: 43%; + box-sizing: border-box; + margin: 1%; + } + .card-title { + padding-top: 20px; + line-height: 1; + height: auto; + } + .card-content { + padding: 1em; + } + .card-note { + line-height: 1; + } + .github-card { + width: 44%; + margin: 2%; + float: left; + } + .pr-card .card-title, + .issue-card .card-title, + .total-card .card-title { + max-height: 1em; + } + .github-status div.totals + .untriaged-card .card-value, + .google3-card .card-value, + .sha-count-card .card-value, + .card-value { + padding: 0; + font-size: 4em; + line-height: 1; + } +} +@media all and (max-width: 1152px) { + .github-status, + .branch-status { + width: 100%; + max-width: 100%; + float: none; + } + .branch-title { + clear: both; + } +} +@media all and (max-width: 600px) { + .github-status { + clear: both; + padding-top: 1em; + } + .branch-status .card { + margin: 10px 30px; + } + .untriaged-card .card-title { + min-height: 2em; + } +} +@media all and (max-width: 480px) { + .github-status { + clear: both; + padding-top: 1em; + } + .branch-status .card { + margin: 10px 30px; + } + .untriaged-card .card-title { + min-height: 2em; + } + .branch { + float: none; + clear: both; + width: 98%; + } + .branch-status .card, + .card { + width: 96%; + margin: 10px 2%; + float: none; + clear: both; + text-align: center; + } +}