Merge pull request #373 from acelaya-forks/feature/ui-fixes

Fixed minor UI glitches in visits section

CHANGELOG.md

@@ -19,6 +19,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Fixed
 * [#364](https://github.com/shlinkio/shlink-web-client/issues/364) Fixed all dropdowns so that they are consistently styled.
+* [#366](https://github.com/shlinkio/shlink-web-client/issues/366) Fixed text in visits menu jumping to next line in some tablet resolutions.
+* [#367](https://github.com/shlinkio/shlink-web-client/issues/367) Removed conflicting overflow in visits table for mobile devices.
 
 
 ## [3.0.0] - 2020-12-22

src/visits/VisitsStats.scss

@@ -13,6 +13,10 @@
   color: #5d6778;
   font-weight: 700;
   cursor: pointer;
+
+  @media (min-width: $smMin) and (max-width: $mdMax) {
+    font-size: 89%;
+  }
 }
 
 .visits-stats__nav-link:hover {

src/visits/VisitsStats.tsx

@@ -1,6 +1,6 @@
 import { isEmpty, propEq, values } from 'ramda';
 import { useState, useEffect, useMemo, FC } from 'react';
-import { Button, Card, Nav, NavLink, Progress } from 'reactstrap';
+import { Button, Card, Nav, NavLink, Progress, Row } from 'reactstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCalendarAlt, faMapMarkedAlt, faList, faChartPie } from '@fortawesome/free-solid-svg-icons';
 import { IconDefinition } from '@fortawesome/fontawesome-common-types';
@@ -61,11 +61,11 @@ const highlightedVisitsToStats = (
 let selectedBar: string | undefined;
 const initialInterval: DateInterval = 'last30Days';
 
-const VisitsNavLink: FC<VisitsNavLinkProps> = ({ subPath, title, icon, children }) => (
+const VisitsNavLink: FC<VisitsNavLinkProps & { to: string }> = ({ subPath, title, icon, to }) => (
   <NavLink
     tag={RouterNavLink}
     className="visits-stats__nav-link"
-    to={children}
+    to={to}
     isActive={(_: null, { pathname }: Location) => pathname.endsWith(`/visits${subPath}`)}
     replace
   >
@@ -146,12 +146,12 @@ const VisitsStats: FC<VisitsStatsProps> = ({ children, visitsInfo, getVisits, ca
     return (
       <>
         <Card className="visits-stats__nav p-0 overflow-hidden" body>
-          <Nav pills justified>
+          <Nav pills fill>
             {Object.entries(sections).map(([ section, props ]) =>
-              <VisitsNavLink key={section} {...props}>{buildSectionUrl(props.subPath)}</VisitsNavLink>)}
+              <VisitsNavLink key={section} {...props} to={buildSectionUrl(props.subPath)} />)}
           </Nav>
         </Card>
-        <div className="row">
+        <Row>
           <Switch>
             <Route exact path={baseUrl}>
               <div className="col-12 mt-4">
@@ -233,7 +233,7 @@ const VisitsStats: FC<VisitsStatsProps> = ({ children, visitsInfo, getVisits, ca
 
             <Redirect to={baseUrl} />
           </Switch>
-        </div>
+        </Row>
       </>
     );
   };

src/visits/VisitsTable.scss

@@ -5,6 +5,7 @@
   margin: 1.5rem 0 0;
   position: relative;
   background-color: white;
+  overflow-y: hidden;
 }
 
 .visits-table__header-cell {