Prevent text wrapping on small screens

Fixes #845
This commit is contained in:
Uku Taht 2021-03-31 15:18:49 +03:00
parent 3e33385afd
commit 2e70a8f8b5
2 changed files with 13 additions and 5 deletions

View File

@ -64,11 +64,19 @@ blockquote {
position: relative;
height: 0;
/* Formula is: (top row height + (graph height / graph width * 100%)) */
padding-top: calc(148px + (451 / 1088 * 100%));
padding-top: calc(168px + (451 / 1088 * 100%));
}
@screen sm {
.main-graph {
padding-top: calc(148px + (451 / 1088 * 100%));
}
}
@screen md {
padding-top: calc(128px + (451 / 1088 * 100%));
.main-graph {
padding-top: calc(128px + (451 / 1088 * 100%));
}
}
@screen lg {

View File

@ -273,9 +273,9 @@ class LineGraph extends React.Component {
return (
<div className={`px-8 w-1/2 my-4 lg:w-auto ${border}`} key={stat.name}>
<div className="text-xs font-bold tracking-wide text-gray-500 uppercase dark:text-gray-400">{stat.name}</div>
<div className="flex items-center justify-between my-1">
<b className="mr-4 text-2xl dark:text-gray-100" tooltip={this.topStatTooltip(stat)}>{ this.topStatNumberShort(stat) }</b>
<div className="text-xs font-bold tracking-wide text-gray-500 uppercase dark:text-gray-400 whitespace-nowrap">{stat.name}</div>
<div className="flex items-center justify-between my-1 whitespace-nowrap">
<b className="mr-4 text-xl md:text-2xl dark:text-gray-100" tooltip={this.topStatTooltip(stat)}>{ this.topStatNumberShort(stat) }</b>
{this.renderComparison(stat.name, stat.change)}
</div>
</div>