From 85b0b6d73db93be2d4e8d66694ae773dac33a6c8 Mon Sep 17 00:00:00 2001
From: pierre <dommerc.pierre@gmail.com>
Date: Fri, 5 Jan 2024 13:44:01 +0100
Subject: [PATCH] fix vertical overflow

---
 nym-vpn/ui/src/pages/NavLayout.tsx                 | 4 +++-
 nym-vpn/ui/src/pages/home/Home.tsx                 | 2 +-
 nym-vpn/ui/src/pages/settings/display/UiScaler.tsx | 2 +-
 nym-vpn/ui/src/ui/TopBar.tsx                       | 9 ++++++++-
 4 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/nym-vpn/ui/src/pages/NavLayout.tsx b/nym-vpn/ui/src/pages/NavLayout.tsx
index 2fba78c338..80584d461e 100644
--- a/nym-vpn/ui/src/pages/NavLayout.tsx
+++ b/nym-vpn/ui/src/pages/NavLayout.tsx
@@ -5,7 +5,9 @@ function NavLayout() {
   return (
     <div className="h-full flex flex-col bg-blanc-nacre dark:bg-baltic-sea text-baltic-sea dark:text-white">
       <TopBar />
-      <Outlet />
+      <div className="h-full flex flex-col overflow-auto">
+        <Outlet />
+      </div>
     </div>
   );
 }
diff --git a/nym-vpn/ui/src/pages/home/Home.tsx b/nym-vpn/ui/src/pages/home/Home.tsx
index 63ff90e0ac..27486a7823 100644
--- a/nym-vpn/ui/src/pages/home/Home.tsx
+++ b/nym-vpn/ui/src/pages/home/Home.tsx
@@ -76,7 +76,7 @@ function Home() {
   return (
     <div className="h-full flex flex-col p-4">
       <ConnectionStatus />
-      <div className="flex grow flex-col justify-between gap-y-2">
+      <div className="flex grow flex-col justify-between gap-y-6">
         <div className="flex flex-col justify-between gap-y-4">
           <NetworkModeSelect />
           <div className="flex flex-col gap-4">
diff --git a/nym-vpn/ui/src/pages/settings/display/UiScaler.tsx b/nym-vpn/ui/src/pages/settings/display/UiScaler.tsx
index c5a0652fcc..3d9734b25e 100644
--- a/nym-vpn/ui/src/pages/settings/display/UiScaler.tsx
+++ b/nym-vpn/ui/src/pages/settings/display/UiScaler.tsx
@@ -38,7 +38,7 @@ function UiScaler() {
         onChange={handleChange}
         onMouseUp={setNewFontSize}
         onKeyUp={setNewFontSize}
-        className="range flex flex-1 accent-melon"
+        className="range flex flex-1 accent-melon cursor-pointer"
       />
     </div>
   );
diff --git a/nym-vpn/ui/src/ui/TopBar.tsx b/nym-vpn/ui/src/ui/TopBar.tsx
index 809c9a2cf0..2f3bfe7fa8 100644
--- a/nym-vpn/ui/src/ui/TopBar.tsx
+++ b/nym-vpn/ui/src/ui/TopBar.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
+import clsx from 'clsx';
 import { routes } from '../constants';
 import { Routes } from '../types';
 
@@ -95,7 +96,13 @@ export default function TopBar() {
   }, [location.pathname, navBarData]);
 
   return (
-    <nav className="flex flex-row flex-nowrap justify-between items-center shrink-0 bg-white text-baltic-sea dark:bg-baltic-sea-jaguar dark:text-mercury-pinkish h-16 text-xl">
+    <nav
+      className={clsx([
+        'flex flex-row flex-nowrap justify-between items-center shrink-0',
+        'bg-white text-baltic-sea dark:bg-baltic-sea-jaguar dark:text-mercury-pinkish',
+        'h-16 text-xl shadow z-50',
+      ])}
+    >
       {currentNavLocation?.leftIcon ? (
         <button className="w-6 mx-4" onClick={currentNavLocation.handleLeftNav}>
           <span className="font-icon dark:text-laughing-jack text-2xl">