diff options
| author | Oskar Nyberg <oskar@mullvad.net> | 2022-04-13 09:18:01 +0200 |
|---|---|---|
| committer | Oskar Nyberg <oskar@mullvad.net> | 2022-04-20 10:06:24 +0200 |
| commit | 74641d8900ce1c9590ddc167b2009f0a8060f246 (patch) | |
| tree | d41d11ddcc53ca60ac78f3d71b2cfe003c5ca98f | |
| parent | a96b1d873aa08c1dde9c176ba6c44624b9e960cb (diff) | |
| download | mullvadvpn-74641d8900ce1c9590ddc167b2009f0a8060f246.tar.xz mullvadvpn-74641d8900ce1c9590ddc167b2009f0a8060f246.zip | |
Verticaly fix location rows
| -rw-r--r-- | gui/src/renderer/components/TunnelControl.tsx | 26 |
1 files changed, 22 insertions, 4 deletions
diff --git a/gui/src/renderer/components/TunnelControl.tsx b/gui/src/renderer/components/TunnelControl.tsx index db91e9558f..0822156445 100644 --- a/gui/src/renderer/components/TunnelControl.tsx +++ b/gui/src/renderer/components/TunnelControl.tsx @@ -63,6 +63,10 @@ const Location = styled.div({ marginBottom: 2, }); +const LocationRow = styled.div({ + height: '36px', +}); + const StyledMarquee = styled(Marquee)(hugeText, { lineHeight: '36px', overflow: 'hidden', @@ -163,7 +167,10 @@ export default class TunnelControl extends React.Component<ITunnelControlProps> <Wrapper> <Body> <Secured displayStyle={SecuredDisplayStyle.unsecuring} /> - <Location>{this.renderCountry()}</Location> + <Location> + <LocationRow /> + {this.renderCountry()} + </Location> </Body> <Footer> {this.selectLocationButton()} @@ -180,7 +187,10 @@ export default class TunnelControl extends React.Component<ITunnelControlProps> <Wrapper> <Body> <Secured displayStyle={displayStyle} /> - <Location>{this.renderCountry()}</Location> + <Location> + <LocationRow /> + {this.renderCountry()} + </Location> </Body> <Footer> {this.selectLocationButton()} @@ -197,13 +207,21 @@ export default class TunnelControl extends React.Component<ITunnelControlProps> private renderCity() { const city = this.props.city === undefined ? '' : relayLocations.gettext(this.props.city); - return <StyledMarquee>{city}</StyledMarquee>; + return ( + <LocationRow> + <StyledMarquee>{city}</StyledMarquee> + </LocationRow> + ); } private renderCountry() { const country = this.props.country === undefined ? '' : relayLocations.gettext(this.props.country); - return <StyledMarquee>{country}</StyledMarquee>; + return ( + <LocationRow> + <StyledMarquee>{country}</StyledMarquee> + </LocationRow> + ); } private switchLocationButton() { |