chore: fix footer overflow

This commit is contained in:
Aman Harwara
2023-04-12 18:42:52 +05:30
parent 29e7c8b58d
commit e04f09edca

View File

@@ -354,7 +354,7 @@ class Footer extends AbstractComponent<Props, State> {
id="footer-bar" id="footer-bar"
className="z-footer-bar hidden h-8 w-full select-none items-center justify-between border-t border-border bg-contrast px-3 text-text md:flex" className="z-footer-bar hidden h-8 w-full select-none items-center justify-between border-t border-border bg-contrast px-3 text-text md:flex"
> >
<div className="left flex h-full"> <div className="left flex h-full flex-shrink-0">
<div className="sk-app-bar-item relative z-footer-bar-item ml-0 select-none"> <div className="sk-app-bar-item relative z-footer-bar-item ml-0 select-none">
<AccountMenuButton <AccountMenuButton
application={this.application} application={this.application}
@@ -393,14 +393,14 @@ class Footer extends AbstractComponent<Props, State> {
</Fragment> </Fragment>
)} )}
</div> </div>
<div className="center"> <div className="center max-h-full overflow-hidden px-4">
{this.state.arbitraryStatusMessage && ( {this.state.arbitraryStatusMessage && (
<div className="relative z-footer-bar-item flex select-none items-center text-xs font-bold text-neutral"> <div className="relative z-footer-bar-item max-h-full select-none items-center overflow-hidden text-ellipsis whitespace-nowrap text-xs font-bold text-neutral">
{this.state.arbitraryStatusMessage} {this.state.arbitraryStatusMessage}
</div> </div>
)} )}
</div> </div>
<div className="right flex h-full"> <div className="right flex h-full flex-shrink-0">
{this.state.dataUpgradeAvailable && ( {this.state.dataUpgradeAvailable && (
<div <div
onClick={this.securityUpdateClickHandler} onClick={this.securityUpdateClickHandler}
@@ -418,7 +418,7 @@ class Footer extends AbstractComponent<Props, State> {
</div> </div>
)} )}
{(this.state.outOfSync || this.state.showSyncResolution) && ( {(this.state.outOfSync || this.state.showSyncResolution) && (
<div className="relative z-footer-bar-item ml-3 flex select-none items-center"> <div className="relative z-footer-bar-item ml-3 flex flex-shrink-0 select-none items-center">
{this.state.outOfSync && ( {this.state.outOfSync && (
<div onClick={this.syncResolutionClickHandler} className="text-xs font-bold text-warning"> <div onClick={this.syncResolutionClickHandler} className="text-xs font-bold text-warning">
Potentially Out of Sync Potentially Out of Sync
@@ -430,7 +430,7 @@ class Footer extends AbstractComponent<Props, State> {
</div> </div>
)} )}
{this.state.offline && ( {this.state.offline && (
<div className="relative z-footer-bar-item ml-3 flex select-none items-center text-xs font-bold"> <div className="relative z-footer-bar-item ml-3 flex flex-shrink-0 select-none items-center text-xs font-bold">
Offline Offline
</div> </div>
)} )}