Moved shlink versions to the outer element so that's always visible

src/App.scss

@@ -8,3 +8,19 @@
   padding-top: $headerHeight;
   height: 100%;
 }
+
+.shlink-wrapper {
+  min-height: 100%;
+  padding-bottom: $footer-height + $footer-margin;
+  margin-bottom: -($footer-height + $footer-margin);
+}
+
+.shlink-footer {
+  height: $footer-height;
+  margin-top: $footer-margin;
+  padding: 0;
+
+  @media (min-width: $mdMin) {
+    padding: 0 15px;
+  }
+}

src/App.tsx

@@ -9,9 +9,15 @@ interface AppProps {
   servers: ServersMap;
 }
 
-const App = (MainHeader: FC, Home: FC, MenuLayout: FC, CreateServer: FC, EditServer: FC, Settings: FC) => (
-  { fetchServers, servers }: AppProps,
-) => {
+const App = (
+  MainHeader: FC,
+  Home: FC,
+  MenuLayout: FC,
+  CreateServer: FC,
+  EditServer: FC,
+  Settings: FC,
+  ShlinkVersions: FC,
+) => ({ fetchServers, servers }: AppProps) => {
   // On first load, try to fetch the remote servers if the list is empty
   useEffect(() => {
     if (Object.keys(servers).length === 0) {
@@ -24,14 +30,20 @@ const App = (MainHeader: FC, Home: FC, MenuLayout: FC, CreateServer: FC, EditSer
       <MainHeader />
 
       <div className="app">
-        <Switch>
-          <Route exact path="/" component={Home} />
-          <Route exact path="/settings" component={Settings} />
-          <Route exact path="/server/create" component={CreateServer} />
-          <Route exact path="/server/:serverId/edit" component={EditServer} />
-          <Route path="/server/:serverId" component={MenuLayout} />
-          <Route component={NotFound} />
-        </Switch>
+        <div className="shlink-wrapper">
+          <Switch>
+            <Route exact path="/" component={Home} />
+            <Route exact path="/settings" component={Settings} />
+            <Route exact path="/server/create" component={CreateServer} />
+            <Route exact path="/server/:serverId/edit" component={EditServer} />
+            <Route path="/server/:serverId" component={MenuLayout} />
+            <Route component={NotFound} />
+          </Switch>
+        </div>
+
+        <div className="shlink-footer text-center text-md-right">
+          <ShlinkVersions />
+        </div>
       </div>
     </div>
   );

src/common/Home.scss

@@ -2,7 +2,7 @@
 
 .home {
   text-align: center;
-  height: calc(100vh - #{$headerHeight});
+  height: calc(100vh - #{$headerHeight} - #{($footer-height + $footer-margin)});
   display: flex;
   align-items: center;
   justify-content: center;

src/common/MenuLayout.scss

@@ -33,25 +33,11 @@
   color: white;
 }
 
-$footer-height: 2.3rem;
-$footer-margin: .8rem;
-
 .menu-layout__container {
-  padding: 20px 0 ($footer-height + $footer-margin);
+  padding: 20px 0 0;
   min-height: 100%;
-  margin-bottom: -($footer-height + $footer-margin);
 
   @media (min-width: $mdMin) {
-    padding: 30px 15px ($footer-height + $footer-margin);
-  }
-}
-
-.menu-layout__footer {
-  height: $footer-height;
-  margin-top: $footer-margin;
-  padding: 0;
-
-  @media (min-width: $mdMin) {
-    padding: 0 15px;
+    padding: 30px 15px 0;
   }
 }

src/common/MenuLayout.tsx

@@ -19,7 +19,6 @@ const MenuLayout = (
   CreateShortUrl: FC,
   ShortUrlVisits: FC,
   TagVisits: FC,
-  ShlinkVersions: FC,
   ServerError: FC,
 ) => withSelectedServer(({ location, selectedServer }) => {
   const [ sidebarVisible, toggleSidebar, showSidebar, hideSidebar ] = useToggle();
@@ -71,10 +70,6 @@ const MenuLayout = (
                 />
               </Switch>
             </div>
-
-            <div className="menu-layout__footer text-center text-md-right">
-              <ShlinkVersions />
-            </div>
           </div>
         </div>
       </Swipeable>

src/common/NoMenuLayout.scss

@@ -1,3 +1,3 @@
 .no-menu-wrapper {
-  padding: 40px 20px;
+  padding: 40px 20px 20px;
 }

src/common/ShlinkVersions.tsx

@@ -14,12 +14,7 @@ export interface ShlinkVersionsProps {
   className?: string;
 }
 
-interface VersionLinkProps {
-  project: 'shlink' | 'shlink-web-client';
-  version: string;
-}
-
-const VersionLink = ({ project, version }: VersionLinkProps) => (
+const VersionLink = ({ project, version }: { project: 'shlink' | 'shlink-web-client'; version: string }) => (
   <ExternalLink href={`https://github.com/shlinkio/${project}/releases/${version}`} className="text-muted">
     <b>{version}</b>
   </ExternalLink>

src/common/services/provideServices.ts

@@ -30,7 +30,6 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator, withRouter:
     'CreateShortUrl',
     'ShortUrlVisits',
     'TagVisits',
-    'ShlinkVersions',
     'ServerError',
   );
   bottle.decorator('MenuLayout', connect([ 'selectedServer', 'shortUrlsListParams' ], [ 'selectServer' ]));

src/container/index.ts

@@ -30,7 +30,7 @@ const connect: ConnectDecorator = (propsFromState: string[] | null, actionServic
     actionServiceNames.reduce(mapActionService, {}),
   );
 
-bottle.serviceFactory('App', App, 'MainHeader', 'Home', 'MenuLayout', 'CreateServer', 'EditServer', 'Settings');
+bottle.serviceFactory('App', App, 'MainHeader', 'Home', 'MenuLayout', 'CreateServer', 'EditServer', 'Settings', 'ShlinkVersions');
 bottle.decorator('App', connect([ 'servers' ], [ 'fetchServers' ]));
 
 provideCommonServices(bottle, connect, withRouter);

src/utils/base.scss

@@ -17,3 +17,5 @@ $mediumGrey: #dee2e6;
 
 // Misc
 $headerHeight: 57px;
+$footer-height: 2.3rem;
+$footer-margin: .8rem;