Layout fixes

src/App.tsx

@@ -137,7 +137,7 @@ const App = (): JSX.Element => {
     >
       <div className="flex flex-col h-full bg-gray-200 dark:bg-primaryDark">
         <div className="flex flex-shrink-0 overflow-hidden bg-primary dark:bg-primary">
-          <div className="w-full overflow-hidden bg-white border-b md:mt-8 md:mx-8 md:pt-4 md:pb-3 md:rounded-t-3xl dark:border-gray-600 md:shadow-md dark:bg-primaryDark">
+          <div className="w-full overflow-hidden bg-white border-b md:mt-6 md:mx-6 md:pt-4 md:pb-3 md:rounded-t-3xl dark:border-gray-600 md:shadow-md dark:bg-primaryDark">
             <div className="flex items-center justify-between h-16 px-4 md:px-6">
               <div className="hidden md:flex">
                 <Logo />
@@ -153,7 +153,7 @@ const App = (): JSX.Element => {
         </div>
         <MobileNav />
 
-        <div className="flex flex-grow w-full min-h-0 md:px-8 md:mb-8">
+        <div className="flex flex-grow w-full min-h-0 md:px-6 md:mb-6">
           <div className="flex w-full bg-gray-100 md:shadow-xl md:overflow-hidden dark:bg-secondaryDark md:rounded-b-3xl">
             {route.name === 'messages' && <Messages />}
             {route.name === 'nodes' && <Nodes />}

src/components/templates/PrimaryTemplate.tsx

@@ -20,16 +20,12 @@ export const PrimaryTemplate = ({
       <div className="flex p-4 bg-white border-b md:flex-row flex-0 md:items-center md:justify-between md:px-10 dark:border-gray-600 dark:bg-secondaryDark">
         {button && <div className="pr-2 m-auto md:hidden">{button}</div>}
         <div className="flex-1 min-w-0">
-          <div className="flex flex-wrap items-center font-medium">
+          <a className="whitespace-nowrap font-medium text-primary">
-            <div>
+            {tagline}
-              <a className="whitespace-nowrap text-primary">{tagline}</a>
+          </a>
-            </div>
+          <h2 className="text-3xl font-extrabold leading-7 tracking-tight truncate md:text-4xl md:leading-10 dark:text-white">
-          </div>
+            {title}
-          <div className="mt-2">
+          </h2>
-            <h2 className="text-3xl font-extrabold leading-7 tracking-tight truncate md:text-4xl md:leading-10 dark:text-white">
-              {title}
-            </h2>
-          </div>
         </div>
       </div>
       <div className="flex-auto flex-grow p-6 overflow-y-auto bg-white md:p-10 dark:bg-secondaryDark">

src/index.css

@@ -1,3 +1,23 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/* custom scrollbar */
+::-webkit-scrollbar {
+  width: 20px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #d6dee1;
+  border-radius: 20px;
+  border: 6px solid transparent;
+  background-clip: content-box;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: #a8bbbf;
+}

src/pages/settings/Device.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
+import { Card } from '@app/components/generic/Card';
 import { Toggle } from '@app/components/generic/Toggle';
 import { connection } from '@app/core/connection';
 import { useAppSelector } from '@app/hooks/redux';
@@ -62,17 +63,22 @@ export const Device = ({ navOpen, setNavOpen }: DeviceProps): JSX.Element => {
         </Button>
       }
     >
-      <div className="w-full max-w-3xl md:max-w-xl">
+      <Card
-        <form className="space-y-2" onSubmit={onSubmit}>
+        title="Basic settings"
-          <Input label={'Device Name'} {...register('longName')} />
+        description="Device name and user parameters"
-          <Input
+      >
-            label={'Short Name'}
+        <div className="p-10">
-            maxLength={3}
+          <form className="space-y-2" onSubmit={onSubmit}>
-            {...register('shortName')}
+            <Input label={'Device Name'} {...register('longName')} />
-          />
+            <Input
-          <Toggle label="Licenced Operator?" {...register('isLicensed')} />
+              label={'Short Name'}
-        </form>
+              maxLength={3}
-      </div>
+              {...register('shortName')}
+            />
+            <Toggle label="Licenced Operator?" {...register('isLicensed')} />
+          </form>
+        </div>
+      </Card>
     </PrimaryTemplate>
   );
 };