diff --git a/src/components/common/table.module.scss b/src/components/common/table.module.scss index a8bb49d90..27a4e912c 100644 --- a/src/components/common/table.module.scss +++ b/src/components/common/table.module.scss @@ -1,4 +1,5 @@ @import '../../scss/colors.module.scss'; +@import '../../scss/breakpoints.module.scss'; .align-left { text-align: left; @@ -7,11 +8,11 @@ .table { line-height: 1rem; border-collapse: collapse; - margin: 0.5rem 0; + margin: 0.5rem 0 1.5rem; font-variant-numeric: lining-nums tabular-nums; width: 100%; - @media only screen and (max-width: 640px) { + @media only screen and (max-width: $viewport-lg) { display: block; overflow-x: auto; white-space: nowrap; @@ -28,16 +29,6 @@ border-left: 1px solid $color-slate-300; } - td { - text-align: right; - padding: 0.75rem 0.5rem; - font-size: 1rem; - - &.align-left { - text-align: left; - } - } - thead { border-bottom: 1px solid $color-slate-400; @@ -66,6 +57,10 @@ } tbody { + th, + td { + vertical-align: top; + } th { font-weight: normal; } @@ -78,4 +73,13 @@ } } } + td { + text-align: right; + padding: 0.75rem 0.5rem; + font-size: 1rem; + + &.align-left { + text-align: left; + } + } } diff --git a/src/components/pages/state/state-history.module.scss b/src/components/pages/state/state-history.module.scss index ef3ef1f52..ca627c50f 100644 --- a/src/components/pages/state/state-history.module.scss +++ b/src/components/pages/state/state-history.module.scss @@ -1,3 +1,5 @@ +@import '../../../scss/breakpoints.module.scss'; + .history { th:last-child, td:last-child { @@ -5,15 +7,23 @@ } ul { + list-style: none; margin: 0; padding: 0; - list-style: none; - display: inline list-item; } li { - display: inline; - padding: 0.8em; padding-left: 0; + margin-bottom: 0.5em; + } + @media (min-width: $viewport-md) { + li { + display: inline; + margin-bottom: 0; + margin-left: 0.75em; + } + li:first-child { + margin-left: 0; + } } }