fix various design divergences

nym-vpn/ui/src/pages/home/ConnectionStatus.tsx

@@ -8,6 +8,7 @@ function ConnectionStatus() {
   const state = useMainState();
 
   const { t } = useTranslation('home');
+
   const statusBadgeDynStyles = {
     Connected: ['text-vert-menthe', 'bg-vert-prasin bg-opacity-10'],
     Disconnected: [
@@ -51,7 +52,7 @@ function ConnectionStatus() {
     }
   };
   return (
-    <div className="h-72 flex flex-col justify-center items-center gap-y-2">
+    <div className="h-full min-h-64 flex flex-col justify-center items-center gap-y-2">
       <div className="flex flex-1 items-end">
         <div
           className={clsx([

nym-vpn/ui/src/pages/home/Home.tsx

@@ -75,8 +75,10 @@ function Home() {
 
   return (
     <div className="h-full flex flex-col p-4">
-      <ConnectionStatus />
-      <div className="flex grow flex-col justify-between gap-y-6">
+      <div className="grow">
+        <ConnectionStatus />
+      </div>
+      <div className="flex flex-col justify-between gap-y-6">
         <div className="flex flex-col justify-between gap-y-4">
           <NetworkModeSelect />
           <div className="flex flex-col gap-6">

nym-vpn/ui/src/pages/home/HopSelect.tsx

@@ -41,7 +41,7 @@ export default function HopSelect({
       <div className="flex flex-row items-center gap-3">
         <img
           src={`./flags/${country.code.toLowerCase()}.svg`}
-          className="h-8 scale-90 pointer-events-none fill-current"
+          className="h-7 scale-90 pointer-events-none fill-current"
           alt={country.code}
         />
         <div className="text-base">{country.name}</div>