plausible/analytics
1
1
Fork 0
mirror of https://github.com/plausible/analytics.git synced 2024-12-23 17:44:43 +03:00
Code Issues Packages Projects Releases Wiki Activity

Prevent text wrapping on small screens

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
assets/css/app.css
View File

@ -64,11 +64,19 @@ blockquote {
position: relative; position: relative;
height: 0; height: 0;
/* Formula is: (top row height + (graph height / graph width * 100%)) */ /* 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 { @screen md {
padding-top: calc(128px + (451 / 1088 * 100%)); .main-graph {
padding-top: calc(128px + (451 / 1088 * 100%));
}
} }
@screen lg { @screen lg {

6
assets/js/dashboard/stats/visitor-graph.js
View File

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